I’m Dudley Storey, the author of Pro CSS3 Animation. This is my blog, where I talk about web design and development with , and . To receive more information, including news, updates, and tips, you should follow me on Twitter or add me on Google+.

web developer guide

my books

Book cover of Pro CSS3 AnimationPro CSS3 Animation, Apress, 2013

my projects

CSSslidy: an auto-generated #RWD image slider. 1.5K of JS, no JQuery. Drop in images, add a line of CSS. Done.

tipster.ioAutomatically provides local tipping customs and percentages for services anywhere.

Philip, after the defeat of Onomarchus,
had marched toward the pass of Thermopylae…

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

css / typography

Estimated reading time: 1 minute, 37 seconds

Another typographic convention is to emphasize 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:

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. Alternatively, if you were using an OpenType font, you could employ true small caps.

Note that the effect of :first-line is dynamic: as the number of words changes (due to rescaling content or altering the browser window size), only the text that remains 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:

<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.

And the added CSS:

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 wrack your brain for any alternative elements to <span> before using it.

comments powered by Disqus

This site helps millions of visitors while remaining ad-free. For less than the price of a cup of coffee, you can help pay for bandwidth and server costs while encouraging further articles.