A little while ago this interesting Stack Overflow question caught my attention. The question is about drop caps: a typographical gimmick where the first letter of a paragraph is very big and prominent. In older texts this could be even more than “prominent”, for example this page from an old Dutch Bible:
Of course, the CSS pseudo-selector :first-letter seems perfect to achieve this effect on the web. The question on Stack Overflow used that as a starting point, and is about a particular situation where IE wouldn’t render correctly. While trying to find a solution to that particular problem I found out things were not so simple, and posted this answer. The answer basically came down to “no way to get it right in all browsers”. With rather “standard” CSS rules, various browsers gave varying results:
Not very satisfying at all! After thinking about this some more, I decided to try and at least get a “minimal” example of drop caps working in all current browsers. To keep things “minimal” my first try will:
- Not bother with padding for now (just set them all at zero);
- Not bother (yet) with browsers <IE9;
- Stick to the basic 26 characters from the latin alphabet;
- Stick with uppercase versions of those characters.
It took some time, but I did come up with decent results. You can show the example html file on my blog, or view it as a jsfiddle. The example contains a reset style and some coloring so you can see the results clearly. However, the nitty gritty is in this bit of CSS:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
p { line-height: 1.2em; } p.big-first-letter:first-letter, /* Main Experiment with pseudo-selector */ span.big-first-letter /* Experiment benchmark using spans */ { float: left; text-transform: uppercase; line-height: 1.0em; /* Twice the line-height of a, minus a wee bit for Opera, which apparently has rounding issues. Other browsers don't care as much. */ font-size: 2.399999em; } |
This actually gives acceptable and mostly consistent results. Here’s a screenshot of how this renders in up to date versions of my browsers (all on Windows 7):
Great! However, one browser is still not playing nice. No, not everyone’s “favorite” browser IE is acting weird, but Firefox is! Have a closer look at the left (:first-letter) rendering in Firefox: the height of the drop cap isn’t what we want it to be. However, some searching on Google leads to a related Stack Overflow question as well as this question, ultimately leading me to a bug from 2007 in Firefox. Guess it can’t be done easily then.
End of the road? Perhaps. But perhaps also a great opportunity to try and create a jQuery plugin that creates drop caps…
One thought to “CSS first-letter drop caps”
Comments are closed.