In the times when books were written by hand, drawing the dropped capital, the first letter in a paragraph, was a very valuable skill. This first letter usually differed in size, color and was much more artistic than the rest of the text. Even now many publishing houses still use this method in certain books.
There are several ways of placing the drop cap onto an HTML page. Below are the most popular ones:
1. Creating the dropped capital using the font tag.
This is the easiest way. To place the drop cap onto a page, you'll just need to use the following code:
| <font size="200%" color="red">L</font>orem ipsum dolor sit amet, consectetaur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum Et harumd und lookum, dereud facilis est er expedit distinct. Nam liber te conscient to factor tum poen legum odioque civiuda. Et tam neque pecun modut est neque nonor et imper ned libidig met, consectetur adipiscing elit, sed ut labore et dolore magna aliquam? Bis nostrud exercitation ullam mmodo consequet. |
- size -
the parameter responsible for the font size - can be entered either in pixels or in percentage. The value of 200% is used in the given example;
- color - is the attribute thar determines the font's color. It can be set by using special terms (red, green, silver, etc.). RGB codes can be used instead of a term. For example, in the example "red" is set as color, though code "#FF0000" could be used instead.
And that's what we get as a result:
orem ipsum dolor sit amet, consectetaur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum Et harumd und lookum, dereud facilis est er expedit distinct. Nam liber te conscient to factor tum poen legum odioque civiuda. Et tam neque pecun modut est neque nonor et imper ned libidig met, consectetur adipiscing elit, sed ut labore et dolore magna aliquam? Bis nostrud exercitation ullam mmodo consequet.
The top of the dropped capital should be aligned with the upper edge of the paragraph– the fist line. The method described above doesn't give us a chance for such an alignment. However, the problem can be resolved in the following way
2. Using tables to create a dropped capital.
To place the main text and the drop cap correctly against each other, you can use a table. The table should consist of just one cell, which will contain this first artistic letter. The code will look the following way:
|
<table align="left" border="0" >
<tr> <td><font size="200%" color="#FF0000">L</font></td> </tr> </table> <p>orem ipsum dolor sit amet, consectetaur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum Et harumd und lookum, dereud facilis est er expedit distinct. Nam liber te conscient to factor tum poen legum odioque civiuda. Et tam neque pecun modut est neque nonor et imper ned libidig met, consectetur adipiscing elit, sed ut labore et dolore magna aliquam? Bis nostrud exercitation ullam mmodo consequet. </p> |
- the align attribute ensures the horizontal placement of the element; the possible settings are: left, center, justify .
In the end we get:
| L |
orem ipsum dolor sit amet, consectetaur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum Et harumd und lookum, dereud facilis est er expedit distinct. Nam liber te conscient to factor tum poen legum odioque civiuda. Et tam neque pecun modut est neque nonor et imper ned libidig met, consectetur adipiscing elit, sed ut labore et dolore magna aliquam? Bis nostrud exercitation ullam mmodo consequet.
Among the merits of this method is the ability to use browsers that do not support CSS. However, this method needs a lot of HTML code, which amplifies the size of the document.
3. Using an image.
You don't have to limit yourself by just the font settings to create a dropped capital. A ready image of the item can be used instead. This is easy to implement, but requires some creative consideration in choosing the right image beforehand.
| <p><img src="/img_articles/7932/L.gif" width="99" height="100" border="0" align="left">orem ipsum dolor sit amet, consectetaur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum Et harumd und lookum, dereud facilis est er expedit distinct. Nam liber te conscient to factor tum poen legum odioque civiuda. Et tam neque pecun modut est neque nonor et imper ned libidig met, consectetur adipiscing elit, sed ut labore et dolore magna aliquam? Bis nostrud exercitation ullam mmodo consequet. </p> |
If you use the code given above, you'll get:
orem ipsum dolor sit amet, consectetaur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum Et harumd und lookum, dereud facilis est er expedit distinct. Nam liber te conscient to factor tum poen legum odioque civiuda. Et tam neque pecun modut est neque nonor et imper ned libidig met, consectetur adipiscing elit, sed ut labore et dolore magna aliquam? Bis nostrud exercitation ullam mmodo consequet.
This technique wins in browser support, but uses up additional time for page loading because of the image.
4. Using CSS.
Once CSS appeared, the task of drop cap creation became much easier. You'll just need to create a certain style and then apply it to the element in question.
|
<style type="text/css"> span.style1 {font-family:Arial; size:200%; color:#FF0000; float:left} </style> |
- font-family evidently determines the family of fonts; this can be both a group of fonts (serif, sans-serif), or one certain font (Arial, Times New Roman, etc).
- the size attribute is responsible for the size of the font. It can be set both in pixels and percentage. This example uses 200%.
- color determining the font color. It can be entered either as a special term (red, green, silver, etc.). RGB codes can be used instead of these terms. For example, in this case the color “red” is set, though code "#FF0000" could be entered instead.
- the stylistic attribute float ensures that the text surrounds the element on every side.
After that, you should place the first letter between the tags <span> and </span> and classify it as style1.
|
<p> <span class="style1">L</span>orem ipsum dolor sit amet, consectetaur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum Et harumd und lookum, dereud facilis est er expedit distinct. Nam liber te conscient to factor tum poen legum odioque civiuda. Et tam neque pecun modut est neque nonor et imper ned libidig met, consectetur adipiscing elit, sed ut labore et dolore magna aliquam? Bis nostrud exercitation ullam mmodo consequet. </p> |
That's what you'll get:
Lorem ipsum dolor sit amet, consectetaur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum Et harumd und lookum , dereud facilis est er expedit distinct. Nam liber te conscient to factor tum poen legum odioque civiuda. Et tam neque pecun modut est neque nonor et imper ned libidig met, consectetur adipiscing elit, sed ut labore et dolore magna aliquam? Bis nostrud exercitation ullam mmodo consequet.
The given method is surely more modern that the previous one. The drop cap style is entered in only one place. However, the tag <span> will have to contain each letter you are planning to make a dropped capital.
To learn more about CSS, you may read this tutorial.
5. Using a pseudo-element :first-letter
The pseudo-element :first letter uses CSS to describe the first letter of a text element, to which it is ascribed. To do this, you'll need to place the style description between the tags <head> and </head>. After that, place the test with the drop cap into tags <p> and </p>.
| <style type='text/css'>
p:first-letter {color:red; font-size:200%; float:left} </style> |
- the stylistic attribute float ensures that the text surrounds the element on every side.
You should get this as a result:
Lorem ipsum dolor sit amet, consectetaur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum Et harumd und lookum , dereud facilis est er expedit distinct. Nam liber te conscient to factor tum poen legum odioque civiuda. Et tam neque pecun modut est neque nonor et imper ned libidig met, consectetur adipiscing elit, sed ut labore et dolore magna aliquam? Bis nostrud exercitation ullam mmodo consequet.
The method is very simple, but at the moment the pseudo-element :first-letter lacks the support of some browsers. Namely, Internet Explorer supports the pseudo element starting from version 5.5 and Netscape navigator – from 6.0.
There are many various method, so you have all the freedom of choosing the best suited for you.
