[tech post] CSS and Drop Caps

Jan 24, 2016

The first of many tech blog posts. This one by Coko CSS guru Julien Taquet. As well as doing all the CSS work on the Coko site Julien also does CSS book design for BookSprints.net


Once upon a time, there was a letter at the start of the first paragraph of a text. It was bigger than the other letters, and, sometimes, it had different colors from the black of the text. It could even hide some symbol or some illustrations and was a way to introduce the reader to the text that followed. At that time, books were hidden in the darkest rooms of religious places or castles, and the only light available to help readers when the sun was down was a candle and its dancing flame.

Imagine the moving shadows around a letter which would have been drawn by hand and painted with that shiny red, and you can feel the reality of the story.

Dropcap are not always latin, Page from a Hebrew Bible, Shelfmark: MS. Kennicott 3, more informations about this book here Dropcaps are not always latin – see the page from a Hebrew Bible on the right, Shelfmark: MS. Kennicott 3, more information about this book here

For centuries, dropcaps have been a focus of what are today known as book designers. There were two main uses of that initial capital:

  • the decorative one, which would add meanings by mixing letters, colors and illustrations;
  • the brain-friendly one, which would help readers to break the text in different parts and remember where they stopped their reading thanks to the illustrations.

Until the XXth Century, book designers used the dropcap as an ornament, and, with the evolution of the printing process, and to reduce cost, they came to only use a bigger letter with no specific color, as a declaration of the first paragraph of a new chapter or section.

Around the 1910s, Adolf Loos made a big move against ornamentation when the Ornament und Verbrechen was published, (in German or in English) followed by Jan Tshichold and Max Bill, both book designers of the first half of the XXth Century. Eventually, both of them fought each other about modernism in book design (you can read more about their battles here or the French translation published by B42.)  Following that period, dropcaps were less and less used.

A return to dropcaps came with the revival of the manual printing press with its own special typeset that came all around the world in the past decade. It was called vintage type or vintage letters, with, as a major activist in that game, Jessica Hische and her Daily Dropcap project


An open source solution.

There’s quite a few ways to make a dropcap with different js libraries all around the web. Today we’ll use the simplest one, which works quite well, made available by the Adobe team (Apache License).


The pros
  • Dropcaps are well formatted: the baseline is respected;
  • The initial is scaled using math to have the right height;
  • The library weight is only 3.3kb;
  • It’s inDesign user-friendly;
  • In case of a missing font, we’re still aligned to the baseline.
The cons
  • The use of the css :first is quite impossible, we have to use a js work-around to achieve the same result.
  • It’s inDesign user-friendly.


How does it work?

As always, we add the link to the library in the header (we’re adding jquery too).

<script src="js/dropcap.min.js" charset="utf-8"></script>
the body

Let’s make a paragraph to have the first letter as a dropcap. We use the span class dropcap that we’re going to use to tell to the script which letter we need to turn to a dropcap. In the following, it’s the first one.

<p><span class="dropcap">L</span>orem ipsum dolor sit amet, consectetur adipisicing elit. Voluptates repellendus officia perferendis, illum tenetur aut</p>

Then, we add the script, just before the end of the body to be sure that the whole content is loaded before the script does its job.

    var dropcaps = document.querySelectorAll(".dropcap");
    window.Dropcap.layout(dropcaps, 3, 2);

The first line of the script is vanilla javascript that will select all class=“dropcap” of the HTML, by adding those html elements to the dropcaps variable. The second line will execute the layout function of the dropcap script, with three options :

  • the elements the script will affect,
  • the size of the drop cap;
  • the line of text the drop cap will be based on.

In our example,

dropcap.layout(dropcaps, 3, 2)

we will affect all the elements of the dropcap variable, using a size of 3 lines, and starting the drop cap on the third line of the paragraph.

Here is the result when we change the css to have serif for the drop cap, while using the new Work Sans font for the body.


More about drop cap

And now, a few links to explore the world of the drop cap.

The free font used in the drop cap example opening this post is Dutch Initials by Paul Lloyd.