CSS Initial Letter
The initial-letter property specifies the size of the initial letter of a block of text (a drop cap) and the number of lines it should sink into the text.
1. The Concept
Traditionally, creating drop caps on the web involved using float, font-size, and line-height hacks, which were fragile and difficult to align perfectly. initial-letter solves this by handling the alignment and sizing automatically.
2. Syntax
initial-letter: <size> [ <sink> ];<size>: The height of the letter, expressed in the number of lines it should occupy.<sink>: (Optional) The number of lines the letter should sink into the text. If omitted, it defaults to the size value.
3. Basic Usage
To create a standard drop cap that is 3 lines tall:
p::first-letter {
initial-letter: 3;
/* Optional styling */
font-weight: bold;
margin-right: 0.5em;
color: darkred;
}4. Advanced Usage (Size vs Sink)
You can make the letter taller than the space it occupies (a "raised cap") or shorter.
/* 3 lines tall, but only sinks 2 lines deep */
p::first-letter {
initial-letter: 3 2;
}5. Browser Support
Support for initial-letter is growing but still requires prefixes in some browsers.
- Chrome/Edge: Supported (v110+).
- Safari: Supported as
-webkit-initial-letter. - Firefox: Not supported yet (as of late 2023).
programming/css/css programming/css/pseudo-classes-and-pseudo-elements programming/css/typography