Quelques sélecteurs CSS utiles dans un EPUB

Beaucoup de sélecteurs CSS utilisés en développement web ne sont d’aucune utilité pour la création d’un ebook. Pour autant, certains permettent de faire l’économie de nombreuses lignes de code. Cet article est le premier d’une série de plusieurs posts consacrés à l’usage des sélecteurs en création d’EPUB.

Sommaire


Définition des sélecteurs d’attribut

Nous avons vu précédemment ce qu’était un sélecteur CSS et à quoi il servait : cibler un élément ou un groupe d’éléments auxquels une règle de style va s’appliquer. Pour ce faire, le langage CSS utilise une palette de sélecteurs (appelés également « motifs ») qu’il est possible de combiner via une syntaxe particulière (espace, virgules, crochets, signes +, >…) pour déterminer l’élément sur lequel va porter la règle de style.

Le but de ces articles n’est ni de reformuler ce qui a déjà été écrit sur le sujet (voir sur ce point la rubrique « Pour en savoir plus ») ni de prescrire une méthode, mais de donner des exemples précis d’utilisation possible des sélecteurs CSS pour la problématique particulière de l’EPUB. À chacun d’élaborer ensuite sa propre stratégie pour écrire un code adapté au contexte de la publication. Le premier article de cette série sera consacré aux sélecteurs d’attribut.

Un attribut HTML est un paramètre, utilisé à l’intérieur d’une balise, permettant de modifier le comportement d’un élément en fournissant une instruction particulière sur la manière dont cette balise doit être interprétée. Il se présente sous la forme suivante : <nom_de_l’élément attribut="valeur">.
Exemple : l’attribut "title", associé à la balise <abbr (abbréviation), permet de déclencher une infobulle au passage de la souris, où sera développé l’acronyme : <abbr href="www.W3C.org" title="World Wide Web Consortium">.

Les sélecteurs d’attribut permettent de cibler une catégorie d’éléments en fonction de la valeur de leur attribut. Le recours à ces sélecteurs permet ainsi de limiter le nombre de classes utilisées dans une publication, et donc de réduire la taille du fichier CSS. Dans la mesure où les attributs ne s’appliquent pas à l’ensemble des éléments HTML, et que l’EPUB n’utilise qu’un nombre limité d’éléments, une grande partie d’entre eux ne sera d’aucune utilité pour nous.

D’autres au contraire ont un intérêt particulier dans le cas de la création d’un EPUB, notamment dans le cas d’une publication EPUB 3 (fixed layout par exemple). C’est le cas par exemple de l’attribut HTML 5 "epub:type", qui confère une qualification sémantique supplémentaire aux éléments auxquels il se rapporte, et dont la liste des valeurs sont rappelées dans « L’attribut epub:type : donner du sens à la structure ».

Syntaxe des sélecteurs d’attribut

Sélecteur : E[att]

Éléments ciblés : tout élément E portant l’attribut « att ».

Applications possibles : cibler l’ensemble des liens (attribut "href") ou des termes étrangers (attribut "lang") présents dans la publication, pour leur appliquer par exemple une couleur ou une graisse particulière.

Exemples d’application :

  • a[href] permet de cibler l’ensemble des éléments a portant l’attribut "href", comme les appels de note, les liens HTML, les références croisées, la balise a n’étant pas nécessairement associée à l’attribut "href" ;
  • i[lang] permet de cibler les mots écrits dans une langue étrangère, la balise i (italique typographique, par opposition à l’italique d’emphase, généré par la balise em) servant à mettre en italique également les noms d’enseignes commerciales, de navires, les termes techniques, etc. ;
  • bdo[dlr] permet de cibler dans un texte les passages dont le sens d’écriture est spécifié (dlr="rtl" : droite vers gauche, dlr="ltr" : gauche vers droite).

Sélecteur : E[att="val"]

Éléments ciblés : tout élément E portant l’attribut « att » et dont la valeur est exactement la valeur « val ».

Applications possibles : modifier l’apparence d’un lien HTML (cibler un lien en particulier), faire ressortir du texte un acronyme utilisé de manière récurrente (attribut "title"), différencier la couleur des liens hypertexte et des appels de note (on ciblera alors spécifiquement les appels de note), mettre systématiquement en romain les appels de note (attribut "epub:type", valeur "noteref") ou encore mettre en italique les entrées d’un glossaire (attribut "epub:type", valeur "glossdef"), etc.

Exemples d’application :

  • i[lang="en"] permet, dans une publication multilingue, de cibler les mots écrits en anglais ;
  • bdo[dlr] permet de cibler dans un texte les passages dont le sens d’écriture est inversé (droite vers gauche) ;
  • section[epub|type="index"] section[epub|type="part"] permet de cibler les entrées d’un index organisé (thématique ou par ordre alphabétique), pour paramétrer par exemple l’espacement entre les sections de l’index ;
  • dt[epub|type="glossterm"] permet de cibler spécifiquement les entrées du glossaire, l’élément dt pouvant être utilisé à d’autres emplacements du livre, par exemple dans un index ;
  • li[epub|type="biblioentry"] permet de cibler toutes les entrées de la bibliographie, au même titre que section[epub|type="bibliography"] li. Dans le cas d’une bibliographie complexe, on pourra par exemple se servir de ce sélecteur pour gérer l’espacement entre les différentes sections de la bibliographie.

Sélecteur : E[att~="val"]

Éléments ciblés : tout élément E dont l’attribut « att » contient une liste de valeurs, séparées par des espaces, l’une de ces valeurs étant exactement égale à « val ».

Applications possibles : cibler l’ensemble des titres d’une même famille préalablement définie par une classe, sélectionner un ensemble d’éléments (images, items de liste, entrées de tableau, de sommaire) sémantiquement cohérent.

Exemples d’application :

  • p[class~="x"] permet de cibler l’ensemble des paragraphes auxquels sont appliquées simultanément plusieurs classes, dont l’une est la classe « x » ;
  • section[epub|type~="frontmatter"] h1, section[epub|type~="frontmatter"] h2 permet de cibler l’ensemble des titres de niveau 1 et de niveau 2 contenus dans les pages liminaires (<section epub:type="frontmatter titlepage"> pour la page de titre et <section epub:type="frontmatter copyright-page"> pour la page de copyright, par exemple) pour leur assigner une couleur, une graisse, une police, etc. ;
  • section[epub|type~="bodymatter"] permet de cibler l’ensemble des sections créées dans les pages de contenu intérieur, par exemple pour fixer la position du titre des chapitres (<section epub:type="bodymatter chapter">).

Sélecteur : E[att^="val"]

Éléments ciblés : tout élément E dont la valeur de l’attribut « att » commence exactement par la chaîne de caractère « val ».

Applications possibles : a[href^="www"] permet de cibler toutes les ancres pointant spécifiquement vers un site internet, i. e. les liens HTML, en excluant les appels de note qu’on stylisera différemment.

Exemples d’application :

  • a[id^="ref"] ou a[href="#note"] permettront de cibler l’ensemble des appels de note sans avoir à utiliser l’attribut "epub:type" ;
  • li[epub|type^:"lo"] permet de cibler l’ensemble des items de liste figurant dans les tables du livre (lot et loi).

Sélecteur : E[att$="val"]

Éléments ciblés : tout élément E dont la valeur de l’attribut « att » finit exactement par la chaîne de caractères « val ».

Exemples d’application :

  • h1[epub|type$="chapter"] permet de cibler l’ensemble des titres de niveau 1 contenus dans les sections de chapitre et sous-chapitre (chapter, subchapter) ;
  • *[epub|type$="title"] permet de cibler tout élément figurant dans les zones d’en-tête du document (title, halftitle, fulltitle, subtitle, covertitle), pour en modifier par exemple la police .

Sélecteur : E[att*="val"]

Éléments ciblés : tout élément E dont la valeur de l’attribut « att » contient la sous-chaîne « val ».

Applications possibles : appliquer le même style aux appels de note et aux numéros de note (attribut epub:type, valeur note), cibler des éléments de contenu sémantiquement cohérents, i. e. situés à des emplacements du livre délimités sémantiquement.

Exemples d’application :

  • h[epub|type*="chapter"] permet de cibler l’ensemble des titres figurant dans les chapitres (chapter) et les sous-chapitres (subchapter) ;
  • h[epub|type*="sentence"] (alternative à h[epub|type$="sentence"]) permet de cibler l’ensemble des paragraphes introductifs et des conclusions de partie (concluding-sentence et topic-sentence).

Interprétation par les terminaux de lecture

Le lecteur d’Adobe ADE n’interprète aucun des sélecteurs d’attribut. Dans la mesure où il est proposé quasiment systématiquement en téléchargement, la restitution du rendu doit donc tenir compte de ce défaut d’interprétation. Ce qui oblige à renoncer à se servir de cette catégorie sélecteurs et à trouver une manière alternative de cibler les éléments.

Les lecteurs d’EPUB 3 sont en revanche en mesure de les interpréter, à l’exception des sélecteurs impliquant l’attribut "epub:type", dont l’interprétation semble encore strictement virtuelle ou théorique (pour un exemple précis d’utilisation, voir sur ce point l’article « EPUB 3 : stylisation de l’appel de note »).

Pour autant, ce n’est pas parce que les sélecteurs CSS utilisant l’attribut "epub:type" ne sont pas interprétés actuellement, que celui-ci ne doit pas être utilisé pour le balisage sémantique des publications EPUB 3. Dans ce cas, on devra impérativement déclarer l’espace de noms (namespace) adéquat dans l’élément <html> de chacun des fichiers XHTML :

<html xmlns="http://www.w3.org/1999/xhtml" xmlns:epub="http://www.idpf.org/2007/ops">

Dans le fichier CSS, on préfixera la ou les règles de style de la manière suivane si on souhaite malgré tout utiliser un sélecteur d’attribut "epub:type". Par exemple ici, pour styliserl’appel de note en exposant :

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

Pour en savoir plus


0 réponses

Répondre

Se joindre à la discussion ?
Vous êtes libre de 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.