The typographic term drop-cap, sometimes called “initial cap”, refers to the setting of the first letter in a major section of text in a much larger size than the rest of the text, and dropping the baseline of the letter far below that of the first line. Usually adjacent text flows around the letter. Sometimes the letter is set in a different typeface, and sometimes in a different color, from the text. Sometimes the letter is enhanced graphically or decorated with ornamental designs (to extremes in mediaeval “illumination”).
Can drop-caps be done in a web page? The answer is, yes, to a degree, but take care not to break readability.
|
This is an example of drop-cap. Here, the drop-cap has |
This is an example of drop-cap.
In addition to the previous example, this has
|
This is an example of drop-cap.
In addition to the previous example, this has
|
|
This is an example of drop-cap. In addition to the previous examples, it uses a sans-serif font. |
This is an example of drop-cap. In addition to the previous examples, it has colors set, and padding to allow the background color to properly surround the letter |
They are a struggle, but their beauty is that all the text is real text, that can be copied and pasted and searched.
These drop-caps look fairly good in modern browsers, and are readable in any browser. However, there are limitations, due to the limited control in CSS, the uncertainty of the font used on the user’s side, and the infuriating inconsistencies among modern browsers.
float property
The primary tool in making drop-caps is the CSS property float.
Setting the value of the first letter to float: left has the
effect of putting the letter to the left of the other text, and flowing the
other text around it. However, this will not typically have the effect of
placing the top of the drop-cap at the top of the first line, nor of placing
the baseline of the drop-cap at the baseline of any subsequent line.
typesetting
In typesetting, there are several different styles regarding the height and placement of the drop-cap. The height may be two lines, three lines, or even four lines.
- The top of the drop-cap is in line with the top of the first line, and the baseline of the drop-cap is in line with the baseline of some subsequent line.
- The top of the drop-cap is substantially above that of the first line,
and the baseline of the drop-cap is in line with the baseline of some
subsequent line.
One rarely sees a drop-cap whose baseline is not in line with that of
some line. This effect is difficult to achieve in current CSS.
There simply is no property value like
“
vertical-align: align-bottom-with-some-subsequent-line“.
first-letter selector
The spacing between the drop-cap and the adjacent text may need to be
adjusted. Here, I used letter-spacing: 0.1ex; to ensure
adquate spacing in some browsers.
font size on different systems
If a serif font (such as Times) is used, the height becomes more of an issue. If the top of the drop-cap is nearly, but not exactly, in line with the top of the rest of the line, it will look very bad. This effect is much less pronounced if the body text is a serif font, and the drop-cap is sans-serif or a handwriting font.
A simple solution is to simply not use serif fonts for drop-caps.
See the Western Civ Complete CSS Guide, and the W3 CSS2 page