CSS3 line height is important for drop caps

Recently I was playing around and added drop caps to the blog posts on 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)

  Loading links to posts on similar topics...

2 Responses

#1 Jonas said...

09-Mar-17 6:19 AM

Perfect solution, works on all my tested browsers and devices. Not even Stack Overflow have this anwer to a concistant dropcap in all mayor browsers and devices. (Including the Firefox sup-aligned bug on first-letter floated psuedo elements.

#2 julian m bucknall said...

09-Mar-17 9:38 AM

Jonas: Glad it helped, although as you can see, in the four years since I wrote this I've moved on from that particular theme. No more drop caps.

Cheers, Julian

Leave a response

Note: some MarkDown is allowed, but HTML is not. Expand to show what's available.

•  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...

Name (required) Mail (will not be published) (required) Website Response Submit

Preview of response