[tech post] CSS and Drop Caps
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
nce 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.
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:
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).
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>
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.
<script> var dropcaps = document.querySelectorAll(".dropcap"); window.Dropcap.layout(dropcaps, 3, 2); </script>
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.