EPUB 3 : stylisation de l’appel de note

Le format EPUB 3 introduit un nouvel attribut permettant notamment de gérer l’affichage des appels de note. Or, cet attribut n’est pas encore, à ce jour, interprété par l’ensemble des lecteurs. Dans cet article, je propose deux manières possibles de styliser l’appel de note en exposant… et de résoudre le problème qui en découle directement : l’interlignage.

Sommaire


Recommandations du W3C

Selon les recommandations du W3C, évoquées dans un précédent post, l’appel de note doit être généré dans un EPUB en utilisant l’attribut epub:type doté de la valeur "noteref" :

<a epub:type="noteref" id="ref1" href="#note1">

Comme tel, l’appel de note sera alors « rendu » comme l’ensemble des liens HTML du document. Si l’on veut que l’appel de note soit restitué en exposant, il va donc falloir créer une règle de style à cet effet dans le fichier CSS, et cibler spécifiquement les liens (a) concernés au moyen d’un sélecteur adapté.

Dans l’ouvrage EPUB 3.0. Concevez et réalisez des eBooks enrichis, l’auteur préconise d’utiliser un sélecteur d’attribut pour cibler les appels de note et les mettre en exposant. Le principe est le suivant : on commence par déclarer un préfixe d’espace noms (en l’occurrence, le préfixe epub) en utilisant une règle-at @namespace :

@namespace epub="http://www.idpf.org/2007/ops"

Toujours selon l’auteur, on cible ensuite l’ensemble des balises <a> dont l’attribut epub:type possède la valeur noteref, et on les stylise de la manière suivante, en utilisant le sélecteur d’attribut E[attribut~="noteref"] :

CSS

@namespace epub="http://www.idpf.org/2007/ops" ;
a[epub|type~="noteref"] {
     vertical-align: super;
     line-height: normal;
     font-size: smaller;
}

Dans la mesure où l’attribut epub:type ne possède qu’une seule valeur, on peut très bien se contenter d’utiliser le sélecteur a[epub|type="noteref"] en lieu et place du sélecteur a[epub|type~="noteref"], puisqu’il permet de cibler l’ensemble des balises <a> dont l’attribut epub:type possède exactement la valeur noteref.

Sélecteur d’identifiant vs sélecteur d’attribut

Bien que valide en théorie, cette manière de styliser les appels de note ne fonctionne en pratique sur aucun des lecteurs EPUB 3 (iBooks, Readium, Azardi et ADE dans une moindre mesure). L’auteur mentionne en revanche, mais sans la développer, une solution alternative consistant à cibler les appels de note via leur identifiant (ref) plutôt que via l’attribut epub:type, et donc sans avoir à déclarer le namespace à l’intérieur de la feuille de style.

Pour mémoire, l’appel de note a été généré via la balise HTML suivante :

<a epub:type="noteref" id="ref1" href="#note1">

La solution proposée consiste ainsi à utiliser la règle CSS suivante :

a[id^="ref"] { vertical-align: super; line-height: normal; font-size: smaller; }

Or, cette solution fonctionne effectivement sur les lecteurs iBooks, Readium et Azardi (pas sur ADE), mais la mise en exposant des appels de note induit une augmentation de l’interlignage du texte.

Utilisation de la balise <sup>

Une solution plus classique consiste à encadrer l’appel de note par la balise HTML <sup> dont la propriété d’alignement vertical possède naturellement la valeur super, et la propriété font-size, une valeur inférieure au corps du texte où elle s’insère.

Toutefois, cette solution nécessite impérativement de styliser la balise <sup> si l’on veut préserver l’interlignage, notamment sur iBooks, Readium et ADE. Pour chacun de ces lecteurs, le bloc de déclarations proposé ci-dessus remplit théoriquement cette fonction. Mais si on se contente de dupliquer ce bloc et de l’assigner à la balise <sup>, on se retrouve avec un espacement disgracieux entre les lignes qui comportent un appel de note.

En fonction du rendu souhaité, on jouera sur les paramètres suivants : la taille de la police (75 %, 90 %), la hauteur de ligne, la valeur de la propriété vertical-align qui peut être aussi bien un pourcentage ou un entier, exprimé en pt ou en px (cette valeur correspond à la distance entre la ligne de base de l’élément en exposant et celle du texte), que la valeur absolue super.

Pour ma part, j’utilise généralement les déclarations suivantes :

sup {
     font-style: normal;
     font-size: 75%;
     line-height: 0.5;
     margin-left: 0.4%;
     }

Ou, si l’appel de note est entre crochets :

sup {
     font-style: normal;
     vertical-align: 10%;
     font-size: 90%;
     line-height: 1;
     margin-left: 0.4%;
     }

0 réponses

Laisser un commentaire

Participez-vous à la discussion?
N'hésitez pas à contribuer!

Laisser un commentaire

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.