Wrap a span
element 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>
Set the contents inside the span
to be hidden:
p.initcap { display: none; }
Then set an image to be used as the initial cap in the background of the paragraph (see Figure 1-11):
p { line-height: 1em; background-image: url(initcap-o.gif); background-repeat: no-repeat; text-indent: 35px; padding-top: 45px; }
The first step of this Solution is to create an image for use as the initial cap. Once you have created the image, make a note of its width and height. In this example, the image of the letter measures 55 by 58 pixels (see Figure 1-12).
Next, hide the first letter of the HTML text by setting the
display
property to
none
. Then put the image in the background of the
paragraph, making sure that the image doesn’t repeat
by setting the value of background-repeat
to
no-repeat
:
background-image: url(initcap-o.gif); background-repeat: no-repeat;
With the measurements already known, set the width of the image as
the value for text-indent
and the height of the
image as the padding for the top of the paragraph (see Figure 1-13):
text-indent: 55px; padding-top: 58px;
Then change the text-indent
and
padding-top
values so that the initial cap appears
to rest on the baseline, as was shown in Figure 1-11.
Note that users with images turned off aren’t able
to see the initial cap, especially since the solution
doesn’t allow for an alt
attribute for the image. If you want to use an image but still have
an alt
attribute show when a user turns off
images, use an image to replace the HTML character:
<p><img src="initcap-o.gif" alt="O" >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>
Note that while the alt
attribute is displayed in
this solution, the ability to kern the space between the initial cap
and the HTML text is lost. The HTML text begins exactly at the right
side of the image and can’t be moved closer to the
letter being displayed in the graphic itself.
Recipe 1.4 for setting a simple initial cap.
Get CSS Cookbook now with the O’Reilly learning platform.
O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.