The big blue T character that you see to the left is a drop cap —you can use any letter, but being English I like T in the morning. The drop cap is used in typography to add design emphasis to a text article. In days of yore, monks and scribes would take things a step further and illuminate the large opening characters with some appropriately monastic decoration. As I am all out of gold leaf and feeling less than chivalrous, I have used a silhouette of my Auntie Gertrude instead (image courtesy IHeartVector). This approach wraps the large initial character inside an extra <span> with a background image, like so:
<p><span class="dropcap"><span>T</span></span>he big blue T character....</p>
The inner <span> contains the styling for the opening character in the article. The outer <span> contains the background image to decorate the character with:
Inner <span>:
span.dropcap span {
display: inline;
float: left;
margin: 0;
padding: 0.22em 0.02em 0pt 0pt;
#padding: 0.22em 0.02em 0.2em 0.00em;/* override for Microsoft Internet Explorer browsers*/
_padding: 0.22em 0.02em 0.4em 0.00em; /* override for IE browsers 6.0 and older */
font-size: 6.2em; line-height: 0.4em;
text-transform: capitalize;
color: #36c;}
Outer <span>:
span.dropcap { display:block;
float:left;
width:67px;
padding: 0px 0px 0px 10px;
height:82px;
margin-right:0px;
background-image:url("../../images/illuminate.png");
background-repeat:no-repeat;
}
The image used for the background needs to be thought about, so that it provides as much symmetry as possible with the character on top of it —and doesn't make the vicar blush.
Checked it on Firefox, IE7, and Safari.
