CSS3 line height is important for drop caps

Recently I was playing around and added drop caps to the blog posts on blog.boyet.com. I decided to go for a pure CSS3 version (so, you’ll have to view this site in a reasonably fresh browser to see the effect) rather than a hacky <span> version that mixes presentation “hints” in the content. (For a brief discussion on the two possible methods, see Chris Coyier’s blog post here.) I certainly didn’t want to change all my posts to include spans on the first letter of the first paragraph.

The way I implemented it was to add a class style to the surrounding div:

.initialcap > p:first-child:first-letter {
background: url("images/classy_fabric.png") repeat scroll 0 0;
color: #efefef;
font-size: 48px;
padding: 8px;
margin-right: 3px;
float: left;
}

The style makes reference to a paragraph child of the div, and uses the cd:first-child and cd:first-letter pseudo-classes. The initial letter is styled with a background image, a contrasting color, a larger size and relevant padding and margins. The whole lot is then floated left, so that the text wraps around it.

Pretty good. I viewed it in Firefox, saw it was good, and went off to do something else.

A few days later, I happened to run Chrome and immediately saw a problem, the drop cap was stretched vertically:

The same problem happened in IE10, too. What was going on? Firefox still showed the initial capital just fine.

It turned out that I’d missed off a line-height clause from my style, and this was affecting the display in Chrome and IE, but not, for some unknown reason, in Firefox. So I changed the style to this:

.initialcap > p:first-child:first-letter {
background: url("images/classy_fabric.png") repeat scroll 0 0;
color: #efefef;
font-size: 48px;
line-height: 32px; /* that is, 48px font size - padding top&bottom */
padding: 8px;
margin-right: 3px;
float: left;
}


As you can see, I added a comment for myself to explain how I’d calculated the value since it’s a little bit “magic”. If you now visit this blog in Chrome and IE (and Safari for that matter) the drop caps are displayed correctly.

The moral of this tale is: test your websites in all four major desktop browsers. You’d be wrong in believing that they all render the same way, even in this day and age.

Now playing on Pandora:
Groove Armada – Inside My Mind (Blue Skies) on Vertigo (Import)

No Responses

Feel free to add a comment...

Leave a Response

Some MarkDown is allowed, but HTML is not. (Click to learn more.)

• Emphasize with italics: surround word with underscores _emphasis_
• Emphasize strongly: surround word with double-asterisks **strong**
• Link: surround text with square brackets, url with parentheses [text](url)
• Inline code: surround text with backticks IEnumerable
• Unordered list: start each line with an asterisk, space * an item
• Ordered list: start each line with a digit, period, space 1. an item
• Insert code block: start each line with four spaces
• Insert blockquote: start each line with right-angle-bracket, space > Now is the time...

Extras

About Me

I'm Julian M Bucknall, an ex-pat Brit living in Colorado, an atheist, a microbrew enthusiast, a Volvo 1800S owner, a Pet Shop Boys fanboy, a slide rule and HP calculator collector, an amateur photographer, a Altoids muncher.

DevExpress

I'm Chief Technology Officer at Developer Express, a software company that writes some great controls and tools for .NET and Delphi. I'm responsible for the technology oversight and vision of the company.

Archives

January 2015 (3)
SMTWTFS
« Dec
123
45678910
11121314151617
18192021222324
25262728293031

Like this Archive Calendar widget? Download it here.