Improve the Typographic Style of Your Expression Engine Websites

Have you noticed the increased focus in the last year or so on better typographic style on the internet. Topics like typographic grids and vertical rhythm have recieved more attention in relation to web design. Other aspects of typographic style like the styling of ampersands and the use of proper quote characters has also received more focus than before. It is the application of these latter aspects of typograhic style in the context of the Expression Engine CMS that is the focus of this article.

The Background Story

Typogrify is a collection of filters for the Django Web framework, which provides filters that help you follow better typographic styles. It filters your website through a number of regular expressions and wraps certain typographically significant entities in HTML span elements with a class name that identify the typographic element; e.g. the class amp is set on a span enclosing ampersand characters.

Typogrify Plugin for Expression Engine

The typogrify plugin for Expression Engine is a reinterpretation of the Django filters of the same name. I have used the original ideas and expanded a bit on them.

Here I present the functions that are available in the plugin with a short description of what it does to your text.

{exp:typogrify:amp}

Wrap ampersands in a span with class=”amp”. This enables you to follow Bringhursts recommendation to “In heads and titles, use the best available ampersand”.

{exp:typogrify:caps}

Wrap sequences of capital letters in a span with class=”caps”. This is useful if you want to set sequences of capitals as small capitals.

There must be at least two capital letters in the sequence, the letters may be separated by periods, and the sequence must be surrounded by characters other than letters.

That last criteria is a change from the Django filters, which means that we will not wrap the initials in a name like W.B.Yeats, because the W.B.Y capitals are followed immediately by a lowercase letter. The reason for this change is that it is not usually considered good practice in typography to set those capitals as small capitals.

{exp:typogrify:initial_quote} and {exp:typogrify:final_quote}

Wrap a quote character that is the first/last character in a paragraph in the two classes “initial”/”final” and “quote”. A paragraph in this context means either an actual paragraph element, a heading element or a list element.

The quote characters that we recognize here as initial quote characters are the left double angle, the left angle, the left double and the left single entities—the characters classified in Unicode as initial quote characters.

The quote characters that we recognize here as the final quote characters are the right double angle, the right angle, the right double and the right single entities—the characters classified in Unicode as final quote characters.

{exp:typogrify:smartypants attr=”2”}

This is just a wrapping of the PHP port by Michel Fortin of John Grubers SmartyPants perl script. I have made one change from the original script; the default attribute is set to 2, which means that ”---” (three dashes) are used for em-dashes and ”--” (two dashes) for en-dashes; this default can be overridden with the attr parameter.

{exp:typogrify:widont}

Insert a non-breaking space entity between the two last words in every paragraph. A paragraph in this context means either an actual paragraph element, a heading element or a list element. This will avoid what typographers refer to as “widows”—a single word on its own line at the end of a paragraph.

{exp:typogrify}

A shortcut to apply all the functions in the plugin.

Where the Functions Don’t Apply

Except for the widont function, any text inside pre/code/kbd/script/math elements is not processed by these functions, but just passed through unchanged. The widont function has proven somewhat problematic in this regard and as for now that function will change all text where the function is applied.