Nothing is for sale here. Freewill tips keep the site running. Want to help? → Tip via Paypal
DropCaps
Drop Caps, short for DROPped in CAPital letterS, is a way to add a little visual impact to the beginning of a paragraph or article.
There are two ways to add a drop cap. The first is demonstrated at the beginning of this tutorial. All I did was to simply code a larger font size and different font family for the first letter of the sentence. Here’s the code I used:
<span style="font-family: 'Berkshire Swash', cursive;
font-size: 40px;
font-weight: bold;
margin-left: 0px;">D</span>rop Caps, short for...
NOTE | I also linked to the "Bershire Swash" font on Google Fonts so I could use a font available to most users. For those that can't display it, the back up is a "cursive" style font on their own computer. |
The other way to use a drop cap is to use an image for the capital letter. This can be much nicer as you can use any font you want, rather than hoping the user has the fonts you name installed or hunting one down on Google Fonts, which can be a tedious and time-consuming process to find the right one.
ere’s an example of using an image for a drop cap. As you can see, you can get a little fancier using an image than you can plain text because the image doesn’t rely on the user having the font installed that you want to use.
It isn’t quite as simple as just dropping an image into the code though. You have to adjust the vertical-align property to have the text line up with the image at the height you want. In the example I showed, I aligned the text to the text-bottom. Here’s how I did that:
<img src="images/H.jpg"
width="52"
height="42"
style="vertical-align: text-bottom;"
alt="H">
The style code in line four is the part that sets the vertical alignment. The vertical alignment is relative to the text in the same line. Here are the possible values of the vertical-align property:
baseline | bottom | middle | sub | super | text-bottom | text-top | top
Here’s what each of those values mean:
| Value | Description |
|---|---|
| baseline | Aligns the element (the image in my example) with the bottom of the lowercase letters in the same line of text. |
| bottom | Aligns the bottom of the element with the bottom of the surrounding text or other content, whichever is lowest. |
| middle | Aligns the middle of the element with the middle of the line of text. |
| sub | Subscripts the element; in this case the image is lowered, not the text. |
| super | Superscripts the element; in this case the image is raised, not the text. |
| text-bottom | Similar to the bottom value, only this aligns the element to bottom of the text. Other content is ignored for alignment purposes. |
| text-top | Aligns the element to the top of the text. Other elements are ignored. |
| top | Aligns the top of the element with the top of the text or other content, whichever is tallest. |
Just remember, if you use drop caps, do so with restraint. Using too many tends to look overdone. One at the start of an article, or at the start of a major topic change, for example, is probably sufficient in most cases.
