While it’s long been possible to create traditional dropcaps on the web using the ::first-letter pseudo selector, the process has been difficult: not only does it require a lot of careful, precise CSS, but any changes to the surrounding text, such as altering the typeface or line-height, push the dropcap out of alignment, whereas a good dropcap should always be “top and tail” with its associated text:
This complete independence between body text and initial cap meant any changes required alterations to both elements, including within responsive design and @media queries. As a result, CSS dropcaps have tended to be individually art-directed, making them extremely expensive to create, and leaving a typographical feature that has been a standard for over 400 years relatively rare on the web… and when they were attempted, often done badly.
Along with its excellent work on CSS blend modes, shapes, regions and other modules, the Adobe web development team has proposed a new CSS property, initial-cap, that addresses just this issue. While support is paltry right now (limited to Chrome Canary), a nice little polyfill has been released that provides support for the proposal in all modern browsers, giving developers and designers an easy way to add dropcaps to their pages.
The specification works using the same ::first-letter selector, but makes the styling of dropcaps much easier. For example, to style the first letter of the very first paragraph in a page, we could add in the :first-of-type pseudo selector:
p:first-of-type::first-letter { initial-letter: 3; color: red; }…meaning “make the dropcap red, and as high as the first three lines of text in the paragraph”. Naturally, the spec covers a lot of territory, including different writing directions, dealing with descenders and short paragraphs, and much more. Right now, the major limitation is that ::first-letter (and pseudo elements in general) can’t take all the CSS properties required for a truly great dropcap. Until that is resolved, the polyfill requires that we add markup to indicate which letter we want to apply the effect to:
<p><span id="dropcap">M</span>y father’s family name being Pirrip, and my Christian name Philip, my infant tongue could make of both names nothing longer or more explicit than Pip...
Then add the polyfill to the bottom of the page and target the <span>:
<script src="dropcap.min.js"></script><script>var dropcap = document.getElementById("dropcap");window.Dropcap.layout(dropcap, 3);</script>Our CSS then changes to target this id:
#dropcap { color: red; }It’s also possible to create a “pop-cap” by specifying a second, optional, baseline value for the method:
window.Dropcap.layout(dropcap, 3, 2);This aligns the baseline of the dropcap with the second line of text, but keeps the dropcap three lines high. (By default, an undeclared baseline automatically takes the line-height value).
Making the dropcap responsive
An initial letter three lines high will likely be too large at the screen size of mobile devices, so it must be reduced at an appropriate breakpoint:
@media all and (max-width: 600px) {p:first-of-type::first-letter { initial-letter: 2; }}Making the dropcap responsive with the polyfill is slightly more complex, as it uses matchMedia to switch the size of the letter: consult the CodePen repo for more information.
Conclusion
initial-letter is a promising proposal, filling a typographical gap that has had to be addressed with complex CSS hackery. I’ll return to expand this article as the specification is ironed out and browser support increases; you may wish to follow me on Twitter to receive alerts on updates.
Explore the code for the reponsive dropcap on Codepen