Drop caps, first-letter and Firefox

I have been exper­i­ment­ing with the :first-letter pseudo-element to try and write up a tutorial on using first-letter, adja­cent select­ors and @font-face to pro­duce drop caps and I have run into a prob­lem in the form of Fire­fox. Because you need to apply the prop­erty float: left to stop first-letter being an inline ele­ment and Fire­fox applies dif­fer­ent rules to floated :first-letter pseudo-element than the other browsers, mak­ing it dif­fi­cult to ver­tic­ally align a floated :first-letter pseudo-element and the the remain­ing text.

The specs for :first-letter pseudo-element state:

These are the prop­er­ties that apply to :first-letter pseudo-elements: font prop­er­ties, … ‘line-height’, … mar­gin prop­er­ties, pad­ding prop­er­ties … UAs may apply other prop­er­ties as well.

Width and height are not prop­er­ties that have to be applied to first-letter. Only the Web­Kit fam­ily (Safari, Chrome etc.) apply these prop­er­ties. The main issue is line-height which could be used to con­trol the ver­tical size of the first-letter pseudo-element, as accord­ing to the specs.

To allow UAs to render a typo­graph­ic­ally cor­rect drop cap or ini­tial cap, the UA may choose a line-height, width and height based on the shape of the letter

Inter­net Explorer, Web­kit and Opera have chosen not to apply line-height and unless one is spe­cified, a :first-letter pseudo-element will inherit line-height from the par­ent ele­ment. Fire­fox has chosen to apply a line-height to all first-letter ele­ments equal to the height of the ele­ment and you have no method of chan­ging it. This auto­mat­ic­ally aligns the top of the floated :first-letter pseudo-element in the par­ent block element.

Because the line-height is the height of the type, you get dif­fer­ent line-height for dif­fer­ent char­ac­ters eg a, t and p. Which makes it vir­tu­ally impossible to use lower case let­ters to pro­duce drop caps like effects.

So you need to reduce the line-height of first-letter to the cap height of your chosen typeface then use margin-top or padding-top to ver­tic­ally align the top of first-letter with the top of the remain­ing text. Not only is this more com­plic­ated than just chan­ging line-height, you need to do two cal­cu­la­tions instead of one. Inter­net Explorer applies mar­gin and pad­ding to floated :first-letter pseudo-elements dif­fer­ently than other browsers. By fix­ing the :first-letter pseudo-element in place after apply­ing line-height then apply­ing mar­gin and pad­ding to it, which does not effect sur­round­ing elements.

Five dif­fer­ent browsers ren­der­ing floated :first-letter pseudo-elements with slightly dif­fer­ent prop­er­ties. Chrome pro­duces the same res­ults as Safari. Note IE8b2 does strange things to back­grounds both col­our and images of the:first-letter pseudo-element.

So to get a cross browser drop cap effect using :first-letter pseudo-element that ver­tic­ally aligns, you need to apply float: left, then find the height of the typeface cap height, reduce the line-height to that, adjust margin-top so it aligns cor­rectly in Fire­fox and in Opera or a Web­Kit browser, and then using con­di­tional com­ments for an IE only stylesheet remove margin-top and change line-height to cor­rectly ver­tic­ally align the type.

It would of been a lot easier if Moz­illa Cor­por­a­tion and Microsoft read the CSS spe­cific­a­tions the same way as every­body else and applied the same rules.

This entry was posted on Monday, January 19th, 2009 at 8:57 pm and is filed under css and html . You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.