Créer un livre électronique au format epub3, partie 2 : ePub Anatomy

par | Oct 18, 2014 | L'encre & la plume, Les Pixe-Ailes du Phœnix | 0 commentaires

Dans cette série d’articles, je vais vous livrer ma « recette » pour créer un livre électronique. Cette recette n’est pas la seule, car on peut lire sur la Toile de nombreux tutoriels qui sont capables de vous guider assez loin. Cependant, aucun n’a réussi à regrouper différentes astuces que j’ai mis beaucoup de temps et d’énergie à retrouver par moi-même ou grâce à des morceaux de conseils glanés ici ou là, ou même encore en décortiquant méticuleusement le code de livres électroniques écrits par d’autres.

Précédemment dans la série

Après avoir fait un tour des raisons qui peuvent pousser à mettre un livre au format ePub3 et balayé rapidement les options qui s’offraient à nous pour ce faire, nous avons appris dans la première partie comment structurer son texte dans un logiciel de traitement de texte comme LibreOffice, puis comment exporter le document ainsi mis en forme sous un format ePub avec l’extension Writer2ePub. C’est ainsi que je vous ai laissés, haletants, sur le résultat pas vraiment laid, mais pas vraiment fantastique, de Fée du Logis sur mon iPad dans le logiciel de lecture iBooks d’Apple.

Aujourd’hui nous allons donc aller plus loin et analyser le fichier que nous avons obtenu, afin de comprendre le fonctionnement d’un livre au format ePub3, et commencer, si possible, à réparer ce qui nous semble aller de travers.

Attention, cet article est déconseillé aux personnes qui seraient allergiques aux codes informatiques…

L’incision initiale : sous l’enveloppe de l’ePub

Avant toute chose, il vous faut un ePub sous la main. Soit vous suivez l’article précédent et créez votre propre ePub, soit vous pouvez télécharger la maquette d’ePub3 que je vous livre en téléchargement gratuit. Il vous suffit pour cela de renseigner votre adresse mail (que je n’utiliserai pas à d’autres fins). Vous pouvez trouver cette maquette d’ePub ici :

epub-icon

Téléchargez la maquette d’ePub3

Un fichier ePub n’est pas un fichier de texte simple. C’est plutôt un dossier de plusieurs fichiers différents, codé dans une archive .zip, mais dont l’extension de fichier a été renommée .epub. Tout cela est bien complexe, n’est-ce pas ? C’est pourquoi je préfère utiliser un programme spécifique pour ouvrir l’enveloppe du livre et mettre à nu les rouages internes.

L'ePub habillé, puis déshabillé...

L’ePub habillé, puis déshabillé…

Sur Mac, je me sers de ePub Packager. C’est une application payante, mais très efficace et très pratique : elle extrait pour moi le dossier enfermé dans l’archive et me dépose ce dossier sur le bureau de l’ordinateur. Je n’ai plus qu’à ouvrir le dossier et fouiller à l’intérieur. Je l’utilise également dans l’autre sens, une fois mon livre terminé, pour créer l’archive ePub définitive.

La fenêtre d'ePub Packager

La fenêtre d’ePub Packager

Il suffit de glisser-déposer le fichier ePub dans la fenêtre de l’application, et le scalpel virtuel vous ouvre le dossier.

En bleu les fichiers obligatoires, en vert les fichiers facultatifs

En bleu les fichiers obligatoires, en vert les fichiers facultatifs

Vous allez y trouver deux types de fichiers organisés en un squelette immuable : les fichiers obligatoires, qui sont les organes vitaux de l’ePub (en bleu sur la capture d’écran), et les fichiers facultatifs, qui en sont l’âme (en vert). Ces derniers sont essentiellement les fichiers de contenu de votre livre : le texte, les styles de texte, les images, les fontes, les fichiers audio ou vidéo qui forment votre œuvre. Nous nous y intéresserons plus tard, même si ce sera le plus important pour vous.

Il faut aussi savoir que Writer2ePub crée un fichier ePub2, ce qui n’est pas tout à fait la même chose qu’un ePub3, même si l’ADN est très proche.

Voici un exemple d’ePub3, dont je vous livre la structure plus loin en téléchargement.

Un fichier ePub3, en bleu organes vitaux, en vert âme du livre...

Un fichier ePub3, en bleu organes vitaux, en vert âme du livre…

Les changements sont minimes à cette échelle, puisqu’ils sont essentiellement constitués par l’absence de fichier .ncx, remplacé par le fichier Nav.xhtml. Ces deux fichiers ont la même fonction, ils servent à créer la table des matières du livre (ou Table of Contents en anglais, d’où le nom qui lui est souvent attribué : toc.ncx ou toc.xhtml). Vous remarquerez aussi qu’un fichier est à la fois vital et libre, c’est le fichier .opf, auquel vous pouvez donner le nom que vous voulez, du moment que vous en avez placé un dans le dossier OEBPS de votre livre.

Comme vous le voyez, une bonne part des dossiers est immuable d’un livre à l’autre. Ce qui m’a donné l’idée de me constituer une maquette, une sorte de « template » comme on dit en informatique, un « patron » à réutiliser à volonté lorsque j’ai besoin de créer un nouveau livre.

Les instruments de la dissection : l’éditeur de texte

Pour aller plus loin, vous allez devoir ouvrir les fichiers les uns après les autres pour examiner puis modifier le code. Il vous faut donc un programme que l’on appelle un éditeur de texte. Comme un traitement de texte, mais pour les codes informatiques.

J’utilise pour ma part Espresso sous Mac. Comme la plupart de ses cousins, il est capable de colorer les lignes de code en fonction de leur syntaxe pour bien reconnaître les paramètres et pour ne pas (trop) se tromper. C’est lui qui va vous permettre de corriger et de modifier l’ADN de votre ePub.

Le logiciel Espresso pour Mac, un éditeur de code.

Le logiciel Espresso pour Mac, un éditeur de code.

Grâce à ce logiciel, vous pouvez lire les fichiers codés et les modifier, puis en vérifier l’aperçu (quand le code est connu par le logiciel, ce qui n’est pas le cas de l’opf, par exemple).

Vous remarquerez que les lignes de code commencent toutes par le caractère « < » et se terminent toutes par le caractère « > ». C’est ce qu’on appelle des balises. Ces balises sont des instructions, comme des verbes dans une phrase de français. Tout ce qui sera entre les balises servira à préciser l’ordre donné dans la phrase. Il y a ainsi une syntaxe particulière à respecter, qui demande un apprentissage parfois long…

Mais pour le moment, contentons-nous d’ouvrir les fichiers de notre archive ePub avec Espresso. Pour cela soit vous glissez le fichier sur l’icône d’Espresso dans votre Dock, soit vous faites un clic droit sur le fichier que vous voulez ouvrir et vous choisissez Espresso dans le menu déroulant « Ouvrir avec ».

Les Organes vitaux de l’ePub

Ce sont des fichiers dont il ne faut jamais modifier ni le nom ni la structure, au risque de rendre votre ePub illisible.

Le fichier mimetype

Il ne contient qu’une seule ligne, destinée à faire comprendre à un logiciel comment décoder le livre. C’est un fichier que vous ne devrez jamais modifier, car la ligne de code ne doit pas varier d’un seul caractère.

Le fichier mimetype et son texte invariable au caractère près...

Le fichier mimetype et son texte invariable au caractère près…

Le fichier container.xml

Lui non plus ne devra pas être touché, sauf si vous désirez changer le nom ou l’emplacement de votre fichier .opf, qui est le véritable cerveau de votre livre. Le fichier container.xml sert en effet essentiellement à renseigner l’emplacement et le nom du fichier .opf. Il est enfermé dans un dossier dont le nom ne doit pas être modifié, le dossier META-INF.

Le fichier container.xml dans le dossier META-INF

Le fichier container.xml dans le dossier META-INF

Neurochirurgie du fichier .opf, cerveau de l’ePub

Ce fichier .opf (nommons-le « livre.opf ») est le principal pourvoyeur d’erreurs lors de la construction d’un ePub, car c’est lui qui est le plus compliqué à fabriquer correctement, tant les règles qui dictent sa constitution sont drastiques. En l’ouvrant, vous allez trouver cinq parties distinctes, dont seules quatre seront utiles en ePub3.

Le fichier .opf, sa structure

Le fichier .opf, sa structure

La première partie est constituée de lignes qui déclarant à quels langages informatiques on doit se référer. C’est assez compliqué et il vaut mieux ne rien changer à ces lignes sauf si l’on veut utiliser certaines fonctions propres à des lecteurs ePub, comme iBooks d’Apple par exemple.

<!--?xml version="1.0" encoding="UTF-8"?-->
<package xmlns="http://www.idpf.org/2007/opf" unique-identifier="BookID" version="2.0">
...
</package>
Les lignes de déclaration de l'opf sans metadatas spécifiques à iBooks

Dans ce cas-là, il faut rajouter quelques précisions (vous verrez dans quels cas dans le tableau des metadatas ci-dessous).

Au passage, j’ai rajouté également xml:lang, un paramètre qui indique que nous sommes dans un ePub dont la langue est le français. Vous aurez aussi noté que la version de l’ePub est obligatoirement indiquée.

<!--?xml version="1.0" encoding="UTF-8"?-->
<package xmlns="http://www.idpf.org/2007/opf" version="3.0" xml:lang="fr" unique-identifier="pub-id" prefix="rendition: http://www.idpf.org/vocab/rendition/# ibooks: http://vocabulary.itunes.apple.com/rdf/ibooks/vocabulary-extensions-1.0/" xmlns:epub="http://www.idpf.org/2007/ops" xmlns:ibooks="http://apple.com/ibooks/html-extensions">
...
</package>
Les lignes de déclaration de l'opf avec metadatas spécifiques à iBooks

Les balises metadata

Le premier rôle du fichier .opf est de déclarer les metadatas du livre, c’est-à-dire les informations essentielles sur son identité : la langue dans laquelle il est écrit, son auteur (ou ses auteurs), les éventuels collaborateurs (illustrateurs par exemple), sa date de fabrication, sa date d’édition, son éditeur, une courte description (un résumé par exemple, la 4e de couverture…), son image de couverture, les droits qui y sont liés (licence Creative Commons, Copyright…). Tout cela dans un langage hermétique qui réjouira plus ceux d’entre vous qui ont l’habitude des codes informatiques que ceux qui aiment la littérature. C’est assez abscons, mais c’est indispensable. J’ai donc décrypté pour vous la norme ePub3, et voici la substantifique moelle de ce que j’ai pu en tirer.

Encadrées par les balises metadatas, se trouvent chacun des paramètres identifiant non seulement les données essentielles de votre livre, mais aussi certaines autres données spécifiques pour des lecteurs d’ePub particuliers (dans le cas ci-dessous, pour iBooks d’Apple).

Voici comment Writer2ePub liste ses metadatas, sous une syntaxe obsolète ePub2 :

    <metadata xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:opf="http://www.idpf.org/2007/opf">
        <dc:identifier id="BookID" opf:scheme="UUID">D2ED2FE3-A418-4438-BFFF-F2BFFF17CC42</dc:identifier>
        <dc:contributor opf:role="bkp">Created with writer2epub 1.1.28 by Luca Calcinai http://writer2epub.it</dc:contributor>
        <dc:date opf:event="creation">2014-09-17</dc:date>
        <dc:creator opf:role="aut">Germain Huc</dc:creator>
        <dc:language>fr</dc:language>
        <dc:publisher>d'écaille & de plume</dc:publisher>
        <dc:title>Fée du Logis</dc:title>
        <meta name="writer2epub" content="1.1.28">
        <meta name="cover" content="cover.jpg">
    </metadata>
les metadatas ePub2 de Writer2ePub

Et voici comment les mêmes devraient êtres codées en ePub3 (avec quelques ajouts de mon cru) :

	<metadata xmlns:opf="http://www.idpf.org/2007/opf" xmlns:dc="http://purl.org/dc/elements/1.1/">
	
		<dc:identifier id="pub-id">isbn:9000000000000</dc:identifier>
		
		<dc:contributor>Created with writer2epub 1.1.28 by Luca Calcinai http://writer2epub.it</dc:contributor>
		<meta refines="#contributor" property="role" scheme="marc:relators">bkp
		
		<dc:creator id="creator">Germain Huc</dc:creator>
		<meta refines="#creator" property="file-as">HUC, GERMAIN
		<meta refines="#creator" property="role" scheme="marc:relators">aut
		
		<dc:language>fr</dc:language>
		
		<dc:publisher>d'écaille & de plume</dc:publisher>
		
		<dc:title id="title">Fée du Logis</dc:title>
		<meta refines="#title" property="title-type">main

		<meta property="dcterms:modified">2014-09-17T06:13:00Z

		<meta property="ibooks:version">3.0
		<meta property="ibooks:specified-fonts">true
		
		<meta property="rendition:layout">reflowable
		<meta property="rendition:orientation">portrait
		
	</metadata>
Les metadatas modifiées par mes soins

La liste des metadatas

Dans ce tableau (que vous pouvez manipuler à loisir et dans lequel vous pouvez même faire des recherches…), j’ai récapitulé toutes les metadatas de ma connaissance, pour vous indiquer comment les utiliser. Vous pouvez vous référer à l’exemple de code ci-dessus pour vous ce que cela donne en situation. Vous trouverez la syntaxe correcte et les quelques subtilités.

N’hésitez pas à m’indiquer dans les commentaires si vous trouvez des erreurs, des approximations ou des ajouts à faire. Je ferai bien volontiers les corrections et ajouts qui s’imposent.

TypeMetadataSignificationObligatoire ou OptionnelleValeurs possiblesNote
Identification du livre : Dublin Core (dc)dc:titleLe titre de l'ouvrageObligatoireVotre imaginaire...
Identification du livre : Dublin Core (dc)dc:creatorLe ou les noms des créateurs (auteur, illustrateur)OptionnelVotre imaginaire...
Identification du livre : Dublin Core (dc)dc:identifierUn identifiant pour l'ouvrage, comme l'ISBN par exempleObligatoireVotre imaginaire...
Identification du livre : Dublin Core (dc)dc:publisherL'éditeur de l'ouvrageOptionnelVotre imaginaire...
Identification du livre : Dublin Core (dc)dc:languageLa langue principale de l'ouvrageObligatoireToutes les langues...
Identification du livre : Dublin Core (dc)dc:contributorLe ou les noms des contributeurs de l'ouvrageOptionnelVotre imaginaire...
Identification du livre : Dublin Core (dc)dc:dateLa date de publication de l'ePubOptionnelUne date quelconque au format AAAA-MM-JJ
Identification du livre : Dublin Core (dc)dc:sourceLa ou les sources de l'ouvrage (si c'est un recueil de nouvelles déjà publiées par exemple)OptionnelVotre imaginaire...
Précisions sur une baliserefinesDonne des indications sur une metadata précédenteOptionnelaut = auteur
bkd = book designer
bkp = book producer
edt = editor
cov = cover creator
ill = illustrateur
pbl = publisher
trl = translator
Rendu dans iBooks d'Appleibooks:bindingIndique si dans un livre à mise en page fixe la "pliure" du livre entre deux pages est visibleOptionneltrue, falsedans la balise package doit apparaître une ligne de définition.
Rendu dans iBooks d'Appleibooks:ipad-orientation-lockIndique si le livre est bloqué dans une orientation sur un iPadOptionnelportrait-only, landscape-onlydans la balise package doit apparaître une ligne de définition.
Rendu dans iBooks d'Appleibooks:specified-fontsIndique à iBooks qu'il doit utiliser les fontes intégrées dans l'ePubObligatoire si fontes intégrées dans l'ePub pour iBookstrue, falsedans la balise package doit apparaître une ligne de définition.
Rendu dans iBooks d'Appleibooks:versionIndique la version d'iBooks nécessaire pour lire l'ePubOptionnelUne version d'iBooksdans la balise package doit apparaître une ligne de définition.
Rendu général de l'ePubrendition:flowIndique si le rendu en flux doit être de type "site internet" ou de type "page de livre"Optionnelpaginated, scrolled-continuous, scrolled-doc, auto
Rendu général de l'ePubrendition:layoutIndique si le livre est de type mise en page fixe ou de fluxOptionnelpre-paginated, reflowable
Rendu général de l'ePubrendition:orientationIndique si le livre peut être lu en paysage, portrait, ou les deuxOptionnellandscape, portrait, auto (dans ce cas le texte sera adapté en fonction de l'orientation du système de lecture)
Rendu général de l'ePubrendition:spreadIndique si en mode paysage deux pages sont montrées ou une seule.Optionnelauto, both (dans ces cas-là, deux pages)
none (dans ce cas, une seule page même en paysage)

Le « manifeste »

La deuxième partie du fichier, la plus complexe à mon avis, est celle qui recense toutes les ressources utilisées dans le livre. De la plus petite image jusqu’aux fontes de caractères spécifiques, en passant par chaque chapitre du livre, les éventuelles vidéos ou les bandes-son, les scripts d’interactivité qui permettront aux lecteurs de contrôler des animations, les scripts css des feuilles de style qui vont vous permettre de définir la mise en page… tout, tout, absolument tout le contenu du livre doit être déclaré dans ce « manifeste », et selon une syntaxe là encore très précise.

Voici comment Writer2ePub vous aura organisé cette partie.

    <manifest>
        <item id="ncx" href="toc.ncx" media-type="application/x-dtbncx+xml"></item>
        <item id="style001.css" href="styles/style001.css" media-type="text/css"></item>
        <item id="content0001.xhtml" href="text/content0001.xhtml" media-type="application/xhtml+xml"></item>
        <item id="content0002.xhtml" href="text/content0002.xhtml" media-type="application/xhtml+xml"></item>
        <item id="content0003.xhtml" href="text/content0003.xhtml" media-type="application/xhtml+xml"></item>
    </manifest>
Le manifeste créé par Writer2ePub

Et quant à moi, voici comment j’ai l’habitude d’organiser les choses : en regroupant les types de fichiers.

	<manifest>
  
  		<!-- contenu -->
  		<item id="page_couverture" href="page_couverture.html" media-type="application/xhtml+xml" properties="svg"></item>
  		<item id="couverture" href="Couverture.xhtml" media-type="application/xhtml+xml" properties="svg"></item>
  		<item href="Nav.xhtml" properties="nav" id="sommaire" media-type="application/xhtml+xml"></item>
  		<item href="chapitre-1.xhtml" id="Chapitre-1" media-type="application/xhtml+xml"></item>
  		  
  		<!-- styles -->
  		<item href="styles/styles_couverture.css" id="styles_couverture" media-type="text/css"></item>
  		<item href="styles/styles_roman.css" id="styles_roman" media-type="text/css"></item>
  		
  	  	<!-- fontes -->
  		<item id="epub.embedded.font.1" href="styles/TrajanPro-Regular.otf" media-type="application/x-font-otf"></item>
   		<item id="epub.embedded.font.2" href="styles/socialicious.ttf" media-type="application/x-font-ttf"></item>
   		<item id="epub.embedded.font.3" href="styles/socialicious.woff" media-type="application/font-woff"></item>
   		<item id="epub.embedded.font.4" href="styles/GoudyStM-Italic.otf" media-type="application/x-font-otf"></item>
  		<item id="epub.embedded.font.5" href="styles/GoudyStM.otf" media-type="application/x-font-otf"></item>
  		<item id="epub.embedded.font.6" href="styles/et-line.ttf" media-type="application/x-font-ttf"></item>
  	
  		<!-- images -->
  		<item id="image_couverture" href="images/image_couverture_fee_du_logis.jpg" media-type="image/jpeg" properties="cover-image"></item>
  		<item href="images/logodedplivre_noir.png" id="logo_ecaille" media-type="image/png"></item>
  		<item href="images/photo_gh2014_livre.png" id="photo_auteur" media-type="image/png"></item>
  		<item href="images/PkdE.jpg" id="couverture_poker_d_etoiles" media-type="image/jpeg"></item>
   		  	
  	</manifest>
Mon organisation du manifeste

Vous voyez que j’ai enrichi mon livre avec des fontes de caractères précises, des feuilles de style, des images, le tout regroupé dans des dossiers spécifiques. Il est ainsi plus facile de s’y retrouver par la suite, car si vous oubliez de déclarer ici un seul élément présent dans le livre, celui-ci deviendra illisible par les lecteurs ePub

Mon conseil : à chaque fois que vous ajoutez un fichier dans votre ePub, insérez immédiatement la référence dans le manifeste du fichier .opf.

Comme vous avez aussi pu le constater, chaque fichier doit être suivi d’un code qui explicite sa nature. On appelle ça un type « mime » (non pas à cause du Mime Marceau). Il s’agit cependant de trouver le bon type mime pour chaque fichier. Vous pouvez consulter la liste de Wikipedia, ou bien directement la très longue liste qui se trouve ici. Pour ma part j’ai fait une petite liste des fichiers les plus utilisés dans un ePub, par catégorie, ce qui rend l’intégration dans le manifeste plus aisée.

Classe de fichierExtension du fichiermedia-typeproperties
Chapitre ou partie du livre.html
.xhtml
application/xhtml+xmlnav si contient la table des matières
svg si contient des images svg
scripted si contient du javascript ou une référence javascript
Fonte de caractères.otfapplication/x-font-otf
Fonte de caractères.ttfapplication/x-font-ttf
Fonte de caractères.wofapplication/font-woff
Image.jpgimage/jpeg
Image.pngimage/png
Audio.m4aaudio/mp4
Audio (ne fonctionne pas sur iPad).mp3audio/mpeg
Vidéo.m4vvideo/mp4
Vidéo (ne fonctionne pas sur iPad).webmvideo/webm
Script d'interactivité.jstext/javascript
Feuille de style.csstext/css

Chaque « item » est référencé par un nom (« id ») et par un chemin d’accès (« href »). Vous êtes libre de donner le nom de votre choix au fichier (sachant que le meilleur nom est celui qui vous permettra de savoir très rapidement à quel fichier précisément vous avez à faire), mais le chemin doit suivre les mêmes règles qu’un chemin de fichier classique sur votre ordinateur ou sur un site internet.

Par exemple mon fichier de fonte « Trajan Pro » se situe dans le dossier styles et son chemin sera donc : styles/TrajanPro-Regular.otf.

Enfin, petite subtilité qui m’a posé de nombreux problèmes, les « properties » ou propriétés de chaque élément. Il est impératif d’indiquer certaines particularités de vos fichiers. Si l’un de vos chapitres comporte une partie interactive (disons par exemple des boutons permettant de masquer ou d’afficher du texte caché), vous devrez ajouter sur la ligne de déclaration du manifeste la propriété « scripted ». Si un fichier de contenu contient la table des matières, vous devez indiquer la propriété « nav », s’il contient une image au format .svg, vous devrez indiquer « svg ». Si le fichier fait référence à plusieurs propriétés à la fois, vous devrez les séparer par un simple espace, suivant cette syntaxe :

<item id="page_couverture" href="page_couverture.html" media-type="application/xhtml+xml" properties="svg nav scripted"></item>
Syntaxe des propriétés

Il est à noter que votre livre doit contenir au moins un élément nav. Nous en verrons l’utilité dans le troisième article de cette série.

Cependant, vous pouvez déjà supprimer le fichier toc.ncx, qui ne sert à rien en ePub3

L’épine dorsale : le « spine »

La partie suivante du fichier .opf est appelée le « spine ». C’est l’épine dorsale de votre livre. L’endroit où vous spécifiez quels sont les chapitres qui constituent votre ouvrage, et dans quel ordre ils doivent être lus. Inutile, dîtes-vous ? Pas tant que cela.

Car la subtilité vient du fait que vous pouvez avoir des fichiers qui constituent des annexes de votre livre et qui ne soient pas directement accessibles dans un ordre déterminé. Par exemple, une liste de définitions que votre lecteur pourrait aussi bien consulter au début de l’ouvrage qu’au milieu d’un chapitre. C’est ce qu’on appelle des fichiers « non linéaires » (ou « non linear content » en anglais). Vous ne savez pas dans quel ordre le disposer, mais vous voulez qu’il soit accessible. Vous devez donc le déclarer dans le spine, mais avec la mention « contenu non linéaire » (ou en code : linear= “no”). Ce fichier ne sera donc pas affiché comme un chapitre normal à la suite de son prédécesseur, mais appelé lorsque le lecteur fera une action (par exemple lorsqu’il cliquera sur la miniature d’un tableau).

    <spine toc="ncx">
        <itemref idref="content0001.xhtml"></itemref>
        <itemref idref="content0002.xhtml"></itemref>
        <itemref idref="content0003.xhtml"></itemref>
    </spine>
Le spine créé par Writer2ePub

Quant à moi, dans Fée du Logis, il n’y a pas de contenu non linéaire. Le spine ressemblera donc à ceci :

  	<spine>
  		<itemref idref="page_couverture" linear="yes"></itemref>
  		<itemref idref="sommaire"></itemref>
    	<itemref idref="Couverture"></itemref>
    	<itemref idref="Chapitre-1"></itemref>
  	</spine>
Le spine modifié par mes soins

Le « guide », obsolète en ePub3

Par défaut, comme je vous l’ai déjà dit, Writer2ePub crée une structure ePub2, obsolète, mais permettant de lire votre livre sur toutes les tablettes et toutes les liseuses existantes, au prix d’un alourdissement de votre code, donc du poids de votre fichier, donc de sa réactivité. Ce sera minime, c’est vrai, mais mieux vaut optimiser les choses au maximum. Je préfère donc supprimer cette partie.

Au final, la planche anatomique d’un fichier livre.opf

Voici ce que donne le fichier créé par Writer2ePub au départ :

<!--?xml version="1.0" encoding="UTF-8"?-->
<package xmlns="http://www.idpf.org/2007/opf" unique-identifier="BookID" version="2.0">
    <metadata xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:opf="http://www.idpf.org/2007/opf">
        <dc:identifier id="BookID" opf:scheme="UUID">D2ED2FE3-A418-4438-BFFF-F2BFFF17CC42</dc:identifier>
        <dc:contributor opf:role="bkp">Created with writer2epub 1.1.28 by Luca Calcinai http://writer2epub.it</dc:contributor>
        <dc:date opf:event="creation">2014-09-17</dc:date>
        <dc:creator opf:role="aut">Germain Huc</dc:creator>
        <dc:language>fr</dc:language>
        <dc:publisher>d'écaille & de plume</dc:publisher>
        <dc:title>Fée du Logis</dc:title>
        <meta name="writer2epub" content="1.1.28">
        <meta name="cover" content="cover.jpg">
    </metadata>
    <manifest>
        <item id="ncx" href="toc.ncx" media-type="application/x-dtbncx+xml"></item>
        <item id="style001.css" href="styles/style001.css" media-type="text/css"></item>
        <item id="content0001.xhtml" href="text/content0001.xhtml" media-type="application/xhtml+xml"></item>
        <item id="content0002.xhtml" href="text/content0002.xhtml" media-type="application/xhtml+xml"></item>
        <item id="content0003.xhtml" href="text/content0003.xhtml" media-type="application/xhtml+xml"></item>
    </manifest>
    <spine toc="ncx">
        <itemref idref="content0001.xhtml"></itemref>
        <itemref idref="content0002.xhtml"></itemref>
        <itemref idref="content0003.xhtml"></itemref>
    </spine>
    <guide>
       <reference type="cover" title="Cover Page" href="text/content0001.xhtml"></reference>
    </guide>
</package>
Le fichier .opf créé par Writer2ePub

Et voici ce qu’il devient à l’arrivée une fois que j’ai introduit les corrections qui me semblaient nécessaires, notamment renommer quelques fichiers, l’ajout des polices, des metadatas, l’organisation du « spine » et la suppression du « guide » :

<!--?xml version="1.0" encoding="UTF-8"?-->
<package xmlns="http://www.idpf.org/2007/opf" version="3.0" xml:lang="fr" unique-identifier="pub-id" prefix="rendition: http://www.idpf.org/vocab/rendition/# ibooks: http://vocabulary.itunes.apple.com/rdf/ibooks/vocabulary-extensions-1.0/" xmlns:epub="http://www.idpf.org/2007/ops" xmlns:ibooks="http://apple.com/ibooks/html-extensions">

	<metadata xmlns:opf="http://www.idpf.org/2007/opf" xmlns:dc="http://purl.org/dc/elements/1.1/">
	
		<dc:identifier id="pub-id">isbn:9000000000000</dc:identifier>
		
		<dc:contributor>Created with writer2epub 1.1.28 by Luca Calcinai http://writer2epub.it</dc:contributor>
		<meta refines="#contributor" property="role" scheme="marc:relators">bkp
		
		<dc:creator id="creator">Germain Huc</dc:creator>
		<meta refines="#creator" property="file-as">HUC, GERMAIN
		<meta refines="#creator" property="role" scheme="marc:relators">aut
		
		<dc:language>fr</dc:language>
		
		<dc:publisher>d'écaille & de plume</dc:publisher>
		
		<dc:title id="title">Fée du Logis</dc:title>
		<meta refines="#title" property="title-type">main

		<meta property="dcterms:modified">2014-09-17T06:13:00Z

		<meta property="ibooks:version">3.0
		<meta property="ibooks:specified-fonts">true
		
		<meta property="rendition:layout">reflowable
		<meta property="rendition:orientation">portrait
		
	</metadata>
	
	<manifest>
  
  		<!-- contenu -->
  		<item id="page_couverture" href="page_couverture.html" media-type="application/xhtml+xml" properties="svg"></item>
  		<item id="couverture" href="Couverture.xhtml" media-type="application/xhtml+xml" properties="svg"></item>
  		<item href="Nav.xhtml" properties="nav" id="sommaire" media-type="application/xhtml+xml"></item>
  		<item href="chapitre-1.xhtml" id="Chapitre-1" media-type="application/xhtml+xml"></item>
  		  
  		<!-- styles -->
  		<item href="styles/styles_couverture.css" id="styles_couverture" media-type="text/css"></item>
  		<item href="styles/styles_roman.css" id="styles_nouvelle" media-type="text/css"></item>
  		
  	  	<!-- fontes -->
  		<item id="epub.embedded.font.1" href="styles/TrajanPro-Regular.otf" media-type="application/x-font-otf"></item>
   		<item id="epub.embedded.font.2" href="styles/socialicious.ttf" media-type="application/x-font-ttf"></item>
   		<item id="epub.embedded.font.3" href="styles/socialicious.woff" media-type="application/font-woff"></item>
   		<item id="epub.embedded.font.4" href="styles/GoudyStM-Italic.otf" media-type="application/x-font-otf"></item>
  		<item id="epub.embedded.font.5" href="styles/GoudyStM.otf" media-type="application/x-font-otf"></item>
  		<item id="epub.embedded.font.6" href="styles/et-line.ttf" media-type="application/x-font-ttf"></item>
  	
  		<!-- images -->
  		<item id="image_couverture" href="images/image_couverture_fee_du_logis.jpg" media-type="image/jpeg" properties="cover-image"></item>
  		<item href="images/logodedplivre_noir.png" id="logo_ecaille" media-type="image/png"></item>
  		<item href="images/photo_gh2014_livre.png" id="photo_auteur" media-type="image/png"></item>
  		<item href="images/PkdE.jpg" id="couverture_poker_d_etoiles" media-type="image/jpeg"></item>
   		  	
  	</manifest>
  
  	<spine>
  		<itemref idref="page_couverture" linear="yes"></itemref>
  		<itemref idref="sommaire"></itemref>
    	<itemref idref="Couverture"></itemref>
    	<itemref idref="Chapitre-1"></itemref>
  	</spine>
  
  </package>
le fichier livre.opf modifié par mes soins

L’âme de l’ePub

C’est là le plus intéressant, puisque c’est ici que vous allez mettre en forme l’œuvre déjà écrite.

Cependant, en ouvrant le fichier avec Espresso, voici ce que vous allez trouver :

<!--?xml version="1.0" encoding="utf-8"?-->



 	 	 	 	<link rel="stylesheet" href="../styles/style001.css" type="text/css">
<title></title>











<h1 id="heading_id_1" class="center"><strong>I.</strong></h1>








 

L’agent immobilier l’attendait près de la porte de bois, sanglé dans son costume un peu trop strict, aussi emprunté que s’il avait enfilé une armure médiévale. Un beau jeune homme d’environ vingt-deux à vingt-cinq ans, à la coupe de cheveux impeccablement maîtrisée et rasé de près comme il se doit. Son regard marron perdu dans la rédaction d’un message sur son smartphone.
le chapitre créé par Writer2ePub en langage HTML

Que veulent dire ces codes ?

Ce sont là encore des balises, mais dans un langage différent de celui du fichier livre.opf. Ces lignes sont les mêmes que si votre livre avait été écrit dans un site internet, dans le langage de programmation HTML.

Quant au fichier qui commande la mise en forme de votre texte, c’est le fichier style001.css. En l’ouvrant, voici ce que vous allez lire :

@namespace h "http://www.w3.org/1999/xhtml";
@page
    {
    margin: 5pt;
    }
body
    {
    font-family: "100 %", serif, sansserif;
    }
p
    {
    margin:0pt;
    text-indent:0em;
    line-height: 1em;
    text-align: justify;
    font-size: 1.00em;
    widows: 2;
    orphans: 2;
    }
p+p
    {
    text-indent:1.5em;
    line-height: 1em;
    }
a
    {
    color:#000000;
    text-decoration:underline;
    }
h1
    {
    margin-top:4em;
    margin-bottom:2em;
    page-break-after:avoid;
    font-size: 1.20em;
    text-align: center;
    text-indent:0em;
    }
...
Le fichier style0001.css créé par Writer2ePub

Déroutant, n’est-ce pas ?

C’est tout à fait normal. Vous avez devant les yeux la traduction informatique des styles que vous avez patiemment ciselés dans votre traitement de texte. Il faut seulement vous habituer à cette traduction un peu barbare, afin de maîtriser plus rapidement cette façon de parler, et au bout du compte, corriger les quelques erreurs qui se seront glissées dans la mise en forme (puisque, vous vous souvenez ? mon texte n’avait pas la même apparence affiché par LibreOffice et par iBooks sur mon iPad).

Cet apprentissage déborde largement le cadre de cette série, puisqu’il s’agit d’apprendre deux langages informatiques (assez simples) complémentaires et imbriqués que sont le HTML5 et le CSS3.

Avant de poursuivre, il sera donc nécessaire pour vous d’aller traîner vos guêtres à cet endroit là, où vous pourrez très facilement et gratuitement (ce qui ne gâche rien) apprendre les rudiments qui vous manquent peut-être.

Les cours de HTML5 et CSS3 sur openclassroom

Les cours de HTML5 et CSS3 sur openclassroom

Lorsque cela sera fait, nous reprendrons le cours de cette série passionnante de dissection d’un livre au format ePub3 pour aller encore plus loin, dans l’épisode intitulé : Dessine-moi un ePub.

Pour vous aider à patienter, voici en bonus le lien vers la page de téléchargement de ma maquette d’ePub3. Une fois que vous avez renseigné votre adresse mail (je ne la dévoilerai à personne, je suis moi aussi contre le spam), vous pourrez télécharger le fichier, testé par mes soins sur iPad et validé par les outils officiels de l’IDPF.

epub-icon

Téléchargez la maquette d’ePub3

Pin It on Pinterest

Shares