Création d’ebook : forcer un saut de page sur Readium

Éditrice freelance, spécialisée en création d’ebooks, je me suis heurtée récemment à un problème en voulant créer un ebook pour un éditeur : comment forcer un saut de page sur Readium ? Pour ceux qui désirent créer un ebook et qui ne testeraient pas systématiquement son affichage sur Readium ou qui n’auraient pas encore trouvé de solution, voici mon retour d’expérience.

Sommaire

• Cas particulier de la création d’ebook : la gestion des sauts de page dans Readium
• Paramétrer un saut de page dans Readium en CCS : un bug connu
• Paramétrer un saut de page dans Readium en HTML : utilisation de l’attribut style
• Limites de cette solution : ajout d’un fond coloré et d’une bordure au tableau
• En résumé

Lorsqu’on cherche à créer un ebook, ou plus précisément à créer un EPUB, l’affichage du fichier peut être problématique en raison des différences d’interprétation des propriétés CSS selon les moteurs de rendu. Si l’ebook ne comporte que du texte, tout se passe bien. Mais lorsque l’on cherche à créer un ebook contenant des images ou des tableaux, comme c’est le cas ici, il faut parfois faire preuve d’inventivité pour garantir l’affichage de l’EPUB sur tous les lecteurs. Cet article traite d’un cas un peu particulier, mais qui servira j’espère à ceux qui rencontrent des problèmes d’affichage sur Readium lorsqu’ils cherchent à créer un ebook lisible par tous les lecteurs d’EPUB (interopérabilité), ou à tout éditeur d’epub qui fait ses premiers pas.

Cas particulier de la création d’ebook : la gestion des sauts de page dans Readium

Le contexte dans lequel est rédigé cet article, « Création d’ebook : solution aux problèmes d’affichage sur Readium », est le suivant : un éditeur m’a chargée récemment de créer un ebook, c’est-à-dire de convertir le livre papier, réalisé sur InDesign, en ebook au format EPUB. Une première version du fichier EPUB a été produite depuis InDesign (export au format EPUB). La création de l’ebook (mise en page) a été réalisée à partir de Sigil.

Je rappelle que Readium ne sert par à créer d’EPUB mais uniquement à les afficher.

Dans la version papier du livre était incorporée une image au format PDF représentant une affiche contenant des images et du texte, présenté sur deux colonnes. Pour des questions de lisibilité et en raison des contraintes d’affichage, la solution retenue pour présenter l’affiche a été de créer un tableau en HTML et de le mettre en forme en CSS. À défaut de pouvoir garantir que le tableau tienne sur une page, comme dans la version print, nous avons choisi de le faire débuter sur une nouvelle page (là encore comme dans la version print).

Pour ce faire, nous avons créé une ligne d’en-tête dans le tableau (<table>) contenant le titre de l’affiche et une image, séparés par un simple <br/>. Pour ce faire, nous avons utilisé le balisage HTML suivant :

<tbody>
<tr style="page-break-inside:avoid;" id="row1">
<th colspan="2" class="left">
<h1>EMMA : <span class="soustitre">VIRUS À CAPSIDE HÉLICOÏDALE</span><br/>
<img alt="Mode de transmission du virus Emma" src="../Images/transmission.jpg"/></h1>
</th>
</tr>
…

En CSS :

Nous avons assigné au tableau la déclaration CSS suivante : page-break-before:always;

Nous avons assigné à chaque ligne du tableau la déclaration CSS suivante : page-break-inside:avoid;

Paramétrer un saut de page dans Readium en CCS : un bug connu

Quelques ajustements CSS ont été requis pour stabiliser un affichage propre de l’EPUB sur ADE (Adobe Digital Editions) et iBooks, mais sur Readium, l’affichage a été beaucoup plus complexe à stabiliser.

Dans notre exemple, le problème n’était pas tant que le saut de page précédant le tableau ne soit pas interprété, mais que la propriété page-break-inside, appliquée à la première ligne, ne soit pas prise en compte, avec pour conséquence le résultat suivant : l’image n’est pas coupée car elle est par défaut insécable, mais la première ligne du tableau est coupée après la balise <br />.

Création d’ebook : forcer un saut de page sur Readium – Figure 1

Paramétrer un saut de page dans Readium en HTML : utilisation de l’attribut style

Une solution pourrait être d’isoler le tableau dans un fichier HTML distinct, mais une page blanche est placée avant le tableau afin de forcer son affichage sur une page de gauche.

Pour tenter de pallier ce problème et forcer l’affichage du tableau sur une nouvelle page dans Readium, nous avons cherché plusieurs solutions « classiques ». La première consiste à attribuer une classe au paragraphe de texte précédant le tableau afin de pouvoir le cibler et lui assigner la déclaration CSS suivante : page-break-after:always; (renforcée éventuellement par un !important). Comme on pouvait s’en douter, cette solution ne fonctionne pas.

La deuxième est en revanche beaucoup plus prometteuse : interdire la coupure de la première ligne du tableau au moyen d’un attribut HTML. Pour cela, on a utilisé un attribut style inline dans la balise (<row>) et on lui a appliqué la valeur page-break-inside:avoid;, ou page-break-inside:avoid !important; pour plus de sécurité (<tr style="page-break-inside:avoid !important;" id="row1">). Pour preuve :

Création d’ebook : forcer un saut de page sur Readium – Figure 2

Cette solution est toutefois déconseillée dans le cadre d’une création d’ebook dans la mesure où elle entre en contradiction avec la règle fondamentale de séparation du fond (balisage HTML) et de la forme, qui doit être théoriquement assurée par les seules déclarations CSS. Mais on touche ici aux complexités de la création d’ebook qui oblige parfois à recourir à certaines ruses pour garantir l’affichage de l’epub sur certains lecteurs.

Limites de cette solution : ajout d’un fond coloré et d’une bordure au tableau

Dans notre exemple, s’ajoute une difficulté supplémentaire. La collection dans laquelle s’insère cet ebook prévoit d’habiller les visuels avec un fond coloré et une bordure. Or, dans la mesure où l’on ne peut pas créer à proprement de saut de page, mais uniquement faire commencer le texte sur la page suivante en interdisant la coupure de la première ligne, cette solution donne logiquement ce rendu lorsqu’on habille le tableau : le texte du tableau est bien positionné en haut de la page suivante, mais le cadre débute sous le texte précédant le tableau.

Création d’ebook : forcer un saut de page sur Readium – Figure 3

La solution que j’ai trouvée pour forcer le saut de page dans Readium est d’assigner au paragraphe précédant le tableau une marge basse (margin-bottom) suffisamment importante pour garantir qu’il soit chassé sur la page suivante. Quel que soit le lecteur d’epub sur lequel l’ebook sera lu, le tableau sera placé en haut de la page suivante.

En résumé

Plus généralement, pour forcer un saut de page dans Readium, on peut sans doute se contenter d’assigner une marge basse élevée à l’élément précédant le saut de page qu’on cherche à créer. C’est ce qui ressort de ces différents essais. Cette solution, quoique relativement artificielle, est peut-être plus orthodoxe que l’utilisation d’un attribut style dans le fichier HTML. À chacun de se faire sa propre idée.