demosthenes.info

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

Classic Typography Effects in CSS: Initial Caps and Drop Caps

css / typography

Estimated reading time: 3 minutes, 20 seconds

Initial capital from an illuminated manuscriptUsing a decorative initial capital letter to start a paragraph is a very old technique, pre-dating the invention of movable type. Some of the most beautiful and ornate initial capitals are associated with illuminated manuscripts, largely written by clergy between the 4th and 15th centuries CE.

Initial capitals have an important editorial role to play: they indicate to the reader that a new section of text has begun. Initial caps are typically several times larger than the base font used on the page, and are featured only once per text section: in a traditional book, once per chapter; in a website, perhaps once per page. They are commonly associated with leading, opening, or first paragraphs.

An oversized initial capital letter that shares a common baseline with the first line of text is known as a standing initial capital, standing cap, or pop cap. An initial capital letter that has several lines of text to its right is known as a dropped initial capital, or drop cap.

Simple Standing Cap

First, our code:

<h1>The First Phillipic</h1>
<p id="firstpara">Philip, after the defeat 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.

Unlike the previous example, we will use an id attribute to identify the paragraph to which we wish to apply the effect. Adding an id has the disadvantage of adding more code to our markup, which we should generally try to avoid.

The matching CSS:

p#firstpara:first-letter{ font-size: 300%; }

Note that an initial cap is typically changed in appearance in greater ways than we have done here: color, font (a sans-serif typeface is often used) and other properties are usually also altered.

Note that our CSS reference to the id value is proceeded by an octothorpe (#), just as it is when linking to an anchor. The associated element immediately before it (p) is optional, but is usually a very good idea, as it provides a clear indication as to where the CSS declaration is applied.

Simple drop cap

Turning the initial cap into a drop cap could not be simpler:

p#firstpara:first-letter{ font-size: 300%; float: left; }

Note that any element can be floated, not just images. We would typically add margin, padding and other properties to this declaration in order to improve the appearance of the drop cap. Unfortunately, the browser will not attempt to align the baseline of the drop cap to the nearest matching text line; that will be up to us.

Image-based drop cap

Daily Drop Cap by Jessica Hische (jhische.com/dailydropcap)A truly ornate standing or drop cap, like the illuminated example that led this entry, would not be text, but an image. In that case, the id and existing style would be removed, to make way for HTML code. If our image was called p.jpg, and looked something like the following:

Then our HTML code would be:

<p><img src="images/p.jpg" alt="P" style="float: left;">hilip, after the defeat 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.

Note that in this case the image physically replaces the first letter. It is also important to set the alt value correctly, so that if the drop cap image did not load for any reason the paragraph text would still read correctly, with the missing image being replaced with the value of the attribute. For this reason, we would not provide a height and width for the image: unlike normal circumstances, we do not want to preserve space for the image in the eventuality that it did not load.

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.