Classic Typography Effects in CSS: first-line run-in

• Captioning Images In HTML5

Nov 29 2009

Classic Typography Effects in CSS: first-line run-in

Another typographic convention is to emphasise the first line or first few words of an opening paragraph, known as a run-in. Typically these words are transformed into small-caps. CSS makes this easy. Returning to the scenario used in the earlier drop-cap exercise, in which the paragraph has an id, the associated CSS for this effect would be:

1. p#firstpara::first-line { font-variant: small-caps; }

Not every font face has a true small-caps variant; in that case, the browser will fake the equivalent. Other fonts are nothing but small caps: Trajan Pro, for example.

Note that this effect is dynamic: as the number of words in the first line changes (due to rescaling content or altering the browser window size), only the words that remain in the first line of the id firstpara paragraph are affected by this rule.

Affecting just the first few words is somewhat more complicated. There is, as of this writing, no pseudo-selector for :first-word, :second-word or :nth-word. The only solution for the time being would be to wrap a <span> tag around the words you wish to affect, and write a CSS rule for the span in context. Our HTML code would be:

1. <p id="firstpara">P<span>hilip, after the defeat</span> of Onomarchus, had marched toward the pass of Thermopylae, which, however, he found occupied by the Athenians, who had sent a force for the purpose of preventing his advance. Being baffled there, he directed his march into Thrace, and alarmed the Athenians for the safety of their dominions in the Chersonese.</p>

And the added CSS:

1. p#firstpara span { font-variant: small-caps; }

<span> is a tag that is used when there are absolutely no other alternatives for markup. <span> is an inline tag that is non-semantic: it provides no more information than "here is a set of content". For that reason, you should rack your brain for any alternative elements to <span> before using it.

Tags

• XHTML
• CSS

Nov28

◀Classic Typography Effects in CSS: Initial Cap, Drop Cap

CSS Interface Elements: Simple Navigation Bar ▶

Dec01

You must be signed up and logged in to leave a comment. Doing so only takes a moment.

This content by Dudley Storey is licensed under a Creative Commons Attribution-Noncommercial-Share Alike 2.5 Canada License.
Site written in XHTML 1.0 Strict, CSS Levels 1, 2 & 3