This is a very old article. It has been imported from older blogging software, and the formatting, images, etc may have been lost. Some links may be broken. Some of the information may no longer be correct. Opinions expressed in this article may no longer be held.
I've said it already, and I'll say it again: typography is a very important and oft-neglected aspect of web design. demiblog is my CMS; although great typography requires the conscious effort of the author/typesetter, and can't be handled automatically by a CMS, there are certainly steps a CMS can take to ease the burden on its users; in this article I'll outline some of demiblog's features that help typography.
The Asterism
Let's start with the most suprious of features. In printing, it is common to mark a break in the flow by a centred paragraph consisting of just three asterisks (* * *).
If you create a paragraph in demiblog which consists of just three asterisks and no spaces in between then demiblog will detect this as a dividing mark and can be configured to replace it with a different dividing mark. This can be something as dull as an HTML <hr> tag, which adds a bevelled horizontal rule, or some other division, unique to your website.
Quotes, Dashes and Elipses
Proper typography uses “curly quotes” — the difference between the beginning and end marks helps you to visually distinguish whether a bit of quoted text is starting or has just ended. This " character on your keyboard has very little use. However, keyboards tend not to have keys for the curly quote characters, so typography suffers.
demiblog allows you to use the boring old " key and converts text to use proper quote marks just prior to serving the page up to visitors. It does all this thanks to the wonderful SmartyPants library being included.
This also applies to 'single quotes' and to apostrophes, don't you know.
There are at least four types of dash-like character in common use — the “em” dash (that was one just there), the “en” dash (used for marking out ranges and expanses like 0—9 or the London—Paris train), the hyphen (for hyphenated-words) and the minus (for subtraction and negitive numbers, e.g. -1). Here the typical QWERTY keyboard is of more use, because it includes -, the so called “hyphen-minus” key. This key may acceptably be used for either a hyphen or a minus. Many fonts do include a seperate, slightly longer minus character, but the value of using it seems negligable unless you type up an awful lot of mathematical formulae.
As for those other pair though, demiblog will automatically convert a double-hyphen into an em dash, and a triple hyphen into an en dash. (Explanation for triple hyphen: Because although an en dash is shorter than an em dash, it's not as frequently used, so it makes sense to use the simpler double-hyphen for em dashes.) Again, this is all thanks to the magic of SmartyPants.
Whatsmore, when demiblog spots a space character before an em dash, it will convert that space into a non-breaking space, which ought to prevent lines from starting with an em dash, which would be a typographical sin. This is demiblog's own extension to SmartyPants.
Finally… elipses. An elipsis is a series of three dots, like the one that began this paragraph. Rather than just using three full stops, most fonts also include a specific elipsis character, with tighter spacing between the dots than there would otherwise be. As you may have guessed, demiblog automatically converts any series of three dots into a proper elipsis character. This again, is SmartyPants' doing!
Always Use the Best Possible Ampersand
In some fonts, the ampersand is nothing special. In other fonts the ampersand is a masterpiece of swirls — it is worth switching fonts just to use that ampersand.
To make this easier, demiblog will pick out all ampersands and replace them with:
<span class="amp">&</span>
This allows you to, with a little CSS, style ampersands seperately from the surrounding text. You can give them a different font, make them a little bigger or smaller, or even change their colour, though I wouldn't recommend that!
Footnotes
Although, these days, the most common footnote scheme is to use superscript numbers, demiblog supports a number of other options. When you type your footnotes up, you should use numbers, and then a demiblog plugin will present these in your choice of a number of different footnote schemes:
- Classic (*, †, ‡, §, ¶)
- Classic extended (*, †, ‡, §, ¶, ||, **, ††, ‡‡)
- Miniscule Roman numerals (i, ii, iii, …, xx)
- Majuscule Roman numerals (I, II, III, …, XX)
- Lower case letters (a, b, c, …, z)
- Capital letters (A, B, C, …, Z)
- Hindu-Arabic numerals (1, 2, 3, …)
Whatsmore, if demiblog detects that your document has more footnotes than the scheme is able to handle (e.g. the classic scheme only includes five footnote markers, so cannot handle a document with six footnotes), then it will switch to a more appropriate scheme. It does so in roughly the order above, though in the case of “classic”, it will skip to lower case Roman numerals rather than “classic extended”.
The asterisks, daggers, section marks and pilcrows used by the classic schemes are a standard progression of footnote markers used for centuries.
***
These are the steps demiblog takes to help your document look beautiful. The rest is up to you.
