Créer un ebook | L’optimisation CSS (2) : suppression des déclarations inutiles

Lorsqu’on crée un ebook depuis InDesign, l’export du fichier au format EPUB génère automatiquement un ensemble de règles CSS. Certaines d’entre elles ne sont d’aucune utilité et alourdissent le fichier CSS. La première étape de l’optimisation du code consiste donc à supprimer ces règles. Plus généralement, son objectif est de rendre la feuille de styles la plus propre possible pour simplifier ensuite sa réorganisation.

Sommaire


Lorsqu’on exporte un fichier InDesign au format EPUB, InDesign génère l’ensemble des règles de styles servant à mettre en page le livre, à l’exception des effets appliqués aux objets ou de certains attributs de caractères (approches, crénages, décalages, modifications d’échelle…).

Ces règles sont exportées dans un ou plusieurs fichier(s) CSS (InDesign CC) selon que l’export a été réalisé depuis un fichier (format .ind) ou un livre InDesign (format .indb). Dans ce cas, InDesign génère un fichier CSS pour chaque article ou document du livre, correspondant chacun à un fichier .XHTML, ainsi qu’un fichier CSS de gabarit contenant les styles communs à l’ensemble des documents.

Le(s) fichier(s) CSS correspond(ent) ainsi en quelque sorte à une transcription exhaustive de la maquette. Or sont également générées, au moment de l’export, toute une série de règles qui n’ont pas besoin d’être déclarées dans le fichier CSS dans la mesure où elles n’ont aucun impact sur le rendu du livre.

Valeur initiale des propriétés CSS

Comme c’est le cas des attributs InDesign, chaque propriété CSS possède une valeur initiale (normal, 0, none, left…) ou par défaut. Cette valeur est utilisée pour déterminer le rendu d’un élément lorsque sa valeur n’a pas été définie. C’est ce principe qui permet par exemple, dans InDesign, de ne pas avoir à renseigner systématiquement l’option de soulignement (décochée par défaut) ou à paramétrer la casse pour que le texte apparaisse comme non souligné ou en bas-de-casse, qui sont les valeurs par défaut de ces propriétés.

De même, lorsqu’on définit le style d’un élément dans le fichier CSS, si la valeur d’une de ses propriétés correspond à sa valeur par défaut, cette propriété n’a donc pas besoin d’être renseignée pour être interprétée correctement par le moteur de rendu. Par exemple, pour un paragraphe en romain, sans indentation, il n’est pas nécessaire de déclarer les règles CSS font-style: normal; et text-indent: 0;.

Or, lorsqu’on exporte le fichier ou le livre InDesign au format EPUB, la plupart des propriétés CSS servant à déterminer le rendu standard d’un élément sont déclarées dans le fichier CSS, que leur valeur ait été ou non définie. Sont ainsi générées les règles de style correspondant aux attributs activés, c’est-à-dire définies dans la maquette, ainsi qu’un ensemble de règles correspondant à des attributs de style qui n’ont pas été paramétrés.

À titre d’exemple, la règle CSS du paragraphe standard (ici le paragraphe « normal », dont on a défini uniquement la police et son corps, l’interlignage, l’espace avant et l’espace après), sera exportée de la manière suivante dans le CSS (les propriétés de la règle de style correspondant aux rubriques « Formats de caractères de base » et « Retrait et espacement » des options de style de paragraphe) :


p.normal {
-epub-hyphens:none;
-webkit-hyphens:none;
color:#000000;
font-family:Calibri, sans-serif;
font-size:1em;
font-style:normal;
font-variant:normal;
font-weight:normal;
line-height:1.25;
margin-bottom:6px;
margin-left:0px;
margin-right:0px;
margin-top:6px;
text-align:justify;
text-decoration:none;
text-indent:0px;
}

Ces règles (i. e. les règles pour lesquelles la propriété CSS a pour valeur la valeur initiale, par exemple : 0, normal, none…) n’ayant aucune incidence sur le rendu du livre, elles peuvent en théorie être supprimées dans la mesure où elles ne font qu’alourdir le fichier CSS. En pratique, tout dépend du contexte et de la définition du style parent.

Valeur définie des propriétés CSS : héritage des styles et poids des sélecteurs

Lorsqu’un style est créé dans InDesign d’après un style parent, seule la valeur des attributs qui diffère de celle de son parent a besoin d’être renseignée, celle des autres attributs l’étant par défaut, avec la valeur qu’ils ont dans le style parent. C’est précisément l’intérêt de cette méthode de composition, dont la contrepartie est de n’avoir à modifier, dans les options de style du parent, que les attributs communs aux deux styles. La modification est alors automatiquement répercutée au niveau du style enfant, l’existence d’un lien de parenté entraînant mécaniquement sa redéfinition.

Ce principe se retrouve en CSS, avec pour conséquence : si une propriété n’a pas de valeur définie, celle qui sera appliquée par le moteur de rendu sera soit la valeur qu’elle possède par défaut, soit celle définie au niveau de son élément parent, dont elle hérite alors mécaniquement.

Dans le cas des styles de paragraphe, la valeur qui s’applique à une propriété sera soit celle que possède son parent dans la structure HTML du document, en l’occurrence le conteneur (<div>, <section>…) dans lequel est situé le paragraphe (ou, à défaut, l’élément <body>), soit l’élément (ici, p) auquel s’applique le style s’il a été déclaré au moyen d’une classe (.enfant) et non du sélecteur p.enfant (sauf en cas de conflit, où le sélecteur de classe l’emporte alors sur le sélecteur de balise, appelé également sélecteur de type ou d’élément).

Le fait que des styles de paragraphe, définis d’après celui du paragraphe de texte courant, héritent de ses caractéristiques découle de deux notions : le cumul des propriétés CSS entre un élément et une classe et le poids des sélecteurs. En effet, la fonction d’une classe est de spécifier ou de modifier le comportement d’un élément (ciblé en HTML au moyen de la balise <élément class="x">). L’élément ciblé aura ainsi pour caractéristiques celles définies dans la règle CSS du sélecteur d’élément et celles définies dans la règle CSS de la classe appelée par la balise HTML. En cas de conflit entre certaines propriétés CSS, ce sont les valeurs définies au niveau de la classe qui s’appliquent, quelle que soit l’ordre dans lequel elles sont disposées.

Quelles propriétés supprimer ?

Conséquence de ce principe : certaines des déclarations pour lesquelles la propriété CSS a pour valeur la valeur initiale seront à réintégrer lorsqu’on aura rétabli la hiérarchie des styles dès lors que cette valeur diffère de celle du style parent. Je pense par exemple à l’indentation des paragraphes.

Prenons le cas d’une publication littéraire possédant plusieurs styles de paragraphe : le style de paragraphe principal (style « courant ») et un ensemble de styles enfants servant à présenter les citations, les poèmes, les notes, éventuellement des exergues…, avec des indentations, des marges et des alignements différents.

Pour rétablir la hiérarchie de ces styles, on va déclarer les styles enfants au moyen de sélecteurs de classes (par exemple, .citation ou .exergue, au lieu de p.citation ou p.exergue). La police et l’interlignage communs à ces styles seront déclarés au niveau du sélecteur p, sans qu’il y ait lieu de les définir également au niveau de chaque classe, tandis que les autres propriétés, propres à chacun de ces styles, seront déclarées au niveau de leurs classes respectives.

Or, si le paragraphe de texte courant (<p>) possède une indentation positive, il est indispensable de conserver la déclaration text-indent:0 ; pour tous les styles ne possédant pas d’alinéa (par exemple les citations venant s’intercaler entre deux paragraphes de texte, les strophes en poésie, les exergues…).

On peut en revanche supprimer l’ensemble des styles servant à mettre en place les éléments figurant dans le gabarit (par exemple le rappel du titre de l’article ou du chapitre, de l’auteur, le folio) si l’on réalise un EPUB dit reflowable, la notion de page disparaissant au profit de celle du flux.

Utilisation des valeurs relatives

Une opération essentielle à réaliser de manière précoce une fois que l’EPUB a été généré, mais qui ne relève pas à proprement de l’optimisation CSS, est le remplacement des valeurs numériques exprimées de manière absolue (en pixels, par exemple) par des valeurs relatives (em ou pourcentage).

Pour une raison relativement évidente, le W3C déconseille d’utiliser des valeurs exprimées en pixels, c’est-à-dire à taille fixe, sauf pour les médias de sortie dont la taille est connue (dans des media queries, par exemple) ou pour certaines propriétés comme l’épaisseur des bordures (border-width) ou les marges de la page (@page) pour lesquelles il n’existe pas d’élément parent. En effet, si on définit les dimensions d’une image en pixels, elle conservera la même taille quel que soit celle de l’écran sur lequel sera lu l’EPUB (viewport). De même pour les marges d’un bloc. Si une marge de 20 px a un sens sur un écran d’iPhone 4 ou d’iPhone 5, elle en a beaucoup moins lorsque le même ebook est lu sur un écran d’ordinateur 27 pouces. De même, le fait d’utiliser des valeurs relatives permet de conserver les proportions du livre lorsque l’utilisateur modifie la taille de la police.

Or, lorsqu’on crée un EPUB depuis InDesign, seule la taille des images peut être définie (Options d’exportation > Objet > CSS) de manière fixe ou relative. Elles seront placées dans un bloc dont la largeur et la hauteur seront exprimées en pixels dans le premier cas, en pourcentage dans le second (on doit alors activer l’option « Selon la répartition du texte »). Ce choix n’est en revanche pas proposé pour les marges ou pour les autres éléments. Inversement, la taille des polices est exprimée par défaut en em, selon la règle de correspondance suivante :

1 em = 1 cadratin = 16 pixels = 12 pt = 100 %

Cette règle de conversion permet de déterminer quelle sera la valeur calculée de la propriété lorsqu’elle est exprimée en em ou en % (on pourra utiliser le convertisseur en ligne px to em pour définir la valeur des propriétés utilisées dans le fichier EPUB). Pour paramétrer de manière pertinente le rendu des éléments, il est toutefois important de bien comprendre à quoi correspondent ces unités, ou plus précisément à quoi elles se rapportent :

  • les pourcentages sont utilisés pour spécifier des dimensions relatives, selon le type d’élément, à la largeur ou la hauteur du conteneur parent (pour une image par exemple, placée dans un élément <div> ou <figure>), ou à la taille de police par défaut (1 em) ;
  • les em sont utilisés pour spécifier des dimensions relatives au corps de la police de l’élément (plus précisément, la largeur d’une lettre majuscule M dans ce corps de police, d’où la notation em). Une marge de 2em, par exemple, appliquée à un paragraphe de texte, représentera deux fois la largeur occupée par un espace cadratin dans ce style de paragraphe.

Or la taille de police d’un élément est héritée de son parent. Lorsque des éléments sont imbriqués, par exemple lorsqu’on place un paragraphe de citation (classe .citation) dans un élément <blockquote>, la valeur calculée du font-size de l’élément (le corps du paragraphe de citation) tient compte de celle du blockquote. Si on a spécifié comme taille de police pour le blockquote 2em, et qu’on ne réduit pas la taille de police du sélecteur .citation à 1em, le corps du paragraphe de citation sera de 4em et non de 2em.

Enfin, l’objectif de cette première étape de l’optimisation du fichier CSS étant d’obtenir une feuille de styles la plus propre possible pour simplifier sa réorganisation, on pourra procéder dès cette étape au remplacement des propriétés margin-top, margin-right, margin-bottom et margin-left par la propriété raccourcie margin.

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.