initial-letter is a CSS property that selects the first letter of the element where it is applied and specifies the number of lines the letter occupies.
You may have seen something like this on news sites, where the first letter of a leading paragraph is larger than the rest of the content.
The trick with styling the first letter of content used to take a little hack where you wrap the letter in a <span> and apply a class to style it:
/* Style that first letter! */
.first-letter {
font-size: 35px;
line-height: 70px;
}<p><span class="first-letter">O</span>nce upon a time in a faraway land...</p>That works, but it’s more HTML markup than we want and breaks up our content. Plus, it’s pain to have to apply that class manually any time you want to use it.
That where initial-letter comes in:
/* Style that first letter! */
.subhead {
initial-letter: 2;
}<p class="subhead">Once upon a time in a faraway land...<p>Did you see that? The initial-letter property automatically calculates both the font size and the number of lines needed to create our stylized drop cap! Want it to take up exactly 2, 3, 4 or more lines? Tell the property and it will do the heavy lifting.
Changing the property to occupy 1, 2 and 4 lines
initial-letter: normal | [<number> <integer>];initial-letter accepts the following values:
normal: Does not apply a scaling effect on the first letter. This can be useful for resetting the value where one might be inherited from the cascade.<number>: How many lines the letter should occupy where negative values are not allowed.<integer>: How many lines the letter should sink where negative values are not allowed. This is handy should you need to position the letter lower to accommodate tricky spacing issues but, if not specified, it takes the value of <number>
Drop Cap, Raised Cap and Block Cap using Initial Letter
Drop Caps are probably the most familiar use case:
Raised Caps are another example:
Block Caps harken back to old fairy tales:
This is a nice writeup and would have been a very useful function. Sdaly, we’re 2 years on and there is still practically no browser support.