Supprimer les remplacements locaux dans les fichiers CSS et XHTML

Parmi les bugs occasionnés par InDesign lors de la création de l’EPUB, la création de balises HTML et de règles CSS servant à formater localement du texte est l’un des plus problématique. Il ne s’agit pas d’un bug à proprement parler mais en pratique, cela revient à peu près au même.

Sommaire


Pour limiter le nombre de ces balises et règles CSS, il est fondamental de préparer le fichier InDesign en vue de son exportation. Néanmoins, quand bien même on a nettoyé le fichier de départ, InDesign en génère presque inévitablement lors de l’exportation.

Pour les éliminer de l’EPUB, une première méthode consiste à renommer a posteriori les sélecteurs de classe span.char-style-override-n° et span.para-style-override-n° dans le fichier CSS, et à répercuter cette modification dans les fichiers XHTML concernés. En fonction de l’état du fichier de départ, ce nettoyage peut s’avérer fastidieux, mais il est selon moi indispensable.

Modifications apportées au fichier CSS

Si le formatage ne correspond à aucun style de caractère ou de paragraphe défini dans le CSS, on renommera les sélecteurs de classe de type span.char-style-override ou p.para-style-override de préférence selon leur fonction typographique (par exemple : <i> ou <em>) ou sémantique (par exemple : p.citation ou h2.intertitre).

Dans le précédent article, nous étions partis de l’exemple suivant :

HTML
Sartre a écrit <span class="char-style-override">l’Être et le Néant</span>

CSS
span.char-style-override-1 {
	font-style: italic;
}

Si le formatage correspond à un style de paragraphe ou de caractère défini dans le CSS, comme c’est probablement le cas ici, on se contentera de remplacer le sélecteur de classe span.char-style-override ou span.para-style-override par celui existant dans le CSS. Ici, on utilisera la balise <cite>, qui sert à délimiter les titres d’œuvres).

Remarques

1. La balise <em> n’est pas nécessairement restituée en italique puisqu’elle sert à délimiter un contenu d’emphase, sur lequel l’auteur souhaite insister ou du moins distinguer du reste du texte. On prendra donc soin dans un EPUB de déclarer le style italique ({font-style: italic;}), au même titre que pour la balise <i> et la balise <cite>.

2. Le format EPUB déroge sur ce point (ce qui explique précisément la nécessité de déclarer les éléments <i> et <em>…) à la philosophie du langage HTML qui repose sur le principe de séparation du fond et de la forme. Ainsi, en développement web par exemple, la balise <i> n’a aucun sens. On la remplacera par une simple classe, déclarée comme telle en CSS (.italic {font-style: italic;}).

3. Le fait que l’italique doive être rendu au moyen de balises sémantiquement appropriées n’interdit pas de créer une classe spécifique, qu’on pourra utiliser en complément d’une autre pour composer en italique l’intégralité d’un paragraphe.

Modifications apportées aux fichiers XHTML

Pour que cette modification du CSS soit prise en compte dans les fichiers XHTML, il convient ensuite de remplacer chaque classe de type char-style-override ou para-style-override dans les balises HTML, par sa classe de substitution dans le CSS. Lorsqu’on utilise un logiciel de création de livres électroniques du type Sigil, par exemple, ce travail est grandement facilité par la fonction Rechercher/Remplacer.

On procèdera de la manière suivante :

    1. On recherche dans le CSS les sélecteurs de classe de type span.char-style-override inutiles et on les supprime du fichier.On recherche notamment ceux dont la seule déclaration correspond à celle de la police puisqu’elle est a priori définie dans le style du paragraphe où se situe la balise HTML ;
    2. On cherche dans le CSS s’il existe un sélecteur de classe strictement équivalent au sélecteur de classe p.para-style-override-1.On copie le bloc de déclarations du sélecteur de classe para-style-override-1 dans le champ Rechercher de l’onglet de recherche, et on limite la recherche au fichier en cours ;
    3. S’il n’existe aucun sélecteur de classe correspondant, on renomme le sélecteur de classe p.para-style-override-1 dans le CSS.S’il existe un sélecteur de classe équivalent, on se contente de supprimer l’ensemble de la règle CSS (sélecteur de classe + bloc de déclarations) ;
    4. Dans les fichiers XHTML, on recherche chaque balise servant à cibler la classe para-style-override-1 et on remplace cette classe par sa classe de substitution.On fait porter la recherche sur l’expression para-style-override-1, et le remplacement, sur l’expression nouveau-nom, en étendant la recherche à l’ensemble des fichiers HTML.

Lorsqu’il existe plus de 9 remplacements locaux de style de paragraphe (ou de caractère), je recommande de partir du dernier pour limiter le risque d’erreur ou d’oubli :

  1. Certaines balises de type char-style-override étant redondantes avec le formatage du paragraphe où elles se situent, elles doivent être purement et simplement supprimées.Ce n’est qu’après avoir éliminé l’ensemble des classes char- ou para-style-override des balises HTML qu’on peut les supprimer dans le CSS ;
  2. On procède de la même façon pour chaque sélecteur de classe para-style-override et char-style-override jusqu’à nettoyage complet du CSS.

En théorie, on peut commencer indifféremment par les formatages de caractère ou de paragraphe. En pratique, il faut parfois étudier minutieusement le CSS pour déterminer s’il ne serait pas opportun d’intégrer un formatage de texte dans un style de paragraphe plutôt qu’un style de caractère.

Ce genre de « dilemme » relève davantage d’une problématique d’optimisation , mais le travail sur les formatages permet de résoudre une partie de cette question.


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.