Comment faire un epub avec InDesign - ★ Les beaux ebooks ★

La fabrication d’ebooks peut paraître soit très simple, soit très mystérieux. En vrai c’est ni l’un ni l’autre. Voyons donc de plus près à quoi je passe mes journées, pour créer des (beaux !) livres numériques.

NB : Je parle ici de maquettes InDesign, mais tout ceci est aussi pertinent pour des fichiers word.

Suffit-il de cliquer sur « Fichier > Exporter » ?

Spoiler : non.

Pour être plus précise, il est possible de faire de la production numérique en exportant des ebooks depuis InDesign. C’est même une étape indispensable quand on me fournit une maquette indd ou idml pour adaptation. Mais ce n’est pas aussi simple que de passer directement à la case export, en faisant le pdf d’impression et un livre numérique dans la foulée, sans rien modifier aux paramètres par défaut, et sans plus y toucher une fois le fichier epub généré.

Pourtant, on procédant ainsi, parfois le résultat a l’air plutôt correct, sur liseuse, et du coup, c’est peut-être pas la peine de tout refaire, non ?

Peut-on faire un epub avec InDesign ?

Pour faire (très) court, la réponse est “oui, mais.” Pour des maquettes simples (par exemple, des romans, avec tout au plus un style particulier pour les titres des chapitres, tout le reste étant du texte courant), et pour des maquettes (très) bien préparées, l’epub fraîchement exporté paraît correct à l’œil nu. Cependant, lorsqu’on examine le code, c’est plus nuancé…

Si les détails techniques vous donnent mal à la tête, sautez à la fin pour une démonstration en images.

Posons quelques bases

InDesign est une application de mise en page, pour des maquettes destinées à l’impression. Malgré quelques défauts et excentricités, globalement, elle y excelle ; elle a réussi à s’imposer en écrasant les concurrents et c’est pas pour rien (pensée émue pour les années Quark XPress). Mais justement, depuis toujours, elle a été pensée et développée pour l’impression.

Il y a quelques années, avec l’essor du livre numérique, Adobe y a greffé l’export au format epub, pour permettre l’intégration de la production numérique avec la maquette print. Enfin… jusqu’à un certain point.

Un ebook est un livre… mais le numérique n’est pas le papier

Or le livre numérique n’est pas du print ; il a des contraintes différentes, compensées par des avantages propres, et des enjeux spécifiques, dont l’accessibilité* en cas de handicap visuel (myopie, dyslexie, malvoyance…), entre autres. Surtout, à la différence du print, la structure du fichier epub, et la façon dont il est créé, sont aussi importantes voire plus importantes que le rendu visuel.

Adaptation d’une maquette pour créer un ebook

Pour créer un ebook avec InDesign, environ la moitié du projet (voire les deux-tiers, selon le cas) c’est la préparation de la maquette avant l’export. Je vérifie que la feuille de styles est complète, et que les styles sont correctement appliqués ; si c’est pas le cas, je les crée moi-même et les applique. Astuce pour des devis plus légers : mieux la maquette est préparée, moins il y a de travail de préparation, et ça se ressent sur la facture.

Il y a la préparation du texte : je rajoute les espaces insécables pour la ponctuation, et je supprime les retours à la ligne manuels, parce que sinon on a des paragraphes coupés en plein milieu, lors de l’export, et c’est pas beau.

S’il y a des images, je vérifie qu’elles sont correctement ancrées, et je définis les paramètres de compression pour un rendu visuel correct sans que le fichier soit trop lourd. Surtout s’il y a beaucoup d’illustrations, ça peut poser problème : les plateformes de vente imposent des limites pour la taille en pixels de chaque image, et de poids total pour le fichier. Mais une image trop petite sera pixellisée et moche.

Il y a aussi l’enjeu écologique : plus le fichier est lourd, plus il consomme de ressources pour le stocker sur les serveurs et sur les ordinateurs, liseuses, tablettes ou téléphones, ainsi qu’à chaque téléchargement.

Je définis également les paramètres d’export de chaque style, pour traduire la maquette en XHTML (le texte) avec mise en forme par CSS (la feuille de styles numérique).

Liste très loin d’être exhaustive, mais vous saisissez l’idée. C’est plus ou moins long, selon la complexité de la mise en page, la qualité de la maquette, et la quantité du texte. C’est pourquoi je ne propose jamais un tarif sans avoir examiné le fichier, pour éviter une estimation trop basse (mauvaise pour moi) ou trop élevée (mauvaise pour le ou la client·e !).

Ensuite seulement j’exporte. Puis, une fois que j’ai mon fichier epub tout chaud, il reste l’autre moitié du boulot à faire, et ça ne se passe plus sous InDesign mais dans un éditeur d’epub : Sigil.

Faire un ebook : le code XHTML

Le code XHTML c’est un peu le squelette du livre numérique, ou son armature. On parle de code sémantique lorsqu’on utilise des éléments précis pour distinguer chaque partie du texte ; c’est-à-dire que le code lui-même a du sens. Il permet de dire à la liseuse que ce bout de texte-là c’est un titre et ce bloc-ci c’est du texte courant, et voici une citation, et cette phrase est importante. Je m’assure donc que le code XHTML est correctement structuré avec des balises sémantiques pour distinguer les différents éléments (titre / intertitre / texte courant / italique etc.). C’est très important : certaines liseuses et applications permettent de désactiver les styles de l’éditeur, ou les remplacent par des styles natifs. Or, si les styles sont désactivés ou mal-gérés, un texte sans structure perdra toute mise en forme. Ceci a aussi une grande incidence sur l’accessibilité, parce qu’un ordinateur ne comprend pas la mise en forme visuelle, mais uniquement la structure sémantique du code (ça jouera par exemple, pour la lecture en synthèse vocale).

InDesign ne génère pas cette structure de façon automatique, car une application n’a pas la capacité de comprendre le texte qu’elle met en forme.

Je vérifie aussi que ce code est le plus propre et optimisé possible, pour une lecture fluide ; du mauvais code peut ralentir la liseuse et ça se ressentira en lisant. Le code généré par InDesign est souvent trop complexe et très surchargé, avec des éléments superflus à foison qu’il convient de supprimer ou de simplifier.

Faire un beau livre numérique :
la mise en forme avec des styles CSS

Il faut aussi créer la feuille de styles CSS. Les styles générés de façon automatique par InDesign sont un fourre-tout de détails superflus, avec des doublons, des styles totalement inutiles voire en conflit les uns avec les autres. Personnellement je trouve que c’est plus simple de tout jeter et partir de zéro sur des bases saines.

Le mieux est de faire un joli livre tout en respectant les normes et les bonnes pratiques. J’ai parlé ici du cas des petites capitales. Sans cette optimisation pour simplifier et tenir compte des bonnes pratiques numériques, les styles peuvent ralentir la lecture, voire dans le pire des cas causer des problèmes d’affichage et même faire planter la liseuse.

J’essaie de respecter les choix de la maquettiste au possible, avec les adaptations nécessaires. J’en ai parlé plus en détail en racontant le projet le plus complexe que j’ai encore fait, ici. Par exemple, on évite le texte sur plusieurs colonnes, on n’impose pas de police sur le corps de texte (sauf rares exceptions), et généralement on met les images en pleine largeur ou hauteur de la page (selon les proportions) pour assurer qu’elles seront bien visibles même sur un petit écran de smartphone. Si je pars d’un manuscrit word, sans mise en forme, je crée aussi la charte graphique, pour faire en sorte que le résultat soit beau et agréable à lire, en tenant compte des éventuels souhaits indiqués dans le brief client.

Une fois ma feuille de styles créée, si je fais un autre ebook maquetté selon la même charte graphique, je gagnerai du temps en utilisant les mêmes styles comme point de départ, en les adaptant comme nécessaire. Ça me permet de proposer des tarifs moins chers aux clients fidèles.

Ces étapes aussi seront plus ou moins longues, selon le projet.

Les métadonnées, la table des matières… et EPUBCheck

Il y a aussi une petite foultitude d’informations plus ou moins « invisibles » à renseigner dans le fichier, à commencer par les métadonnées. Les métadonnées décrivent le livre en indiquant son titre, le nom de son autrice ou auteur, l’éditeur, l’isbn, l’image de couverture, le résumé… encore une liste loin d’être exhaustive ! On ne peut pas les voire en feuilletant le livre, mais des métadonnées correctement renseignées seront affichées dans la bibliothèque de la liseuse et permettent de retrouver ses livres lors d’une recherche, par exemple. N’oublions pas la table des matières, moultes indications utiles à l’accessibilité, ainsi que d’autres fichiers « techniques ».

En toute fin, je vérifie l’affichage dans plusieurs applications et liseuses, et je corrige les styles au besoin. Et puis je vérifie que mon fichier est conforme et accessible en le validant avec l’outil officiel, EPUBCheck, et l’outil de vérification d’accessibilité, ACE.

Une image vaut mille mots

Voici quelques captures d’écran tirées d’un epub que j’ai fait pour un cours que j’ai donné à Paris X, sur l’édition numérique. On voit tout de suite la différence.

D’abord du texte au kilomètre, sans aucun style CSS ni structure sémantique. C’est l’équivalent d’un fichier du bloc-notes, en text simple. Sans intervention, le code XHTML exporté par InDesign, si on désactive les styles, ressemblera à peu de chose près, à ceci.

Une image de texte au kilomètre, sans mise en forme ni structure. Un ebook mal structuré ressemblera à ceci, si les styles sont désactivés. — Du texte au kilomètre, sans mise en forme ni structure. Un ebook mal structuré ressemblera à ceci, si les styles sont désactivés.

Maintenant, (en gros) le même ebook, toujours sans aucun style, mais avec une structure sémantique : c’est pas très beau, mais on distingue bien les différents éléments (une synthèse vocale pourra identifier le titre par rapport au texte courant par exemple).

Cet epub a été structuré avec des éléments sémantiques XHTML. C'est la base de la fabrication numérique. — Cet epub a été structuré avec des éléments sémantiques XHTML. C’est la base de la fabrication numérique.

Maintenant il est temps de le rendre un peu plus sexy avec des styles CSS.

Ce texte est structuré avec du XHTML sémantique et mis en forme avec des styles CSS, pour modifier la couleur et la police des titres par exemple. C'est comme ça qu'on fait de beaux ebooks. ;) — Ce texte est structuré avec des balises XHTML sémantiques et mis en forme avec des styles CSS, pour modifier la couleur et la police des titres par exemple. C’est comme ça qu’on fait de beaux ebooks. 😉

Et la suite :

Texte structuré avec des balises XHTML sémantiques et mis en forme avec des styles CSS, pour un epub conforme, accessible, et agréable à lire.

Petit résumé visuel :

4 images de texte pour montrer la différence entre du texte brut, du texte avec une structure sémantique en xhtml, et le même texte mis en forme avec des styles CSS — 4 images de texte pour montrer la différence entre du texte brut, du texte avec une structure sémantique en XHTML, et le même texte mis en forme avec des styles CSS.

J’espère que ce petit exposé permet de lever un peu le voile sur la fabrication de livres numériques ! Si vous avez des questions, ou vous souhaitez rebondir sur ce que j’ai dit, n’hésitez pas à m’en faire part dans les commentaires.

*accessibilité (ou a11y) : dans l’édition numérique, des normes d’adaptations et d’enrichissements du fichier pour tenir compte des besoins spécifiques lors de la lecture, en cas de handicap visuel comme la myopie, la dyslexie, ou la malvoyance. L’epub3 permet des améliorations très conséquentes de l’accessibilité, et ouvre l’accès à la lecture à des populations entières qui y étaient exclues.