Blog
Wax Show ‘n’ Tell
Hindawi Limited & Coko Announce Partnership
Coko & eLife partner on first PubSweet fueled journals submission & peer-review platform
Seeding a New Ecosystem: open infrastructure
Take Editoria for a spin
Making decisions in a small team and keeping it fun
A look at the future of journals with xpub
Editoria 1.1: Meet the Automagic Book Builder
A sneak peak at what’s next for PubSweet
Travel the long and winding road to PubSweet
Ink 1.0 is here!
Baby steps to user-centric open source development
Why we’re all in open source now
Getting Started with Coko
Editoria 1.0 preview
Preprints won’t just publish themselves: Why we need centralized services for preprints
INK – the file conversion engine
How we’re building the ‘mountain chalet’ of complex conversions
Sowing the seeds for change in scholarly publishing
Open Source Alliance for Open Science
Editoria Newsletter Out Now!
INK client upgrade
All About INK (explained with cake)
Track Changes (Request for Comments)
Book on Open Source Product Development Method Released!
Italics, Buenos Aires and Coko?
Editoria Update
Where we are with File Conversion
A Typescript for the Web
Coko Celebrates Year One
Editoria – Scholarly Monograph Platform
Adam Hyde’s Blog
Introducing Christos
Introducing Yannis
New PubSweet release
Attribution in Open Source Projects
Open Source for Open Access
Reimagining Preprints: a new generation of early sharing
Introducing Stencila and Nokome Bentley
Reimagining Publishing
Introducing Charlie
PubSweet 1.0 “Science Blogger” alpha 2
PubSweet 1.0 “Science Blogger” alpha, INK 1.0 alpha RELEASES!!!
Collaborative Product Development
Publishing for reproducibility: collaborative input and networked output
Substance Consortium
UCP & CDL Announcement
Release 0.2.0 is here!
CKF receives funding from the Gordon and Betty Moore Foundation to transform research communication
Technology Slows Down Science
[tech post] CSS and Drop Caps
Vote for the pubsweet logo!
Introducing Substance
Digging Collaboration and Cooperation: Code for a New Era
Coko 2015
PubSweet 0.1 Release
Coko Resources
Making science writing smarter
What I Have Learned About Building Community
Introducing the Tech Team
Knowledge and Communication
PKP and CKF Strategic Alliance
CKF Launches
January 24, 2016

[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


dropcapnce 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.

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

    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.

    example.png

    More about drop cap

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

  • Laura Franz wrote a excellent article on history of drop cap and best practice online, in Smashing Magazine.
  • Briar Press has a huge library of dropcaps. Beware, not all of those are free to use.
  • The book historian Flickr account shows a lot of nice dropcaps in history
  • Using a font as dropcap ? You can play with those. Be warned that all fonts need to be tested to see if they react well with the dropcap.js
  • The free font used in the drop cap example opening this post is Dutch Initials by Paul Lloyd.