![[ZOIS]](/pics/little.zois.gif){kind=small}
Home Page *
Contact ZOIS *
Technical Notes
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).
Introduction
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-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-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: 1; /* 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.
This Drop Capitals mechanism works, although the first-letter pseudo 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].
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.
References
References found in this section, and in particular the HTML links were correct at time of writing (2009-11-29):
$Date: 2010/01/01 08:43:53 $