Héritage des styles dans l’EPUB : deuxième méthode de restauration

Dans son ouvrage Créez des documents ePub, Liz Catro explique comment recréer l’héritage des styles dans un EPUB en les renommant dans InDesign. Nous proposons ici une méthode alternative consistant à recréer cette propriété dans le CSS lui-même, sans avoir à « toucher » à la maquette.

Sommaire


Méthode de Liz Castro pour restaurer la parenté des styles

La méthode de restauration proposée par Liz Castro utilise la possibilité de cumuler des règles CSS pour appliquer cumulativement les propriétés du style enfant et celles de son parent (propriétés héritées) à un élément de texte ciblé. Dans notre exemple (style « citation » basé sur le style « courant »), c’est la syntaxe <p class="courant citation"> qui est utilisée pour appliquer les déclarations de la classe courant et de la classe citation à un paragraphe ou un élément p. Or :

  • même si InDesign ne génère pas de sélecteur p lors de l’exportation, il est possible de créer ce sélecteur dans le CSS et de lui assigner un ensemble de déclarations ;
  • ce sélecteur p s’apparente alors au style par défaut du livre ;
  • les styles de paragraphe héritent systématiquement de la balise p lorsqu’ils sont exportés au format EPUB. Ils sont donc par défaut « enfants » du style p.

La méthode que je préconise consiste donc à transférer les propriétés du style principal (ici p.courant) vers le sélecteur p lui-même afin d’alléger les balises HTML. La balise <p class="citation"> sera alors rigoureusement équivalente à l’ancienne balise <p class="courant citation">. L’héritage sera alors réalisé dans le CSS, puisqu’on affecte chaque fois un seul style à une balise (en plus de celui du sélecteur p).

Limites de la méthode de Liz Castro : cas des styles imbriqués

Contrairement à l’« esprit » de la précédente, cette méthode ne fonctionne que pour les enfants dont le parent est le style principal du livre (ici p.courant) tant que la maquette n’est pas stabilisée.

Imaginons que le style « citation » possède lui-même un style enfant « poésie » dont il diffère uniquement par l’alignement et l’indentation. On aura par exemple le CSS initial suivant :

p.courant {
	font-family: Garamond, serif;
	font-size: 1em;
	line-height: 1.2;
	margin: 0;
	text-indent: 1em;
}
p.citation {
	font-family: Garamond, serif;
	font-size: 1em;
	line-height: 1.2;
	margin: 1em 2em 1em 2em;
}
p.poesie {
	font-family: Garamond, serif;
	font-size: 1em;
	line-height: 1.2;
	margin: 1em 2em 1em 2em;
	text-align: center;
	text-indent: 0;
}

Lorsque la maquette est stabilisée, on peut réécrire le code de la façon suivante :

p {
	font-family: Garamond, serif;
	font-size: 1em;
	line-height: 1.2;
	margin: 0;
}
.courant {
	text-indent: 1em;
}
.citation {
	margin: 1em 2em 1em 2em;
	text-indent: 1em;
}
.poesie {
	margin: 1em 2em 1em 2em;
	text-align: center;
}

La définition des marges étant intégrée au style « poésie », celles-ci ne seront pas automatiquement mises à jour dans les fichiers XHTML si on les modifie dans le style « citation ». De même, si on modifie le corps de la police ou qu’on ajoute une condition au style « citation », elles ne seront pas prises en compte dans le style « poésie », ce qui n’est pas le cas de la première méthode.

Méthode alternative

Redéfinition du style courant

Si on transfère l’ensemble de ses déclarations vers le sélecteur p, la règle CSS servant à définir le style « courant » devient redondante. On peut choisir entre deux options :

  • soit on supprime l’une des déclarations du sélecteur p et on la réintroduit dans la définition de chacun des styles enfants.C’est ce qu’on a fait dans notre exemple avec la propriété text-indent ;
  • soit on laisse le sélecteur p en l’état, et on ne conserve qu’une seule de ses déclarations pour la définition du style « courant », ce qui limite en partie la redondance entre les deux styles.On ne la définit dans les styles enfants que lorsque sa valeur diffère de celle du sélecteur p.

On a donc le choix entre ces deux versions du CSS.

Soit on considère que l’indentation est positive par défaut. On lui donne alors la valeur qu’elle a dans le style de paragraphe « courant ») :

p {
	font-family: Garamond, serif;
	font-size: 1em;
	line-height: 1.2;
	margin: 0;
	text-indent: 1em;
}
.courant {
	text-indent: 1em;
}
.citation {
	margin: 1em 2em 1em 2em;
}
.poesie {
	margin: 1em 2em 1em 2em;
	text-align: center;
	text-indent: 0;
}

Soit on considère au contraire que l’indentation est variable. On choisit de la définir pour chaque style, mais on ne renseigne la propriété que lorsqu’elle est positive ou négative car interprétée par défaut lorsqu’elle est nulle :

p {
	font-family: Garamond, serif;
	font-size: 1em;
	line-height: 1.2;
	margin: 0; 
}
.courant {
	text-indent: 1em;
}
.citation {
	margin: 1em 2em 1em 2em;
	text-indent: 1em;
}
.poesie {
	margin: 1em 2em 1em 2em;
	text-align: center;
}

Cas des styles de titre

Lorsque le livre comporte une arborescence de titres, il est recommandé (dans une optique d’accessibilité notamment) d’utiliser des balises de type <h> pour cibler les différents niveaux de titres. On utilise alors des sélecteurs CSS h1, h2, h3

On doit donc dans un premier temps modifier ces balises dans les options d’exportation (Options de style > Exportation du balisage), InDesign attribuant par défaut une balise de type <p> à tous les paragraphes.

Or, si on se contente de transférer les déclarations du style « courant » vers le sélecteur p, elles ne pourront pas être appliquées au niveau des titres. Pour qu’elles le soient, on doit procéder de la façon suivante :

  • si on n’a pas créé de style de titre par défaut, on remplace le sélecteur p par la liste de sélecteurs p, h1, h2, h3.Cette syntaxe signifie que les déclarations de p s’appliquent à l’ensemble des sélecteurs h1, h2, h3, séparés par une virgule ;
  • si on a créé un style de titre par défaut, de type h1 par exemple, on procède de la même façon que pour le style « courant ». On crée un groupe de sélecteurs h1, h2, h3 auxquel on attribue les propriétés du style de titre par défaut, et on transforme en classes les styles de titre enfants.

L’avantage majeur de cette méthode est que :

  • elle fonctionne aussi bien si les déclarations des styles enfants sont regroupées dans des sélecteurs de classe de type p.citation ou de type .citation ;Le sélecteur p ayant une fonction générique, il a par principe moins de poids qu’une classe ou un sélecteur de classe. Ce sont donc eux qui prennent l’ascendant sur le sélecteur p, quel que soit leur ordre de déclaration dans le CSS.
  • elle est la plus « économe » en termes de balisage, et la plus proche de la « philosophie » de HTML 5. L’héritage des styles est fondamental dans une optique d’automatisation de la mise en pages et d’optimisation du code ; mais le choix du nom des balises d’après leur fonction sémantique me semble plus important que la traçabilité de la filiation.

En cas de styles imbriqués (par exemple plusieurs niveaux de titre), on perd en effet la trace de la filiation dans les fichiers XHTML contrairement à la méthode de Liz Castro.


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.