L’ebook redistribuable
Une introduction rapide et interactive à l’usage des éditeurs, graphistes et simples curieux.
Introduction
On parle très souvent de formats, de modèles économiques, de parts de marché, d’enrichissement ou de disruption mais nous en oublions souvent un essentiel : le design du livre.
Au cours de ces dernières années, j’ai pu me rendre compte que beaucoup d’éditeurs et de graphistes se sentaient perdus à ce sujet.
Qu’est-il possible de faire et comment ?
Est-ce que tel logiciel de P.A.O. est capable de le faire directement ?
Pourquoi la mise en page bogue dans telle ou telle application de lecture ?
Est-ce que nous pouvons rajouter quelques interactions ?
Quelles contraintes prendre en compte ?
Autant de questions dont les réponses restent vagues et qui demandent très régulièrement des éclaircissements.
L’objectif de cette page est par conséquent de donner les clés du livre numérique redistribuable, aussi connu sous le nom d’ebook reflowable text.
Le livre numérique, c’est du web
Même si nous n’allons pas nous plonger dans les méandres techniques du livre numérique et, plus particulièrement, du standard EPUB, il n’est pas inutile de rappeler que celui-ci emprunte les langages du web.
Un livre numérique au format EPUB c’est :
- une structure en HTML (HyperText Markup Language) ;
- une mise en pages en CSS (Cascading Style Sheets) ;
- des interactions en JS (JavaScript) ;
- des images vectorielles en SVG (Scalable Vector Graphics).
La structure HTML se présente ainsi :
<h1>Titre du chapitre</h1>
<p>Le premier paragraphe de notre chapitre, une <em>emphase</em> vient accentuer un mot de la phrase.</p>
<blockquote>
<p>Voici le premier paragraphe d’une citation en bloc.</p>
<p>Et voilà le second.</p>
</blockquote>
<figure>
<img alt="description de l’image" src="../Images/image1.jpg" />
<figcaption>La légende de l’image</figcaption>
</figure>Cette structure permet aux solutions de lecture de comprendre le texte et de pouvoir faire la différence entre les contenus (titre, citation, illustration, etc.). Cela servira notamment pour la synthèse vocale.
Quant à la mise en pages CSS…
p {
font-size: 1em;
line-height: 1.5;
margin: 0;
text-indent: 1em;
}Dans cet exemple, nous déclarons des styles pour tous les paragraphes de l’ouvrage (taille, interlignage, marges et retrait de la première ligne).
Il est extrêmement important de faire remarquer que le contenu web est fluide par défaut : celui-ci est en effet automatiquement redistribué dans la fenêtre du navigateur. Nous pourrions par exemple le comparer au bloc de texte redistribuable d’InDesign.
C’est en stylant que l’on est susceptible de dégrader cette fluidité.
Il fut un temps où les designers web utilisaient des dimensions fixes, par exemple 800 pixels de large. Ils pouvaient ainsi réaliser des mises en pages plus complexes : colonnes, objets placés au pixel près, etc. Inutile de souligner qu’ils se sont rapidement rendu compte que cette approche de conception reposant sur des dimensions fixes ne pouvait plus fonctionner avec l’avénement des appareils mobiles.
Du web, à une différence près
On entend souvent dire que le livre numérique est une sorte de « site web empaqueté » mais cela ne signifie pas pour autant que tous les navigateurs web sont capables d’ouvrir un fichier EPUB. En effet, si les bases sont communes, EPUB est une norme qui dispose de ses propres spécifications.
À l’heure actuelle, seul le navigateur Microsoft Edge prend nativement en charge le format.
Aussi, il faut généralement passer par une solution de lecture (appareil dédié, app, service dans le nuage) pour pouvoir accéder au contenu du livre numérique.
Les solutions modernes empruntent aux navigateurs web leur moteur de rendu, un composant logiciel qui se charge, comme son nom l’indique, du rendu des pages web. On peut ainsi considérer que les solutions de lecture sont des surcouches logicielles qui permettent la prise en charge du format et proposent une interface dédiée à l’activité de lecture.
Ces surcouches s’accompagnent de spécificités (pagination, réglages utilisateurs, etc.) qui rendent la conception et le développement d’un livre numérique quelque peu différents de ceux d’un site web.
Un changement de paradigme
Si l’on compare navigateurs web et outils P.A.O, force est de constater que les moteurs de rendu web sont largement moins aboutis que ceux des logiciels auxquels nous sommes habitués.
Les algorithmes de justification des navigateurs web sont simplistes, les fonctionnalités typographiques avancées (fonctionnalités Open Type) sont très récentes et parfois mal supportées, les grilles de composition viennent tout juste d’arriver, le modèle de fragmentation (pagination) est encore inexistant…
De même, en matière de typographie, césures, veuves et orphelines, et sauts de page proposent un contrôle pour le moins limité en numérique. Bien que les solutions de lecture paginent par défaut, ces choses sont très médiocrement supportées.
Aussi, il faut bien différencier la « page PDF » de la « page EPUB ».
En EPUB redistribuable, il n’y a pas de dimensions fixes donc de pagination prédéfinie, il n’y a pas d’alignement vertical, il n’y a pas non plus d’image à fond perdu ou de note de bas de page qui fragmentent un paragraphe.
Le contenu est redistribué en fonction de la taille de l’écran, les contenus se suivent dans un flux continu et non pas fragmenté, paragraphes et images sont des blocs solides et il n’est pas réellement possible de placer certains contenus arbitrairement.
De fait, il n’existe rien dans les moteurs de rendu pour gérer la pagination à l’heure actuelle. La pagination est un hack, une bidouille réalisée à l’aide des outils CSS disponibles dans le but de l’imiter.
Les solutions de lecture modernes utilisent très souvent les colonnes CSS pour émuler la pagination. Le problème est que cette spécification n’a jamais été conçue pour cela et n’a pas évolué pour permettre les cas d’usages du livre numérique.
Le maquettiste ne met pas en pages, il ne fait que donner des indications. Il faut oublier le concept de WYSIWYG (Ce que l’on voit à l’écran est le résultat final).
Pour les développeurs, faire en sorte que tout fonctionne
Le rendu EPUB est un processus quelque peu complexe dans le sens où paginer une mise en pages définie arbitrairement peut créer de nombreux problèmes. Il n’est ainsi par rare que des solutions de lecture « surchargent » des styles pour régler des bugs d’affichage.
On parle ici d’override, soit un remplacement dynamique d’un ou plusieurs styles du fichier EPUB. En d’autres termes, c’est comme si les développeurs de la solution de lecture ne prenaient pas en compte ou outrepassaient certaines indications de mise en page.
Il faut noter que ces overrides sont rarement gratuits ; ils sont le plus souvent prévus pour régler des problèmes réels : images ou textes coupés, mauvais affichage de certaines polices, marges énormes sur des petits écrans, etc.
Par ailleurs, certaines solutions de lecture se servent des overrides pour « rattraper le coup » quand des déclarations CSS désactivent des réglages utilisateurs ou fonctionnalités.
Il faut bien comprendre que l’on obtiendra jamais le même résultat partout, il faut oublier le « au pixel près ». D’une part, les moteurs de rendu sont bien incapables de mettre en pages de manière totalement identique. D’autre part, les solutions de lecture gèrent ces contenus différemment.
Il faut donc accepter la perte de contrôle…
Le graphiste propose, l’utilisateur dispose
Cette perte de contrôle est d’autant plus certaine que les réglages utilisateurs sont très largement attendus par les lecteurs.
Depuis le tout début du livre numérique, ceux-ci peuvent composer le texte à leur convenance : police et taille de caractères, couleur de fond, marges de la page, interlignage et alignement du texte sont autant de variables sur lesquelles ils peuvent intervenir.
Nous pouvons concevoir ces réglages utilisateurs comme une seconde catégorie d’overrides, ce qui complique par ailleurs la tâche des développeurs de solutions de lecture.
À noter que les styles générés par les logiciels P.A.O. « cassent » souvent certains réglages utilisateurs… Le lecteur pourra donc se retrouver avec du texte illisible en mode nuit, des polices pas remplacées pour l’italique ou un réglage qui ne fonctionne pas du tout.
Une expérience de lecture
Concevoir un livre numérique, aussi simple soit-il, dépasse très largement le cadre de la composition et de la mise en pages.
Il faut penser en termes d’expérience de lecture.
Les solutions de lecture proposent nombre de fonctionnalités dédiées à l’activité de lecture :
- l’accès à la table des matières ;
- la recherche dans le texte ;
- la définition et la recherche en ligne (d’un mot ou d’une phrase) ;
- l’annotation ;
- le partage ;
- le zoom des tableaux ou images ;
- les notes pop-up ;
- la consultation des seules images que le livre contient (Kindle) ;
- etc.
Cela n’est pas sans poser quelques défis de conception… Comment faire en sorte de ne pas interférer avec ces fonctionnalités ? Comment dépasser celles-ci pour en apporter d’autres, susceptibles d’améliorer l’expérience de lecture de l’utilisateur ?
Rien que les appels de notes peuvent déjà dégrader cette expérience. Non liés, ils ne permettront pas d’accéder à la note de fin de section ; trop petits, ils demanderont à l’utilisateur de s’y reprendre à plusieurs fois avant d’y parvenir sur son appareil tactile.
Quant aux interactions plus complexes, le support du langage JavaScript n’étant pas obligatoire en EPUB, il faudra composer avec cette contrainte et proposer une solution de secours statique pour chaque interaction.
Une perte de contrôle, une gamme de possibilités
Si nous faisons le bilan, il faut admettre que le livre numérique redistribuable peut désarçoner bien des éditeurs et graphistes rompus aux joutes de l’édition.
Il faut envisager les choses différemment, perdre certaines habitudes, re-penser l’utilisabilité de l’objet imprimé pour l’écran, créer de nouvelles méthodes de conception adaptées aux contraintes de ce nouveau medium…
Le web étant déjà passé par là, nous pouvons en tirer une leçon importante : il faut épouser l’idée que toutes les solutions de lecture ne sont pas égales en support et en possibilités techniques.
La réponse est probablement le concept d’amélioration progressive : on construit une base solide qui fonctionne partout puis on l’améliore en fonction des capacités des solutions de lecture.
Aujourd’hui, nous sommes ainsi capables de simuler l’alignement vertical, de forcer une image à fragmenter un paragraphe dans certaines conditions ou de l’habiller de manière complexe, d’effectuer des transformations sur du texte (e.g. rotation) et de créer des grilles de composition adaptatives.
Mieux encore, CSS et JavaScript disposent de mécanismes pour concevoir cette amélioration progressive au mieux.
Il y a de l’espoir mais cela demandera le partage des connaissances, beaucoup de recherche utilisateur et, surtout, un effort collectif.