Héritage des styles dans l’EPUB : première méthode de restauration

La fonction d’exportation d’InDesign ne permet pas de conserver une propriété pourtant essentielle : l’héritage des styles. Nous revenons ici sur la méthode proposée par Liz Castro pour les restaurer dans l’EPUB.

Sommaire

• Première méthode de restauration de la parenté des styles
• Limites de cette méthode
• Résolution

Première méthode de restauration de la parenté des styles

Dans InDesign, lorsqu’on applique un style « enfant » à un élément donné, les attributs de son « parent » sont également appliqués au texte ciblé. C’est ce principe, essentiel car il permet notamment de limiter la prolifération du nombre de styles, qu’on appelle « l’héritage des styles ».

De la même manière, le langage CSS permet de cumuler plusieurs règles de style pour les affecter simultanément à une même balise. On utilise alors la balise HTML <p class="classe_1 classe_2> pour appliquer les déclarations de chacune des deux « classes » à l’élément balisé.

Pour restaurer le principe d’héritage des styles dans l’EPUB, une première méthode consiste donc à rajouter le nom du parent dans les balises HTML (<p class="parent enfant">). Seront alors appliquées les propriétés du style « enfant » et ses propriétés dites « héritées ».

En pratique, on procèdera de la manière suivante :

1. Dans le fichier InDesign : on renomme les styles enfants (style « citation » par exemple) en faisant systématiquement précéder leur nom de celui de leur parent (« courant citation »).Les espaces figurant dans les noms de style doubles sont retranscrites par des titrets dans le CSS. Lorsqu’on exportera le fichier InDesign, chaque style sera donc reproduit dans le CSS selon la syntaxe suivante : p.courant-citation ;
2. Dans les fichiers XHTML générés : on scinde les classes correspondantes en deux classes autonomes, en remplaçant par des espaces les tirets figurant dans les noms de classes enfants.La balise <p class="courant-citation"> devient <p class="courant citation"> ;
3. Dans le fichier CSS : on requalifie chaque style enfant en classe. À l’aide de la fonction « Rechercher/Remplacer », on remplace par un point (.) le préfixe p.courant- dans le sélecteur de classe correspondant au style enfant (ici p.courant-citation) pour en faire une classe autonome (.citation) ;
4. Toujours dans le fichier CSS : pour chaque classe enfant, on supprime les déclarations communes avec le style parent. On ne conserve que les déclarations différant de celles du style parent. Le reste des propriétés (communes ou héritées) n’ont pas besoin d’être renseignées pour s’appliquer au texte ciblé.

Limites de cette méthode

C’est cette méthode que préconise Liz Castro (Créez des documents ePub, ed. Pearson, 2011, p. 129-131). C’est la manière apparemment la plus « fidèle » de restituer l’héritage des styles dans l’EPUB, puisque :

• elle consiste à « effectuer » l’héritage des styles directement dans les fichiers XHTML en cumulant les propriétés du style enfant et celles de son ou de ses parents (i.e. les déclarations des deux classes).En théorie, elle fonctionne quelle que soit la profondeur de l’arborescence ;
• elle manifeste la relation de parenté entre les styles dans les fichiers XHTML et dans la maquette.La modification des noms de style dans InDesign sert uniquement à « piloter » les fichiers XHTML.

Son inconvénient est que :

• elle complique le nom des styles dans la maquette. Si on veut utiliser malgré tout cette méthode, je recommande de modifier le nom des classes dans les balises d’exportation (Options de style > Exportation du balisage ou via l’option Modifier toutes les balises d’exportation, accessible depuis la fenêtre des styles), et non celui des styles eux-mêmes ;
• elle surcharge les balises HTML notamment lorsqu’un style parent est lui-même enfant d’un premier style. InDesign reproduit l’ensemble de la filiation dans le champ « D’après » des options de style. Si on se sert de ce contenu pour renommer un style enfant, l’ensemble des classes de la filiation figureront dans la balise servant à cibler le dernier enfant ;
• la parenté n’est pas explicitée dans le CSS puisqu’on retire systématiquement le nom du parent de celui des styles enfants.Si on veut manifester la relation de parenté dans le CSS, on doit conserver la forme développée des noms de style (par ex. p.courant citation), ce qui alourdit le fichier (notamment en cas de mises en pages complexes), ou commenter le code en précisant le nom du parent (voir l’article « Héritage des styles dans l’EPUB : deuxième méthode de restauration ») ;
• elle ne fonctionne pas en l’état car elle ne tient pas compte du poids des sélecteurs ! Lorsqu’on déclare les styles enfants, le fait de ne conserver que les déclarations différant de celles de leur parent crée une situation de conflit lorsqu’on affecte leurs classes à une même balise. La résolution de ce conflit se fait à l’aide de la notion de poids des sélecteurs. En CSS, un sélecteur n’aura pas le même poids selon sa position (dans le fichier HTML ou dans le CSS, externe au document), son degré de proximité avec l’élément stylisé et sa syntaxe dans le CSS. Concrètement, quel que soit l’ordre des classes dans les balises HTML (<p class="courant citation"> ou <p class="courant citation>), les règles qui s’appliqueront au texte ciblé seront celles du style « courant » et non celles du style « citation » en vertu de la supériorité d’un sélecteur de classe p sur une classe.

Résolution

Une manière de résoudre ce problème, et donc de conserver l’« esprit » de la méthode de Liz Catro, est :

• soit de déclarer les styles enfants comme des styles de paragraphe (p.citation) et non comme des classes (.citation). Quel que soit l’ordre de déclaration des styles dans le CSS, ce sont les déclarations de la classe la plus proche du texte dans le document HTML (i. e. celle qui vient en dernière position dans la balise) qui s’appliqueront au texte ciblé ;
• soit de déclarer aussi le style parent en classe ;Quel que soit l’ordre de déclaration des styles dans le CSS, ce sont les déclarations de la classe la plus proche du texte dans le document HTML qui s’appliqueront au texte ciblé puisque les classes ont le même poids dans le CSS ;
• soit d’insérer une déclaration !important dans celles des classes enfant, entre la valeur et le point-virgule, pour que ces déclarations deviennent prioritaires sur celles du style parent (mais pourquoi faire simple ?) ;Le fait que le style enfant ait été déclaré en classe ne pose alors aucun problème. Ce sont ces déclarations qui s’appliqueront en cas de conflit avec le sélecteur de classe p.courant.

Une autre méthode permet de pallier en partie ces limites. C’est celle que je développe dans l’article « Héritage des styles dans l’EPUB : deuxième méthode de restauration ».