CSS Cookbook

1.5. Setting a Larger, Centered Initial Cap

Problem

You want to place a large initial cap in the center of a paragraph.

Solution

Wrap a span element with a class attribute around the first letter of the first sentence of the first paragraph:

<p><span class="initcap">O</span>nline, activity of exchanging ideas is sped 
up. The distribution of messages from the selling of propaganda 
to the giving away of disinformation takes place at a blindingly 
fast pace thanks to the state of technology...</p>

In conjunction with styling the initial letter through the span tag with a class selector, create the decoration that sets the text indent for the paragraph (see Figure 1-8):

p {
 text-indent: 37%;
 line-height: 1em;
}
p .initcap {
 font-size: 6em;
 line-height: 0.6em;
 font-weight: bold;
}

Figure 1-8. A larger, centered initial cap

Discussion

This Solution works due to the interaction of three CSS properties. The first is the text-indent property, which moves the first line toward the middle of the paragraph. The value is set to 37%, which is a little bit more than one-third the distance from the left side of the paragraph, as shown in Figure 1-9, but not enough to “center” the initial cap.

Figure 1-9. The indented text

The next property that helps is the font-size property. Setting the size to 6em makes ...