Typography#

Introduction#

Brushed Template can convert simple text characters to their typographically correct entities.

It is much easier for users to type certain special characters destined for display on a web page than it is for them to type the proper HTML character entity equivalents. Who remembers the syntactically correct double quotes “ and ” ( &8220; and &8221; )? Furthermore, who wants to type these constantly or clutter up their wiki markup with them ?

This feature addresses this problem by replacing some common typed characters with the proper entities. The following replacements are made:

  • paired single primes ( ' ' ) become single quotes ( ‘ ’ )
  • lone single primes becomes apostrophes ( ’ )
  • paired double primes ( " " ) become double quotes ( “ ” )
  • a triple dash ( --- ) becomes an em dash ( — )
  • a double dash ( -- ) becomes an en dash ( – )
  • three dots ( ... ) become a horizontal ellipsis ( … )
  • an x between 2 numbers ( 640x480 ) becomes a multiplication character ( × )
  • a number followed by ^2 or ^3 become a square and cube sign (eg 8² 8³ )
  • fraction markup ( 1/4 1/2 3/4) become fraction signs ( ¼ ½ ¾ )
  • this markup +- or -+ becomes a plus-minus-sign ( ± )
  • this markup (c) or (C) becomes a copyright sign ( © )
  • this markup (tm) or (TM) becomes a registered trade mark sign ( ™ )
  • this markup (r) or (R) becomes a trade mark sign ( ® )
  • arrow markup ( -> <- <-> => <= <=> >> << ) become real arrows ( ↔ → ← ⇔ ⇒ ⇐ » « )

The typographic replacemens are not done inside preformatted triple { blocks.

Example#

Here is an example of recognized characters.

This markup

-> <- <-> => <= <=> >> << -- --- ... 640x480 (c) (tm) (r)
"He thought 'It's a man's world'..."
1/4 1/2 3/4 +- 8^2 8^3 

Will render as:

→ ← ↔ ⇒ ⇐ ⇔ » « – — 640×480 © ™ ® “He thought ‘It’s a man’s world’...” ¼ ½ ¾ ± 8² 8³

Reality check: (only when UserPreferences are turned on)

-> <- <-> => <= <=> >> << -- --- 640x480 (c) (tm) (r) "He thought 'It's a man's world'..." 1/4 1/2 3/4 +- 8^2 8^3

Implementation#

Inspired by http://www.gazingus.org/html/Entity_Replacement.html, by David Lindquist (http://www.gazingus.org)

This feature is implemented as client-side javascript. When javascript is not active, the page will be rendered unchanged.

All conversion are implemented through fairly straight-forward regular expressions. It should be easy to extend the conversions when needed. You can find the involved js code in templates/brushed/script/brushed.js, in the Typography.onPageLoad() function.

Discussion#

I would like to “translate” the quotation marks in the BrushedTemplateInGerman. Instead of the English double quotation marks (“”), we use code 8222 and code 8220 („“). English single quotation marks are 8216 and 8217 (‘’), whereas Germans use 8218 and 8216 (‚‘). The apostrophe is the same in both languages, 8217 (’). Those codes can easily be modified chaning the numbers in scripts/brushed.js. The problem would be the single quotation marks. It seems to me that Brushed template only defines the opening single quotation mark, but for the closing one the apostrophe is used. Would it be possible to use separate codes for apostrophe and closing single quotation mark in future versions? This would make translating easier.

--Candid Dauth, 28-Aug-2006

Indeed, the SINGLE-QUOTEs regular expression only matches the starting quotes. Can you propose the required changes in regular expressions for this? --DF

Added to BrushedTemplate in Oct 06, --DF

Add new attachment

Only authorized users are allowed to upload new attachments.
« This page (revision-3) was last changed on 22-Feb-2007 12:00 by DirkFrederickx