Create a drop cap on text

A drop cap is the first letter of a paragraph in a text. Larger and put in the spotlight, it will generally be three heights of line.

In CSS, we will isolate the first letter of a paragraph without a <span> tag and we will assign it a specific size and place so that the rest of the text will be around it.(View result here)

Note: This technique is a trick to go around certain browsers weaknesses> There is a CSS pseudo-class :first-letter that would work beautifully for this, but Internet explorer (previous to 5.5) doesn't support this standard property

Is is possible to create all sorts of drop cap, simple text, page-set texts with background color and entourage, even an image for each letter. Anything is possible with CSS, you only need to place your drop cap with the "float: left;" attribute which will stick our span to the left of the container, leaving the rest of the text to go around it.

Here is the CSs part (Note: /* These texts are explanation commentaries and can be removed*/): 

<style type="text/css">
<!--

.container { /* definition of a global container*/
width: 400px;
}

.headline {
float: left; /* positionning of the drop cap line within the container*/
font-size: 3em; /* three line height for the drop cap */
font-weight: bold;
font-family: Georgia, Times New Roman, Times, serif;
color: #990000;
border: 1px solid #990000; /* definition of a border around the drop cap */
background-color: #FFFFCC; 
margin: 1px;
padding: 1px;
line-height: 1em;
}

-->
</style>

To finish, our html code will identify the drop cap with a <span> tag:

<body>
<div class="container">
<p><span class="headline">T</span>
ext with drop cap text with drop cap text with drop cap text with drop cap text with drop cap text with drop cap text with drop cap 
 text with drop cap text with drop cap text with drop cap text with drop cap text with drop cap text with drop cap 
 text with drop cap text with drop cap text with drop cap text with drop cap text with drop cap text with drop cap</p>
</div>
</body>
Print article

Raphaël GOETTER
www.alsacreations.com