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 other blogs

Massive Head Canon: Intelligent discussion of movies, books, games, and technology.

my projects

A Sass color keyword system for designers. Replaces CSS defaults with improved hues and more memorable, relevant color names.

CSSslidy: an auto-generated #RWD image slider. 3.8K 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 the words are transformed into small-caps with CSS. Returning to the scenario used in the earlier drop-cap example, the CSS would be:

p:first-of-type:first-line { font-variant: small-caps; }

Not every typeface has a true small-caps variant; in that case, the browser will fake the equivalent. Other typefaces 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 paragraph's first line is 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>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:first-of-type 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.