Drop Capital Paragraphs in HTML

ZOIS Technical Note TN-2009-11-30.

Author and Audience

This TN describes how to do Drop Capitals in HTML using Cascading Style Sheets. The result should be observable on this paragraph. Written by Martin Sullivan[1], ZOIS Limited, Cockermouth.

Abstract

Code is presented to do Drop Capitals in HTML using a Cascading Style Sheet (CSS).

Hanging or drop Capitals are especially enlarged single characters at the start of significant bodies of text. Their proper typographic name is an 'initial'. They can be achieved in web design by using a style sheet using the first-letter pseudo-class element.

Materials and Platform

The technique is encoded in HTML and in a Cascading Style Sheet (CSS) which can either be held in-line with the HTML or in a separate file dedicated to that task.

Method

Drop Capitals are achieved on this site by using first-letter pseudo-class element of the paragraph tag, '<p>'. The initial letter is made a suitably large size (three-times bigger was found to be optimal in this case) and by using the float element and line-height element the character can be made to appear in the correct place for most browsers.

p.first:first-letter {
    line-height: 0.8;             /* req. Safari, IE8, Opera      */
    font-size: 300%;
    letter-spacing: 1px;
    padding: 2px;
    float: left
}

The line-height element is required to allow the floating element to format correctly with the rest of the line on a number of browsers, most notably Apple's Safari, otherwise the 'initial' will not be aligned to the top of the following line. Firefox ignores line-height in this situation.

The first paragraph where the 'initial' is desired is thus marked up with a class declaration.

<p class="first">Lorem ipsum dolor sit amet, consectetur adipisicing
elit, sed do eiusmod tempor incididunt ut labore et dolore magna

Other, ordinary, paragraphs are marked up with a conventional '<p>'.

The result will look like this (with your browsers interpretation of these style elements):

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

It is also possible to exploit a feature within CSS2, that of Adjacent Selectors[3. This allows changes to the styling of a <p> element to be depending upon the preceding element, notably a Header. Thus, the paragraph following a <h1> or <h2> can have an 'initial', on the grounds that they are generally used to start and head pages. The above example thus becomes:

h1 + p:first-letter, h2 + p:first-letter {
    line-height: 0.8;             /* req. Safari, IE8, Opera      */
    font-size: 300%;
    letter-spacing: 1px;
    padding: 2px;
    float: left
}

It should, perhaps, be noted that this mechanism is not used on this site where the flexibility of a specifically labelled "class" is preferred.

Discussion

This Drop Capitals mechanism works, although the first-letter pseudo-class element does not appear to have been intended to function this way. The use of line-height is absolutely critical for the correct display in a number of browsers and was the key finding after some experimentation.

There are a number of examples scattered through out the www.zois.co.uk web-site, where it is considered a matter of good style that they are used only once at the top of the page. Support amongst browsers is good, with, amongst those tested, only Internet Explorer 6 (IE6) not performing correctly (but falls back to an acceptable 'normal' paragraph). Jon Tan has more extensive typographical notes on this topic in in his blog[2].

There are other pseudo-class elements that can be applied to Paragraph stylings, besides 'first-letter'. These have not been explored in this Note and are generally not used on this site. It is possible to overdo 'style' and become obsessed with it above meaning and content. It has the unhappy effect of rendering ordinarily perfectly legible text as readable as a Ransom Note.

We would invite feedback from folks who have viewed these Drop Capitals and think that things didn't quite work. The web is constantly evolving and our testing isn't as comprehensive as we would like.

Updates

As with other Technical Notes, feedback is actively solicited. The author may be contacted via the e-mail address found on his public biography page[1]. Should something require changing or enhancing then the fact will be acknowledged with attribution in an Update section.

Notes on Adjacent Selectors: This Note was examined after radical changes were made to its styling and its subject was re-addressed. The idea of CSS2 Adjacent Selectors has been introduced to automatically get the Hanging Paragraph behaviour, although we do not use them ourselves. 2011-06-22

References

References found in this section, and in particular the HTML links were correct at time of writing (2009-11-29):

1. Martin Sullivan:: http://www.zois.co.uk/people/martin_sullivan
2. Tan J (2008) "The Paragraph in Web Typography & Design":: http://jontangerine.com/log/2008/06/the-paragraph-in-web-typography-and-design
3. Cascading Style Sheets Level 2 Revision 1, Adjacent sibling selectors:: http://www.w3.org/TR/CSS2/selector.html#adjacent-selectors

~Z~