for practical use of CSS
copyright © CSSPG, lud September 06 1999
for practical use of CSS
Drop Caps With the inclusion of the pseudo-element, first-letter in CSS1, the W3C held out the tantalizing promise for potential use of the typographic convention often called "drop cap". UAs did not rush to implement this pseudo-element, however:
P:first-letter { font-size: 200%; font-style: italic;
font-weight: bold; float: left }
and, in the HTML file:
<P>This is an example of a drop cap.</P>
Since the psuedo-element first-letter is not well supported, the regulars at ciwas have collaborated to find a cross browser, cross platform CSS declaration to simulate the first-letter style.
With the introduction of Opera 3.5+, the collaborative effort is no longer cross-browser, as an e-mail correspondent points out:
http://css.nu/examples/dropcap.html and the subsequent examples are *NOT* cross-browser compatible and would appear to *VERY* much in error. You actually set the width and height of the float to five pixels! Every compliant browser is going to place the non-dropped text immediately beside that float. The result: the x-large "dropped" letter is far wider/taller than five pixels and floats over the other text, obscuring it. It's a very poor solution to a problem that is strictly a visual style element, contributing nothing to actual content. Far better that people be told to not use drop caps at all, or to use them according to CSS spec, than be told to use a poorly implemented hack that breaks those browsers that *are* compliant.
The mid-1997 effort has been replaced by the early-1999 effort, and is currently undergoing re-testing.
.dropcap{
float: left; width: 1em;
background: #ccc; color: #cc3333;
font: bold x-large Times,"Times New Roman", serif;
}
Additional examples are available.
CSS Pointers Navigation
Main Site Navigation
