Day 2: Drop a cap?

Published on 2023-12-02 13:25

Drop caps or initial capitals have been used in books for centuries. As printing press pressed ahead they stopped being seen as often. Web has the power to bring them back.

Since it is possible to use fonts with color in Chrome, Firefox and older versions of Safari, it is a good time to start exploring them. There's no need to wait for MDN to declare drop caps stable.

All modern browsers support a pseudo selector :first-letter which is used to target the first letter of a text block in an element, unless other content is before it. There are hiccups concerning languages where a combination of two letters is considered one letter, like Dutch ij or Czech ch, and when it comes to fonts in Safari.

To render a drop cap, first we need to pick a font. For this series of posts, I am working on my own font, as it is one of the things on my bucket list and I've been curious about it.

When we have picked a font for drop cap, we need to use it.

p:first-letter {
	font-family: cursive;
}

Here it's important to note a bug in Safari. It doesn't support for first letter user-installed fonts, only system fonts work. When I tried to use non-system font, it defaulted to a serif font.

On the left is rendering of a color font in Firefox, in the middle is Safari and on the right is Chrome.

Now that we have the font and the selector sorted, it's time to drop it a bit lower. Unfortunately for us, Firefox does not support inital-letter property at all at the moment. For now if we want to make it significant, we need to set font-size, otherwise it will be just another letter in a different font.

In Chrome the initial-letter property works as expected and in Safari we still need to use prefix -webkit, -webkit-initial-letter. The property takes as argument one of the options:

"normal" which makes it behave like normal text
number greater than zero which sets how many lines it occupies and how many lines it should sink into the text
two numbers greater than zero, first sets how many lines it occupies and the second how many lines it should sink into the text

So the final code we have should look like this:

p:first-letter {
	font-family: "CustomFont";
	initial-letter: 2; 
	/* Initial letter is size of two lines and sinks two lines as well */
}

Ideally we want to have a result similar to the picture below. On a developer's blog I believe it's worth implementing it. In production in the wild, I'd take a look at the traffic and let it guide me.