EPUB SCHOOL #1 : Lettrines / Drop Caps

Nous inaugurons avec ce billet une nouveauté du blog Walrus: l’EPUB School. Régulièrement, nous mettrons à disposition sur le blog des petits trucs de mise en page spécial EPUB: le but avoué est de faire progresser tout le monde, car tant que nous aurons des livres numériques mal mis en page, qui ne donnent pas envie… personne ne voudra vraiment lire en numérique! Une mise en  page soignée est la clef pour un confort de lecture optimal (voir ce billet du sieur Panoz), mais je n’ai pas besoin de vous faire un dessin… vous avez compris! Trêve de blabla, la première leçon du Morse est consacrée aux lettrines. Enjoy!

We would like to introduce a new subject on our blog: the EPUB School. Every now and then, we’ll place our little knowledge about digital layout at your disposal. The goal is: improve everyone skills. If ebooks are not correctly designed, no one will want to read them: basic but true. A fancy layout is the key for an optimal and comfortable reading experience. But I don’t need to insist: if you’re here, then you already know that. 😉 Weel, enough chatting. Walrus ’ first lesson is about Drop Caps. Enjoy!

1 / INTÉGRATION

Pour créer de belles lettrines (à peu près) compatibles partout de la même manière, voici comment on procède. Primo: formater son premier paragraphe de la façon suivante.

To create beautiful and (hopefully) compliant drop caps, here it is. First: format the first paragraph of your text as described. 

 <p class=“first“><span class=“premiere“>T</span>riumph without peril brings no glory…etc</p>

Nous insérons la lettrine dans un <span> de classe “premiere“ (nommez le comme vous voulez, peu importe), lui-même dans un <p> de classe “first“. Ok?

We put the drop cap in a <span> with a class “premiere“ (name it as you want, doesn’t matter), this very <span> contained in a <p> with the class “first“.

2 / CSS

Maintenant, la CSS. D’abord, les typo importées. Au début de votre CSS, avant tout le reste, déclarez les polices.

Now, CSS time. First, declare your fonts if you have some. At the beginning of your stylesheet, before everything else, implement the fonts.

@font-face {

font-family: “square“;

src: url(“../Fonts/square.TTF“);

}

 

@font-face {

font-family: “roman“;

src: url(“../Fonts/DAYROM.ttf“);

}

À répéter autant de fois qu’il y a de typos…

Repeat if necessary.

Puis les <p> standards pour définir le gabarit général du texte.

Then standard <p> to define the general text layout. 

p {

font-family: “roman“;

text-align: justify;

text-indent: 2em;

font-size: 16px;

-webkit-hyphens: none;

line-height: 23px;

}

 

Enfin, le premier <p> de chaque chapitre auquel nous avons donné la classe “first“.

Then, the first <p> in every chapter (we gave him the class: “first“).

 

p.first {

font-family: “roman“;

text-align: justify;

text-indent: 0em;

font-size: 16px;

-webkit-hyphens: none;

line-height: 23px;

}

 

La seule différence entre les deux:  <p class=“first“> n’a pas d’indentation. Sinon, votre première ligne serait décalée vers la droite. C’est donc relativement important.

<p class= »first » has no indentation. If you do not so, your first line would be misaligned. So it’s quite important.

Ensuite, le gros du boulot: la lettrine, contenue dans un <span> de classe “premiere“.

Then, big deal: the drop cap, inside a <span> with a class “premiere“. 

 

span.premiere {

background-color: black;

float:left;

height: 130px;

font-family: “square“;

font-size: 130px;

text-indent:0px;

line-height: 130px;

color: #8B0000;

margin-right: 10px;

}

 

Maintenant, détaillons chaque ligne.

Let’s review that in details.

 

background-color: black; ————> Absolument inutile, vous pouvez le retirer… à la fin. Car durant votre phase d’intégration, il sera utile de voir la « taille » du contenant de votre lettrine / Absolutely useless, you can put that off… at the end. In integration phase, this background-color will be helpfull to visualize the size of your <span>.

float:left; —————-> Sans cette propriété, la lettrine se retrouverait hors du flot du premier paragraphe. Vous pouvez tester. Cette instruction permet de faire flotter la lettrine à gauche, et que le reste du premier paragraphe s’enroule autour / Without this property, your dropped initial would be put off the rest of the paragraph, so it’s quite important. This line allows the drop cap to float on left, so that the rest of the text wraps around it. 

height: 130px; —————-> À vous de régler cette variable en fonction de la taille de votre lettrine, définie plus bas. En définissant la taille de votre contenant <span>, vous allez pouvoir influer sur les bords de la lettrine, notamment en dessous / you can define the size of the <span> containing your drop cap, considering the very size you’ll give to your letter. By defining the size of the <span>, you’ll be able to play with the borders, especially the bottom border.

font-family: “square“; ————> La typo choisie pour votre lettrine, voir le @font-face plus haut. Choisissez si possible une typo lisible, c’est mieux. En fonction des typo, les marges peuvent sembler différentes, attention / the font you have chosen for your drop cap: try to choose something readable, of course. Depending on fonts, margin will seem different, be careful. 

font-size: 130px; ————-> La taille de votre lettrine: le hasard fait que mes trois valeurs de CSS sont identiques, mais vous pouvez varier les tailles et les plaisirs, bien sûr / the size of your drop cap. In my example, my 3 variables have the same size: it’s a coincidence, you can play with all that.

text-indent:0px; —————> Pour ne pas vous retrouver avec des problèmes de décalage (en fonction des lecteurs) / in order to avoid misaligned text… useful on some readers.

line-height: 130px; —————> En jouant sur le line-height, vous allez déplacer votre lettrine vers le haut ou vers le bas dans votre <span>. Utile pour déterminer où elle doit se situe par rapport au reste du paragraphe / playing will line-height allows you to move up or down the drop cap inside the span. As you increase line-height, the letter goes down. 

color: #8B0000; ——————-> no comment / pas de commentaire

margin-right: 10px; ——————> Pour ne pas que votre texte ne se retrouve collé à la lettrine / so that your text does not seem glued to your paragraph. 

Et voilà!

Et voilà!

Si l’on veut encore un peu s’amuser, on peut utiliser la propriété CSS first-line (qui ne fonctionne dans presque aucun navigateur, malheureusement… mais iBooks et Readium l’acceptent bien). Cela permet d’attribuer un layout différent à la première ligne de votre paragraphe.

If you want to go a little further, you can use the CSS property first-line. It’s a shame it won’t work on a lot of devices, but iBooks, Readium and a few other understand it well. Using this property, you can give a different layout to your first line.

p.first:first-line {

color: #8B0000;

font-size: 1.3em;

font-variant: small-caps;

}

La propriété font-variant: small-caps;  permet de faire monter en petites capitales les mots de la première ligne. Assez joli quand ça fonctionne.

CSS property “font-variant: small-caps;“ turns words of the first-line into small capitals.

Faites de beaux livres! Make great books! 

Commentaires

comments

9 commentaires

  1. Romain Deltour sur 9 mai 2012 à 14 h 26 min

    Why use a dedicated paragraph for the first letter ? It should work equally well with a span, as explained there

  2. Franck Payen sur 9 mai 2012 à 16 h 12 min

    Chouette article, mais la lecture Fr/En n’est pas des plus pratique et ça fait une tartine d’un coup, en fait…

    • Walrus Ebooks sur 9 mai 2012 à 17 h 24 min

      Certes. Mais quand je fais en anglais, on me reproche qu’il n’y a pas de français, et si je ne fais qu’en français, etc etc etc… Quant à tenir deux blogs différents ou à enclencher des fonctionnalités de split bilingue, holala… c’est pas pour moi. 😀

  3. Finneas sur 10 mai 2012 à 9 h 05 min

    Merci ! Moi j’aime bien les tartines qui donnent envie de faire de belles choses et en même temps de pratiquer my english reading !

  4. Catherine Vaillant sur 10 mai 2012 à 10 h 09 min

    Very good idea, très bonne idée. Thank you, merci ! 

  5. eBook Design : Zonzon Pépette | | sur 27 juillet 2012 à 8 h 09 min

    […] et de caler la première ligne du premier paragraphe en petites capitales (comme l’explique ici Walrus) : cela crée une continuité entre la lettrine et la suite du texte. Le choix de la […]

  6. Zonzon Pépette #2 « La Dame au Chapal sur 27 juillet 2012 à 9 h 51 min

    […] et de caler la première ligne du premier paragraphe en petites capitales (comme l’explique ici Walrus) : cela crée une continuité entre la lettrine et la suite du texte. Le choix de la […]

  7. Julien Boyer sur 28 novembre 2013 à 11 h 02 min

    Chapeau bas ! / Low hat !

Laissez un commentaire