I’m pretty sure drop cap requires no introduction when it is commonly used in print material such as magazines & books, sometimes on the web as well. Creating drop caps is relatively simple, we style them in the early days using the <span> tag, then came the css selector where you can easily target the first letter of the paragraph using the :first-letter pseudo-element. Yes, creating drop caps is simple but to do it correctly is a different story.

To properly use drop cap, it must be on the same baseline as the last line of text it spans and on the same cap height as the first line of text. To achieve that in with css is actually harder than we imagine due to the fact that almost every rendering engine treats the drop caps a little differently.

Drop Cap

To give you an idea of what I mean below are the drop caps, rendered with padding, margin and line-height set at 0 on different browsers.

Safari 4

Firefox 3.5

Opera 10.10

As you can imagine styling them to render almost perfectly if not perfect across all browsers is a very challenging task. I find that it can only be done with a mixture of margin & line-height. Though to find the perfect mix requires heaps of trial & error which quite frankly is a little annoying.

I’m sure some of you may have more insight into this problem and I’d be very interested in seeing any evidence or suggestions you have on this problem.