Epub : formats & outils

[ndr: Cet article a été commencé fin avril 2020, à la fin du premier confinement covid (le seul pour nous), et je n'ai pas trouvé le temps jusqu'ici de le finir. C'est fait! (En même temps, les 2 Kobos demandées à la région en 2021, ne sont toujours pas là!)]

c'est quoi?

EPUB (acronyme de « electronic publication », « publication électronique » en français, parfois typographié « ePub », « EPub » ou « epub ») est un format ouvert standardisé pour les livres numériques, proposé par l’IDPF. Il est fondé sur le XML. Les fichiers ont l’extension .epub. ¹

Techniquement, il s'agit d'un dossier zippé (une archive zip) qui contient une arborescence définit par la norme OPF.

arborescence type

Les formats d’Amazon Kindle

Il existe plusieurs formats pour la gamme de lecteurs Kindle d’Amazon (liseuses et logiciels de lecture). Les plus courants sont : le format Mobipocket, l’AZW et le KF8 (AZW3), KFX (KF10).

Les liseuses d’Amazon n’acceptent pas le format EPUB. Les maisons d’édition ou les prestataires doivent donc effectuer une conversion du format EPUB pour le rendre compatible avec les lecteurs Kindle.

Ces formats ne supportent pas l'insertion de js, pour fabriquer des livres génératifs.

Les formats Kobo

Kobo accepte le format epub, mais propose aussi un format kepub.epub(double extension) qui supporte l'usage du js.

Alors?

Un epub est donc un container de fichiers xhtml et une structure de fichier, un peu rigide. La dernière version du format, ePub3.0, supporte les fichiers en xhtml5, du HTML5 à la sauce XML, avec, donc, une syntaxe très stricte.

Le HTML(5) est un peu laxiste sur le balisage, le xhtml ne l'est pas :

Toute balise ouverte doit être fermée (sinon c'est ignoré, des fois ça marche en html5) ou doit être auto-fermante. Par exemple, <br>(en html5), doit être écrit <br/> en xhtml5, idem pour <image src="" title="">qui devient <image src="" title=""/>. Et d'autres balises de formulaires (de mémoire). Sinon, ça ne fonctionne pas.
script et style doivent être entourés de CDATA incompréhensibles (sinon ce n'est pas accepté)

Il faut typer script et style (chose qu'on ne fait plus en html5)

<script type="text/javascript">
//<![CDATA[
      ...
//]]>
</script>

<style type="text/css">
/*<![CDATA[*/
        ...
/*]]>
*/
</style>

Bref c'est bien casse-pied à écrire à la main. Donc Sigil a son utilité, en vous donnant un berceau xhtml compatible. Pour comparaison, je vous donne un berceau html et un berceau xhtml (dans l'ordre).

<!doctype html>
<html lang="fr">
  <head>
    <meta charset="utf-8">
    <title></title>
    <style>

    </style>
  </head>
  <body>
     <p>&#160;</p>
  </body>
</html>

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:epub="http://www.idpf.org/2007/ops">
  <head>
  <title></title>
  </head>
  <body>
    <p>&#160;</p>
  </body>
</html>

Dans un epub, la css est placée dans un dossier css, Mr. Coillot serait content ;). Mais on peut en mettre dans la page à la condition de l'encadrer dans des balises CDATA.
il y a forcément un fichier nav.xhtml
il y a forcément à la racine un fichier content.opf (et c'est là que Sigil fait le job en créant le sommaire tout seul comme un grand).
Indesign ajoute un fichier toc.nxc (table of content) qui n'est plus obligatoire dans l'epub3 (me semble-t-il).

Bref écrire du xhtml, ça un vieux goût d'an 2000 (j'étais né, à l'époque le xml était une technologie d'avenir, mais bien chiante à écrire et pas user friendly du tout). Écrire c'est bien, mais il vous faut aussi des outils pour gagner en efficacité…

Les outils

Sigil Ebook

interface de Sigil 1.9.20

Sigil Ebook est un éditeur de livre epub open-source ². La version 1.2 ³ a eu droit à un lifting plus que nécessaire (même pour un logiciel open source). La version actuelle (mars 23), la 1.9.20, rajoute des icônes dans la 3e barre d'outils… (mais je ne sais pas bien ce que cela permet).

Les points forts:

gère toute l'arrière cuisine des fichiers epub (la table des matières, l'arborescence des dossiers, les fichiers de description, la compression)
Propose de modifier les pages dans un éditeur externe (p. ex. ~~Atom~~ ou Nova, à la première utilisation d'un éditeur externe, Sigil ajoute le nom dans la liste des éditeurs externes ) et gère la mise à jour du fichier epub (c'est très pratique)
On peut ajouter des fonctionnalités avec des plugins (référencés dans un forum, c'est bof)
Travaille directement sur le fichier epub, pas un fichier temporaire qu'il faut compresser en final
il y a un lecteur epub intégré pour prévisualiser, mais comme c'est —sur mac— webkit, ce n'est pas forcément le player de la kobo ou de la kindle. Bref c'est surtout utile si on espère rendre lisible son epub sur ordi… Qui peut le moins, peut le moins. C'est assez peu utile en fait.

Les points faibles:

l'éditeur est un peu old school
Les icônes pas ~~toujours~~ explicites
Logiciel peu intuitif (au premier abord)
l'éditeur ne fait pas d'auto-complétion (balises, css…), c'est relou pour écrire du code.
la gestion/installation des plugins n'est pas intuitive.
il n'y a pas d'émulateur de liseuse (c'est un lecteur epub compatible avec la plateforme, p. ex. en js le lecteur accepte l'es6, pas la kobo et pas js du tout sur Kindle)
sur la version 1.2, la fenêtre de prévisu. (lecteur epub) est plantogène.

Pour la prise en main je vous renvoie vers le manuel FLOSS sur le sujet.

Hormis cela, c'est le seul outil à ma connaissance qui permette de travailler directement sur un fichier epub. On peut donc éditer son code dans un éditeur tier, et c'est bien, parce que Sigil est un peu limité. C'est un peu pénible de bosser avec. Certes j'en ai forcément un usage non standard, je fais des livres génératifs, je gratte du code… mais quand même.

Indesign

Et oui, lui aussi sait faire des epubs! De quoi justifier son modèle économique? Que neni, Indesign publie des trucs qui ressemblent à des epubs mais qui n'en sont pas (ou pas tout le temps).

export Indesign

Des epubs avec mise en page fixe (fixed layout)… C'est un peu comme proposer des "voitures électriques diesel", commercialement, on appelle ça des hybrides, en biologie, on parle de chimère quand ça ne peut pas exister hors du laboratoire…
Et bien soyons claires, les epubs fixed layout, ce sont des chimères, des trucs de synthèse qui ressemblent à du pdf, qui ont la couleur du pdf, mais qui sont en xhtml et qui ne s'affichent correctement que sur des ordinateurs…(ouais comme si Adobe savait faire autrement! Deux coups de talon pour Flash foriOS et Flash forAndroid et pour Phonegap racheté et coulé par Adobe… les curieux trouveront).
Un des principe du html est sa portabilité…
On passe suffisamment de temps à tenter de faire des sites compatibles, du responsive design et réfléchir·penser son design pour des supports aux ratios différents…
Mais non, pas ici, ces pauvres chéris de graphistes print ne peuvent pas se mettre la tête à l'envers à penser des design patterns responsive… ces pauvres chéris ont tant à faire pour produire des beaux livres…plein de papier FSC douteux.
Donc un epub fixed layout, c'est un pdf en html…
Une chimère qui agonise sur nos téléphones ou tablettes et que personne ne pense à achever à coups de Docks®.

L'autre version de l'epub "redistribuable" (comme si c'était une honte de donner des livres) est un peu plus respectable, à la condition de travailler correctement sa feuille de style.
Là encore ces pauvres chéris de l'ornementation, gouttent peu au fin fond des onglets des styles. Or, on y trouve de la structure, de la hiérarchie (pas uniquement visuelle).
Indesign est un logiciel de mise en forme de contenu, un vrai logiciel d'ornementation, pas un machin de structuration de données, pas un outil de hiérarchisation de l'info au niveau intime du texte.
Ça oui, ça se la pète sur l'approche de paire, de groupe, d'interlignage, de saut de page mais rien de la structuration de la donnée, sauf à retrousser ses manches et fouir du groin… Car il faut bien l'avouer, Indesign est capable après moult efforts de produire du texte structuré, sémantique, comme on dit (qui signifie).
Pour cela bien-sûr, il faut coiffer sa lampe à carbure et s'enfoncer dans les entrailles des menus.

exportation du balisage dans les styles

Là se trouve le Graal, le balisage. Oui, on peut donner un équivalent de balise à chaque style ajouté au panneau. Comme on peut le voir sur l'image, il est possible de hiérarchiser son contenu en fonction du style à l'export html, donc en epub.
Mais pour quoi faire me direz vous?

Ben, pour donner de la structure à un document qu'une machine pourrait lire et tenter de "comprendre" ou pour le moins de résumer… (je recommande sur le sujet, la lecture de ce pertinent article de Fred Cavazza, sur l'usage des IA dans la bureautique).
Parce que le sujet de la donnée structurée est bien le soucis des machines et du notre, de fait (relire l'article de Fred Cavazza, si ce n'est pas clair).
Pour un humain, muni d'au moins un œil, un texte en grand, en début, c'est très sans doute, un titre. Un texte en moins grand c'est un sous titre, etc, etc. Pour une machine, la chose est moins simple, quand le style (l'apparence) est séparé·e du contenu (en html contemporain et sémantique). La machine ne lit pas de différence, et les éventuelles classes nommées ne sont pas toujours explicites (p. ex. : "style_de_paragraphe_22").
Baliser correctement un texte, c'est s'assurer que la machine, donc, fera correctement la différence entre la colère (mots en majuscule), l'exaltation (mots en majuscule), ou un titre (mots en majuscule) et donc, qu'elle référencera correctement le contenu du texte, avec les bons mots. Tout ça pour dire que si cela n'est pas fait (par le graphiste, toujours lui), un titre est exporté avec la balise <p>, tout comme le sous-titre ou le texte de labeur. Le paragraphe est orné d'une classe éponyme au style (p. ex. : "style_de_paragraphe_22").
Si vous modifiez le style à la main (si vous ajoutez de la couleur, par exemple), une balise <span>avec une classe CharOverride- suivi d'un index (un numéro) est placé. Suivant le contexte de la modification, le nom varie… Ça devient rapidement le basard et le code produit prend de l'embonpoint, sans parler de la css qui s'enrichie de styles particuliers même s'il sont identiques. On ne doit quand même pas espérer d'un programme qu'il s'aperçoive que c'est toujours la même couleur qui est utilisée… :( (qu'il y aurait comme un motif pattern)

<p class="labeur"> <span class="CharOverride-1">autaspe</span> pedis aut aut liatem quate vendi as deniat.</p>

span.CharOverride-1 {
    color:#009fe3;
}

Je ne saurai, donc, trop vous rappeler l'importance de l'usage discipliné des styles de paragraphes et styles de caractères dans un document à imprimer.
Si par inadvertance, le document était exporté en epub, le code n'en serait que plus léger pour ces pauvres petites liseuses qui ont bien moins de ressources calculatoires que nos ordinateurs.

J'en ai fini avec ma vindicte de graphiste web.

Attention, Indesign éjacule de l'epub sans précaution.

Exporter en epub dans Indesign

Rien de spécial dans les réglages (on se demande pourquoi autant d'onglets, pour des usages spécifiques et pointus).

la fenêtre d'export epub

Ô surprise en ouvrant l'epub généré par Indesign, Sigil affiche un message d'erreur concernant la compatibilité du code généré!

export non conforme

Mais en testant l'epub avec epub-checker (cf. en dessous), il n'y a pas d'erreur signalée. Sigil serait en plus d'être relou à l'usage, un peu tatillon avec la norme!

Balisage donc

Le xhtml contenu dans un epub brut d'export. Une classe avec le nom du style Indesign est ajouté.

<p class="titre">pturiamus nitions ecumquis</p>
<p class="labeur"> autaspe pedis aut aut liatem quate vendi as deniat.</p>

Le même contenu structuré, cette fois.

<h1 class="titre1">pturiamus nitions ecumquis</h1>
<p class="labeur"> autaspe pedis aut aut liatem quate vendi as deniat.</p>

On accède aux réglages, via l'onglet "exportation du balisage" de la fenêtre "Option de style de paragraphe".

réglage du balisage Ici, j'ai donné un nom différent à ma classe de titre, qu'on retouve dans la classe du titre (cf l'extrait de code au dessus)

Affinity Publisher 2

Ben non, pas d'export epub dans le menu éponyme.
Pour la communauté Publisher youtubeuse (pas celle de Microsoft, celle de l'éditeur), un epub (format ouvert) est une publication électronique, donc un pdf (format propriétaire) correspond à la définition. Beuargh!
Bref… rien à voir par là pour le moment.

Epub-Checker

Epub-Checker⁴ est un utilitaire qui vous permet de tester la validité de votre epub.
Si vous espérez distribuer votre publication sur des plateformes comme mazon et autres vendeurs de livres, ou simplement le rendre compatible avec une Kobo ou une Kindle, il faudra passer par cette étape : valider votre format.

interface du logiciel

[J'ai pris l'image sur le site de pagina qui est une entreprise Allemande, en vrai, la version est traduite…]

Conconclusion

"Méfiez-vous des hommes en jupe, ils ne vous veulent pas que du bien", disait papi quand il mettait sa robe de dimanche et qu'il prétendait avoir des bonbons dessous.
Je reviendrais sur l'epub, avec un autre article plus synthétique sur un retour d'expérience sur l'écriture de code (html et js) dans un epub pour liseuse Kobo (la·e Kindle ne supporte pas le js. Des fois que ça tenterait des hackers de défoncer sa protection anti-copie depuis l'intérieur, tel un cheval de Troie :).