Créer un Epub
Typographie et mise en page
L'une des craintes des éditeurs tient en leur difficulté à évaluer la qualité graphique du contenu du livre. S'il est difficile de penser en terme de mise en page de la même façon que dans l'édition papier, la mise en forme du texte et la gestion typographique se sont grandement améliorées et permet à présent de jouer assez finement sur le texte.
Ajouter des polices de caractères
Les fontes présentes dans votre ordinateur ne sont pas automatiquement intégrées dans le fichier électronique d'un livre. Cette intégration est optionnelle. Le terminal sur lequel sera lu l'ouvrage pourra faire appel aux fontes qu'il possède lui-même.
Il faut cependant savoir que tous les terminaux ne possèdent pas les mêmes polices. Un lecteur peut aussi installer ses propres polices sur son appareil. Enfin, la licence d'utilisation des polices ne permet pas toujours leur utilisation dans un cadre EPUB ou selon certaines conditions.
Au cours de la réalisation de l'epub il peut donc être nécessaire d'ajouter manuellement une fonte donnée dans le répertoire Fonts du livre.
Quelles polices utiliser ?
Dans le cadre d'une édition électronique, plusieurs critères peuvent être retenus pour le choix des fontes :
- le critère esthétique, bien sûr, puisqu'il va participer fortement à l'aspect graphique du document ainsi qu'à sa lisibilité ;
- la complétude de la fonte, car votre fichier électronique pourra éventuellement être lu dans des contextes informatiques variés, de langues variées ;
- pour la même raison, elles doivent respecter la norme Unicode. Les caractères spéciaux utiles à certaines langues doivent être à leur emplacement Unicode. Une fonte incomplète peut, sur le terminal du lecteur, voir substituer à ces caractères absents des caractères étranges ;
- enfin, il faut analyser les licences pour vérifier les conditions de diffusion de la fonte avec votre document epub. Pensez bien qu'en ajoutant une police de l'epub, vous diffusez la fonte avec le fichier et qu'il suffit au lecteur de votre document de l'extraire pour pouvoir l'utiliser. En cas de non-respect de licence, vous pourriez être accusé de diffusion illicite. Pour ces raisons, nous pensons que l'utilisation de fontes créées pour vos propres collections ou de fontes libres est plus simple et judicieuse. Par ailleurs, afin de respecter au mieux le droit des créateurs et des fonderies, des options d'obfuscation ("masquage") sont spécifiées dans la norme EPUB (http://idpf.org/epub/30/spec/epub30-ocf.html#font-obfuscation).
Importer les fontes dans son projet epub
Comme cela sera le cas pour toutes les ressources à utiliser dans un fichier epub, il est préférable de s'en tenir aux répertoires définis par la spécification.
- Si vous en avez la possibilité, faites une copie de vos fontes dans le dossier Fonts de votre document. Si vous utilisez Sigil, cliquez avec le bouton droit sur le dossier Fonts (Polices) et utilisez [Ajouter fichiers...] parcourez vos dossiers pour trouver le fichier de fonte que vous utilisez (les répertoires par défaut sont, sous Windows, c:/windows/fonts, sous macOS Finder/Bibliothèque/Fonts et sous GNU/Linux /usr/share/fonts ou ~/.fonts).
- Vérifiez éventuellement que le fichier content.opf contient la référence :
<item id="epub.embedded.font" href="MaPolice.otf" media-type="font/opentype"/> - Une fois le fichier ajouté au projet, il vous faudra associer la fonte à la feuille de style pour pouvoir l'utiliser. Dans la feuille de style CSS du document, ajoutez :
-
@font-face { font-family : MaPolice; font-weight : normal; font-style: normal; src : url(MaPolice.otf); }- font-family permet de définir le nom de la fonte tel que vous y ferez référence dans les règles CSS. Choisissez un nom simple, mais représentatif.
- font-weight et font-style permettent de définir la graisse et la forme de votre fonte ; ici, ni l'une ni l'autre.
- src : permet d'associer un fichier .otf ou .woff (.woff à partir de l'epub 3, cf. http://idpf.org/epub/30/spec/epub30-overview.html#sec-fonts)
- Spécifier :
body { font-family: "MaPolice", serif; }Serif ou sans-serif détermine la fonte utilisée par défaut si le moteur de rendu ne lit pas la fonte que vous intégrez. - Apple demande un fichier spécifique pour que les fontes soient reconnues dans iBooks. Il faut extraire le fichier epub et intégrer dans le dossier META-INF un fichier nommé "com.apple.ibooks.display-options.xml" qui contient ces lignes de code :
<?xml version="1.0" encoding="UTF-8"?> <display_options> <platform name="*"> <option name="specified-fonts">true</option> </platform> </display_options>
Notions de mise en page
L'indentation
Vous pouvez décider de l'indentation (l'alinéa) du début de vos paragraphes. Pour ce faire, indiquez dans votre CSS :
p {
text-indent:1.3px;
ou
text-indent:0px; (pas d'indentation)
}
L'indentation n'est pas obligatoire pour tous les textes (la poésie par exemple a parfois des règles spécifiques), c'est à vous de décider de sa taille et du rendu que vous souhaitez obtenir.
L'interlignage
Bien que le lecteur puisse le régler à sa guise, il est important de définir l'espacement entre vos lignes de texte. L'epub étant lu sur différents appareils de lecture, à l'écran plus ou moins grand, il faut que le confort de lecture soit optimal. Il vaut mieux mettre un interlignage important plutôt qu'un trop petit.
On le code par exemple ainsi :
p {
line-height:1.5; (1.5 qui est l'interlignage souvent utilisé, mais qu'il faut bien sûr modifier selon les fontes utilisées)
}
La taille du texte
Il est toujours très difficile de choisir la taille de la fonte puisque selon les dimensions de l'écran elle est plus ou moins lisible. Pour régler ce problème, on peut définir :
p {
font-size:100%;
}
La taille de la fonte s'adaptera alors automatiquement à votre appareil de lecture. Bien évidemment, vous pouvez toujours la spécifier en px ou em ; n'oubliez pas d'effectuer plusieurs tests sur différents moteurs de rendus.
Les marges
On peut décider de donner des marges au bloc de texte.
p {
margin-left:5%;
margin-right:5%;
width:90%;
}
définira une marge de 5% de chaque côté du texte, lequel remplira donc 90% de la page.
On peut également décider de placer une marge en haut (par exemple de 7%) et/ou en bas (ici de 15%) du texte, ce qui donne :
p {
margin-top:7%;
margin-bottom:15%;
}
On peut également choisir de spécifier les marges d'une autre manière :
p {
}
signifie que la marge du haut est de 20px, la marge de droite est de 15px, celle du bas de 10px et enfin celle de gauche est de 5px.
L'alignement du texte
On peut choisir d'aligner son texte à droite (right), à gauche (left), de le centrer (center) ou de le justifier (justify).
p {
text-align:justify;
}
La couleur du texte
On peut évidemment s'adonner à des fioritures, mais c'est déconseillé en terme d'interopérabilité. En effet, il faut penser que les liseuses à encre électronique ont un moteur de rendu en niveaux de gris, et qu'il est fort peu probable qu'un titre en jaune soit assez contrasté pour être lisible. De la même manière, une mise en page sobre permet parfois de mieux rehausser l'intérêt d'un texte : inutile de compliquer une mise en page pour utiliser le plus de classes possible. Néanmoins, il est toujours agréable d'avoir affaire à un epub qui témoigne d'une réflexion graphique.
Pour spécifier la couleur dans la CSS :
p {
color:#070719;
}
On peut trouver les codes couleurs html la page : http://html-color-codes.info/Codes-couleur-HTML/ par exemple, et des réflexions autour du formatage simple de l'epub : http://jiminypanoz.com/2012/03/21/formater-un-livre-numerique/.
L'épaisseur de la fonte
La graisse (épaisseur des caractères) est définie par l'attribut de style font-weight. On peut décider de plusieurs valeurs : light, normal ou bold.
p {
font-weight:bold;
}
Le style du texte
On peut définir le style du texte grâce à font-style : normal ou italic.
p {
font-style:italic;
}
Au final, si l'on assemble toutes ces valeurs, la classe p (paragraphe) donne :
p {
font-family:"MaPolice";
font-style:italic;
font-weight:bold;
text-indent:1.3px;
line-height:1.5;
font-size:100%;
margin-top:7%;
margin-bottom:15%;
margin-left:5%;
margin-right:5%;
width:90%;
text-align:justify;
color:#070719;
}
Parfois, certains moteurs de rendu ne lisent pas la valeur de l'attribut de style : rajoutez !important;, il est probable que cela puisse forcer le moteur à en tenir compte.
font-family:"MaPolice" !important;
Ajouter des lettrines
L'usage de lettrines pour habiller votre texte est possible. Notez seulement qu'il peut y avoir certaines différences d'affichage selon les moteurs de rendu.
Voici une procédure possible :
- Comme vous l'avez appris dans la première partie de cette section, importez si nécessaire la fonte qui sera utilisée pour votre lettrine ;
- Dans votre CSS, il va falloir spécifier que la première lettre de la première ligne du premier paragraphe sera une lettrine. En plus des attributs de style que vous avez donnés à votre p utilisé couramment dans votre epub, nous allons définir une autre sorte de paragraphe. Par exemple :
p.premier { font-family:"nom de la fonte du corps de texte"; text-align:justify; text-indent:0; margin-top:10%; -webkit-hyphens:none; }La propriété -webkit-hyphens est relative à la césure, nous y reviendrons après.
- Puis, nous définissons la lettrine. Pour ce faire, nous utiliserons la balise <span>. Celle-ci permet d'appliquer un attribut de style à une partie précise du texte. On la spécifie ainsi : <span>...</span> et tout ce qui se trouve entre les deux balises est stylé comme on le désire. Nous sommes toujours dans la CSS :
span.lettrine { float:left; font-family:"nom de la fonte de lettrine"; font-size:3em; text-indent:0; margin-right:0.1em; }float:left fait en sorte que la lettrine soit à gauche dans le flux du paragraphe et que le texte l'entoure correctement.
font-family définit le nom que de la fonte que vous utilisez pour la lettrine.
font-size en donne la taille.
text-indent en définit l'indentation (ici elle est nulle, sinon le texte serait décalé à droite).
margin-right permet au texte qui entoure la lettrine de ne pas être collé à celle-ci
Vous pouvez également rajouter d'autres attributs de style comme line-height (interlignage), color (la couleur du texte) etc.
- Dans vos fichiers html, votre premier paragraphe sera donc défini ainsi :
<p class="premier"><span class="lettrine">C’</span>est des histoires dont on ne se vante pas devant tout le monde.</p>
La césure
L'un des gros problèmes relatifs à la lecture numérique est la césure (parfois aléatoire et incontrôlable) définie par certains moteurs de rendu ou appareils de lecture. Pour optimiser au maximum vos epub, et que l'appareil de lecture choisisse le bon dictionnaire de césure, il faut spécifier la langue de votre epub à l'intérieur du code de celui-ci (et non pas seulement dans les métadonnées). Notons que certains appareils de lecture (heureusement de plus en plus minoritaires et, on peut l'espérer, voués à des mises à jour prochaines) ne supportent pas la césure.
Si votre epub est rédigé en langue française par exemple, spécifiez xml:lang="fr" dans vos fichiers xhtml, à la suite de :
<html xmlns="http://www.w3.org/1999/xhtml"
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr">
Vous pouvez également le spécifier dans la balise <body> :
<body xml:lang="fr">
Le standard EPUB 3 permet de spécifier un -webkit-hyphens:none; dans la feuille de style ce qui a pour effet d'annuler toute césure. Cela est particulièrement utilisé pour les titres de chapitres.
Insérer des bordures
Cette capture d'écran d'un epub lu dans l'application de lecture iBooks (sur iPad) permet de comprendre que l'on peut utiliser des bordures afin de créer une mise en page soignée. Ici, l'on utilise la balise <table>, mais sans aller jusque là, plusieurs attributs de style de bordure sont acceptés par la norme epub, par exemple :
p {
border-style:solid;
border-width:15px;
border-color:#ff0000 #0000ff;
}
voir http://www.w3schools.com/cssref/pr_border.asp qui référence les attributs de valeurs des bordures. Attention toutefois, certains ne fonctionnent pas (doubles lignes par exemple) dans l'epub. Vous pouvez intégrer une couleur de fond (background-color), jouer sur les marges etc. (voir la section Enrichir son epub > Chapitre Les bases de l'HTML et du CSS).
Insérer des notes de bas de page
Il y a plusieurs façons de procéder pour insérer des notes de bas de page, selon leur nombre et l'esthétique que vous avez choisi de donner à votre livre. Vous pouvez très bien choisir de les placer à la fin du livre, à la fin de chaque chapitre, ou encore d'utiliser les modalités EPUB 3 afin de les créer en pop-up. Notez que sur un écran tactile, les notes de bas de page peuvent parfois s'avérer problématiques : on peut tourner une page en essayant d'y accéder, le point d'accès est trop petit en taille, etc. Ne pas hésiter, donc, à mettre des numéros de notes de bas de page entre crochets par exemple ou à donner une taille de caractères assez grande pour les numéros de notes de bas de page etc.
Procédure simple
Voyons la procédure pour insérer les notes de bas de page à la fin du livre. Elles fonctionnent par liens hypertexte. C'est un jeu d'allers et retours entre le texte et la note.
- Créez un fichier XHTML que vous positionnez en fin d'ouvrage (généralement). Nommez-le comme vous le voulez, dans notre exemple il s'intitulera "footnotes.xhtml" ;
- Insérez chacune des notes de bas de page comme en paragraphes ordinaires. Vous pouvez leur attribuer une classe spécifique dans la CSS afin de les styler d'une manière particulière (marges entre chaque note par exemple) ;
- Dans votre fichier "footnotes.xhtml", vous avez trois notes de bas de page, présentées ainsi :
<p><a id="footnote1"></a></p> <p><a href="/creer-un-epub/Text/presentation.xhtml#footnote-ref1"><sup>[1]</sup> Philippe Ethuin est chroniqueur à la revue <a href="http://www.galaxies-sf.com/"><em>Galaxie Science-Fiction</em></a></p> <p><a id="footnote2"></a></p> <p><a href="/creer-un-epub/Text/presentation.xhtml#footnote-ref2"><sup>[2]</sup></a> <em>La Guerre infernale</em> de Pierre Giffard, illustrée par Albert Robida, 1908.</p> <p><a id="footnote3"></a></p> <p><a href="/creer-un-epub/Text/presentation.xhtml#footnote-ref3"><sup>[3]</sup></a> Voir Octave Béliard, <em>Occident et Orient, Touche à Tout</em> n° 3 du 15 mars 1914, repris dans <em>Le Bulletin des Amateurs d'Anticipation Ancienne</em> n°36, 2005.</p>
Chaque note de bas de page a un identifiant : la première ici est identifiée par "footnote1", la seconde par "footnote2" etc.
Les liens sont identifiés par <a>.
Le chemin du lien par <href="/creer-un-epub/Text/presentation.xhtml" (ici, toutes nos notes de bas de page pointent vers le fichier xhtml "presentation.xhtml" présent dans le dossier "Text" de l'epub).
Le référent du lien (ce vers quoi il pointe dans le texte) par "#footnotes-ref1". C'est ce qui permettra au moteur de rendu de renvoyer à la note de bas de page spécifique et non pas au début du fichier xhtml contenant les notes de bas de page.
La balise <sup>...</sup> permet d'indiquer qu'il s'agit d'un exposant (généralement le nombre concerné par la note de bas de page).
-
Dans votre fichier XHTML "presentation.xhtml" vous aurez donc :
Présentation par Philippe Ethuin<a href="/creer-un-epub/Text/footnotes.xhtml#footnote1" id="footnote-ref1"><sup>[1]</sup></a> : <p> </p> Des auteurs comme le Capitaine Danrit, Pierre Giffard<a href="/creer-un-epub/Text/footnotes.xhtml#footnote2" id="footnote-ref2"><sup>[2]</sup></a> ou même Octave Béliard<a href="/creer-un-epub/Text/footnotes.xhtml#footnote3" id="footnote-ref3"><sup>[3]</sup></a>, ont écrit de nombreuses guerres futures mettant en scène des engins extrapolés tels des aéroplanes blindés, des dirigeables cuirassés, des chars, des super-canons ou des forts imprenables.</p>
Nous avons donc bien l'indication qu'il s'agit d'un lien grâce à la balise <a>, son chemin qui est href="/creer-un-epub/Text/footnotes.xhtml#footnote1" et son référent (l'identifiant de la note de bas de page) id="footnote-ref1". Le numéro de la note est entre crochets, défini en exposant grâce à <sup> et lié grâce à <a>.
Visuellement, cela donne dans Sigil :
et lorsque l'on clique sur l'une ou l'autre des notes de bas de page, nous arrivons sur le fichier "footnotes.xhtml" où l'on peut voir :
-
Vérifiez que tous les liens fonctionnent.
Procédure "pop-up" liée à EPUB 3
Une nouvelle fonctionnalité de notes de bas de page est possible grâce au standard EPUB 3. Elle n'est pas disponible dans ses versions précédentes et n'est donc lisible que par les moteurs de rendu prenant en compte ce standard. Il s'agit d'ouvrir les notes en mode "pop-up", à l'endroit du texte où l'on clique ou touche, ce qui permet un gain de temps considérable (on évite les allers-retours) et une meilleure expérience utilisateur. Il suffit, pour les lecteurs qui le supportent, de formater les notes ainsi :
<p> 2050 représente, dans l’imaginaire collectif, une somme d’inquiétudes entre changement climatique, fin du pétrole>, et inconnues géopolitiques <a epub:type="noteref" href="#note1">1</a></p>. </p>
Faites bien attention d'inclure le epub:type.
Ensuite, créez un élément <aside> (qui sera automatiquement masqué par le moteur de rendu et qui contient la note de bas de page). Cet élément contient le texte de la note.
<aside epub:type="footnote" id="note1"> <p>Ceci est la note de bas de page pop-up.</p></aside>
L'élément <aside> est défini par epub:type="footnote" pour signifier qu'il s'agit d'un contenu de bas de page. L'identifiant <id> renvoie au lien <href>.
Autres interactions possibles grâce à EPUB 3
Nous ne détaillerons pas ici toutes les procédures relatives à l'intégration d'interactions liées aux normes EPUB 3 (qui utilise HTML5/CSS3). Néanmoins, sachez qu'il est désormais possible de créer des epub enrichis interactifs, notamment grâce au langage Javascript. Le multimédia est largement mis à l'honneur.
Quelques actions possibles grâce à cette norme :
- écrire, dessiner directement sur le texte ou les image ;
- ajouter de l'audio, de la vidéo, des diaporamas ;
- cocher des cases, différents modes de sélection ;
- intégration de quizz, d'animations ;
- etc.
De fait, l'EPUB 3 se rapproche de plus en plus d'un site internet en termes de construction, de langage et d'application. Pour en savoir plus, référez-vous à cet article : http://www.walrus-books.com/2011/06/11-ideas/ qui vous donnera une bonne idée de l'intérêt de ce format. L'EPUB 3 est en quelque sorte le compromis entre une publication "simple" et le livre-application.
Contenu fluide et mise en page fixe (reflowable-text et fixed-layout)
La mise en page d'un epub est directement liée au type de son contenu : de même qu'en édition papier, on ne met pas en page de la même manière une bande dessinée ou un roman.
L'EPUB a la possibilité de proposer deux manières d'appréhender une mise en page : le contenu fluide (flot de texte, ce pour quoi l'EPUB a été créé) et la mise en page fixe. Voyons ensemble ce qui les différencie et dans quels cas les utiliser.
Qu'est-ce que le contenu fluide (reflowable-text) ?
C'est à la base le format que privilégie le livre numérique puisqu'il s'adapte à la taille des écrans sur lesquels on lit le livre numérique (le texte qui s'adapte à l'utilisateur et non l'inverse : c'est là tout l'intérêt de l'epub). Le lecteur, dans cette configuration et selon l'appareil qu'il utilise, peut choisir de régler la taille des caractères, l'interlignage, la fonte, les marges, etc. Le texte est donc "vivant". De fait, il se rapproche plus de la mise en page d'un site internet que de celle d'un livre papier : plus de notions de page ici, le texte est un flux qui s'adapte à l'appareil qui le contient. C'est le format le plus plébiscité par les mises en page contenant du texte et qui ne demande pas de réflexion très graphique (romans, essais etc.). Tout créateur d'epub de ce type doit donc bien comprendre que s'il décide d'une mise en page, le lecteur peut à tout moment la déconstruire. Il faut donc optimiser au maximum sa mise en page afin que cela arrive le moins souvent possible, mais on ne peut pas tout contrôler : c'est la règle du jeu dans un epub.
Qu'est-ce que la mise en page fixe (fixed-layout) ?
Il arrive parfois que contenu et mise en page ne puissent être cohérents qu'en étant fixes. Dans sa configuration, la mise en page fixe (définie par les normes EPUB 3) se rapproche beaucoup d'un PDF et donc de la mise en page papier. En effet, elle est par définition "figée" dans un cadre limité et pensé pour des réalisations où la mise en page graphique est importante et précise (albums jeunesse, magazines, beaux livres). De fait, n'étant pas un flux, elle ne s'adapte pas à tous les appareils de lecture et est donc d'abord créée pour un nombre limité d'appareils. Il faut donc avant tout penser au design de son livre, mais également à son accessibilité.
Créer une mise en page fixe
Pratiquement, voyons comment coder un epub avec une mise en page fixe. Tout d'abord, ne pas hésiter à aller sur le site de l'IDPF qui en documente les spécificités : http://idpf.org/epub/fxl/ et sur le wiki d'EPUB 3 http://code.google.com/p/epub-revision/ (en anglais). La mise en page fixe dépend de la norme EPUB 3.
Dans le content.opf, dans l'ensemble <package>, comme pour tout epub 3, modifiez"version=2.0" en "version=3.0".
Voyons les modifications spécifiques à la mise en page fixe :
1. Dans le content.opf, ensemble <package>, ajouter
prefix="rendition: http://www.idpf.org/vocab/rendition/#"
puis, ajouter
<meta property="dcterms:modified">2012-08-28</meta>
qui stipule la date à laquelle le contenu a été modifié (ne pas oublier donc de changer "2012-08-28" en la date à laquelle vous créez votre epub)
Puis définir les variables de la mise en page fixe. Trois variables définissent la disposition et la restitution (rendition) d'une mise en page fixe :
- layout : qui se définit avec les valeurs reflowable (texte-flux) ou pre-paginated (texte pré-paginé)
- spread : qui se définit avec les valeurs none (aucune), portrait (portrait), landscape (paysage), both (les deux), auto (automatique)
- orientation : qui se définit avec les valeurs auto, portrait ou landscape.
2. Dans le fragment XHTML, ajouter dans l'ensemble <head>
<meta charset="utf-8" />
puisque le jeu d'encodage présent dans la déclaration XML (première ligne) est généralement
encoding="utf-8"
Puis ajouter la balise <meta> avec valeurs width et height afin de spécifier la taille du contenu
<meta content="width=1200,height=1700" name="viewport" />
3. Créer une nouvelle table des matières (TOC / Table of Contents). Créez un nouveau fichier xhtml qui servira de table des matières (par exemple nav.xhtml) et ajoutez l'élément <nav>.
<nav xmlns:epub="http://www.idpf.org/2007/ops" epub:type="toc" id="toc"> 
puis listez vos différents chapitres.
<a> indique que c'est un lien ;
href en donne le chemin ;
<li> signifie "liste" ;
<ol> signifie "liste ordonnée" (les éléments sont dans le bon ordre) ;
4. Dans le content.opf, déclarez dans l'ensemble <manifest>
<item id="toc" href="nav.xhtml" properties="nav" media-type="application/xhtml+xml"/>
5. Rezippez votre epub et vérifiez-le avec EPUBcheck et Readium. Attention toutefois, Apple a quelques spécificités pour la mise en page fixe et il faut jeter un oeil sur les recommandations que la marque fournit afin de ne pas avoir de mauvaise surprise.