A drop cap is a large letter at the beginning of a page of text. It's purpose is decorative. The drop cap may take the space of up to five lines of text as the image below shows.
The drop cap owes its origin to medieval manuscripts where the first letter of a chapter was larger than the rest of the text and was usually sumptuously decorated.
A style that is occasionally used alongside drop caps is to have the first line of text in a different format to the rest of the text. This could mean being in capitals, bold font, different colours or any combination of those. In Fig 1, only the first word is in capitals.
Fig 1: the first page from one ofthe epistles of St. Paul
Above we have an image of a page from a medieval manuscript which contains the beginning of one of the Epistles of St. Paul.
The decorated drop cap is the letter P. It is the first letter of the word PRIMUM, which means 'first'.
Even when Gutenberg developed printing the concept of the drop caps continued and is still in current use. Even Google fonts has examples of drop caps, as shown in Fig 2 below
Fig 2: a Google sample of a drop cap
Overuse of drop caps is not recommended and they may have accessilility issues for some people with cognitive impairments.
Learning Outcomes
On completion of this page you will know how to add drop caps to a piece of text and also format automatically the the first line differently from the rest of the text.
Flex Example
The HTML code below shows two poems that we wish to style to include both drop caps and give different styling to the rest of the text.
Listing 1
<!DOCTYPE html><html lang="en"> <head> <link href="Poems2.css" rel="stylesheet" type="text/css"> <title>Poetry</title> <meta charset="utf-8"> </head> <body> <header> <h1>Poems and Play Extracts</h1> </header> <main> <h2>Skakespeare</h2> <article> <section > <p>Shall I compare thee to a summer’s day?<br> Thou art more lovely and more temperate.<br> Rough winds do shake the darling buds of May,<br> And summer’s lease hath all too short a date.<br> Sometime too hot the eye of heaven shines,<br> And often is his gold complexion dimmed;<br> And every fair from fair sometime declines,<br> By chance, or nature’s changing course, untrimmed;<br> But thy eternal summer shall not fade,<br> Nor lose possession of that fair thou ow’st,<br> Nor shall death brag thou wand'rest in his shade,<br> When in eternal lines to Time thou grow'st.<br> So long as men can breathe, or eyes can see,<br> So long lives this, and this gives life to thee.</p> </section> <section> <p>I know a bank where the wild thyme blows,<br> Where oxlips and the nodding violet grows,<br> Quite over-canopied with luscious woodbine,<br> With sweet musk-roses and with eglantine:<br> There sleeps Titania sometime of the night, <br> Lulled in these flowers with dances and delight.</p> </section> </article> </main> <footer></footer> </body></html>
Above we see the two pieces of text we have to style. Notice that the second piece is not actually a poem but six lines from the play 'A Midsummer Night's Dream'.
There is a fair amount of styling the the CSS code above, but you should be familiar with most of it. The only new styling is from line 49 to 57.
The text here is constructed as a single article with two section elements within it. Each section element contains only one paragraph element.
At line 49 the structural hierarchy points to the first letter within the paragraph.
At line 50 it gives a display of float with a value of left to the first letter of paragraph. This is to ensure that the rest of the lines will wrap themsevles around this letter instead of moving to the line below it.
Lines 51 and 52 increases both the font-size and the line-height of the first letter in order to give it both size and space.
At line 54 the structural hierarchy is transversed again to target the first line of the paragraph. In this case it simply changes the text colour to dark red and the font size to 1.2rem, thus making the first line stand out from the rest of the text that follows it.
Fig 1: Two poems by Shakespeare
Above we see the result of our styling. Notice that even though we did not specify the colour of the drop cap in lines 49 - 52, it has still taken on the colour of the first line.
