CSS Drop Caps with the initial-letter Property
Drop caps without float hacks
The old way used float, a large font-size, and manual line-height and margin, and it broke across browsers. initial-letter gives you a real drop cap in one property.
.drop-cap::first-letter { float: left; font-size: 3em; line-height: 1; margin-right: 8px;}.drop-cap::first-letter { -webkit-initial-letter: 3; initial-letter: 3;}/* Standard; -webkit- prefix needed for Safari. */initial letter Browser Support
This feature is not Baseline because it does not work in some of the most widely-used browsers.
Not ready for production without a fallback.
One property
No float, no guessing font-size or line-height. You say how many lines the letter sinks and the browser does the rest.
Stable layout
Initial-letter is designed for drop caps. Wrapping and alignment stay consistent across browsers.
Optional raise
initial-letter: 3 2 means sink 3 lines and raise 2. You get control without fragile hacks.
How it works
The old way: style ::first-letter with float: left, a big font-size (e.g. 3em), line-height: 1, and margin-right to clear the text. It kind of worked but line wrapping and alignment varied by browser and font, and you had to tweak by eye.
The modern way: set initial-letter: 3 (or another number). The number is how many lines the letter sinks into. The browser sizes and positions it correctly. Use two values, e.g. 3 2, for sink and raise. Safari requires the -webkit- prefix. One property, predictable result.