First Letter

This article was taken from the X8 blog

Drop caps on the printed page can look great in books and the CSS pseudo element ::first-letter looks like the same effects could be applied to HTML pages. Sadly it’s pretty limited and there’s much you cannot do.

The problem is it only takes certain CSS properties AND it can only be applied to block level elements.

The second of these, block level elements only, means you cannot use it to target say the first letter of a bold or italic piece of text using <strong>, <em>, <b> or <i> for instance. If you made these display: block you’d probably massively alter your layout.

No matter the most common usage is is probably the first letter of the first paragraph of a particular section. In such case to target it you would use:

section p:first-of-type::first-letter {
    color: red;
}

This is fine but the problem comes when you enlarge it. Making it bigger will also increase it’s line height and because line-height applies to the whole line the the first line will have an ugly disproportionate gap.

Fortunately ::first-letter will take the line-height property so setting that to 1 should fix the problem (depending on how big you set your lettter).

section p:first-of-type::first-letter {
    font-size: 2.5em;
    line-height: 1;
}

But one of the nice ways books often style the first letter is to have it’s top aligned with the top of the first line.

But first let’s take a look at the properties available to us…

• font properties
• color properties
• background properties
• margin properties
• padding properties
• border properties
• text-decoration
• vertical-align (only if float is ’none')
• text-transform
• line-height
• float
• clear

Using float means we cannot use vertical-align but we can still use margin-top to push the first letter down to exactly where we want it to be.

main p:first-of-type::first-letter {
    color: crimson; 
    font-size: 7em; 
    line-height:1; 
    margin-top: .5rem; 
    margin-left: -18px; 
    font-family: georgia; 
    float: left;
}

initial-letter

A new property is in development, currently¹ only available in Safari. The initial-letter property is applied to an element to style it’s first letter similar to ::first-letter. Unlike ::first-letter not a pseudo-element. You simply apply it your element.

p {
    initial-letter: 2.0;
}

In the above example the letter is set to occupy the height of 2 lines. Adding a second number sets how far down the letter should sink.

p:first-child {
    initial-letter: 2.5 2;
}

Hopefully this will be a simpler solution to the current ::first-letter property when it becomes available.