Drop Caps

While reading an article on forbes.com today, I couldn’t help myself. I had to open the Web Developer Console to inspect how they did format the drop caps, i.e. those large initial letters at the beginning of a paragraph that span multiple lines. While their solution obviously works, they achieved it by including special markup in their HTML. The @CSSence in me expected a CSS-only solution. Even more so, the Accessibility Advocate in me expects one too, because without any additional measures, placing the first letter of a word in a separate element makes screen readers burp. So I opened CodePen to create something CSS-only with good old float and ::first-letter.

However, while doing so, I dug deeper and stumbled upon CSS properties that I completely forgot about: initial-letter and initial-letter-align.

Maybe the still-not-ideal browser support is the reason I forgot about them. In short: No Firefox. If you can live with non-supporting browsers falling back to not having drop caps, you are on easy street. All you need is the initial-letter declaration, which takes (among other things) the number of lines you want the drop cap to span.

If you additionally want to add some fancy styling that requires margin or padding, a background or a border, it is better to wrap everything inside @supports, to prevent non-supporting browsers from picking up declarations they are not supposed to:

@supports (initial-letter: 3) {
	p.with-drop-cap::first-letter {
		initial-letter: 3;
		margin-inline-end: 0.25rem;
		font-weight: bold;
	}
}

I’m not seeing initial-letter on the Interop 2023 radar, so there’s likely no change in support in the short- to mid-term future.

Two for the price of one

For completeness’ sake, I’ve created a solution that pairs the old float method with its new counterpart, to make all browsers happy. Head over to CodePen to see it in action.