Download pdf - er :Creer des ebooks

Transcript
Page 1: er :Creer des ebooks
Page 2: er :Creer des ebooks

CREEZ DES EBOOKS AVEC

SIGIL

Page 3: er :Creer des ebooks

BENOIT HUOT

Page 4: er :Creer des ebooks

Table des matières

1/ Quelques définitions2/ Par où commencer3/ Créer mon premier ePub4/ Pages, titres et tables des

matièresa. Insérer des pages dans

Sigilb. Titresc. Table des matières

5/ Avant de poursuivre6/ L'interface de Sigil7/ Les bases du HTML

a. Les principes de saisieb. Les balises HTML

Page 5: er :Creer des ebooks

8/ Les CSSa. Où se cachent les feuilles

de style ?b. La syntaxe CSSc. Les propriétés CSS

9/ Quelques considérations pourfinir

10/ Le mot de la fin

Crédits

Page 6: er :Creer des ebooks

Bonjour à tous,Vous avez sous les yeux un

tutoriel qui vous expliquera pas àpas comment réaliser un fichierePub, à partir d’outils gratuits et,nous l’espérons, simples. Dans leslignes qui suivent, nous allons tâcherde vous présenter les fonctionsprincipales nécessaires à laréalisation de la majorité des ePub.Si d’aventure vous souhaitiez essayerquelque chose qui ne figure pas dansce livre, n’hésitez pas à me contacter

Page 7: er :Creer des ebooks

(esteriane626ATgmail.com) ou à voustourner vers les tutoriels présentésen fin d’ouvrage.

Sur ce, bienvenue à bord !

Benoit Huot

Page 8: er :Creer des ebooks

Avertissement de rigueurIl existe de nombreux logiciels vous

permettant de créer des ePub rapidement,soit en enregistrant directement votrefichier dans ce format-là soit enconvertissant un fichier déjà existant. S’ilsfont généralement correctement leurtravail, ces outils automatiques onttendance à surcharger le fichierd’instructions inutiles et donc à le rendremoins efficace (le texte pourrait parexemple être plus lent à afficher). Le butétant de vous montrer comment optimiservotre fichier ePub, ce tutoriel abordera delégères notions de programmation et vous

Page 9: er :Creer des ebooks

aurez probablement à modifier du code.Néanmoins, il n’y aura rien de biensorcier. Sur ce, commençons !

Page 10: er :Creer des ebooks
Page 11: er :Creer des ebooks

Retour au Sommaire

Quelques définitions

Avant d’aller plus avant dans le tutoriel,quelques petites définitions pour éviter devous perdre et clarifier certains termes. Sivous êtes déjà familiarisé avec eux, nousvous conseillons de passer directement àla section suivante. Mais un peu derévision n’a jamais fait de mal à personne.

EPub

Page 12: er :Creer des ebooks

EPub (abréviation d’electronicpublication) est un format de fichiersutilisé pour les livres numériques. Lesfichiers au format ePub portent doncl’extension .epub à la fin de leur nom. Dela même manière qu’un .html indique àl’ordinateur d’utiliser un navigateurInternet et un .doc d’utiliser un traitementde texte (généralement Word), un .ePubindique à l’ordinateur d’utiliser unlogiciel conçu pour lire les .epub. Parmices logiciels, on peut citer :

Des extensions pour navigateurinternet tels Epubreader etGrabmybooks pour FirefoxDes applications de l’AndroidMarket tels Google Play, SamsungReader, Aldiko ou Moon+Reader

Page 13: er :Creer des ebooks

Des applications pour iPhone etiPad telles iBooks, Stanza ouBluefire ReaderLes logiciels installés sur lesliseuses telles que le Kobo by Fnacou le Cybook Odyssey

La particularité du format ePub estd’être un format ouvert, i.e. utilisable partous ceux qui le souhaitent, et non lié à unemachine en particulier. Pour lespossesseurs de liseuse, assurez-vous quevotre machine peut le lire car, si le formatePub est bien ouvert, certains fabricants(dont Amazon et son Kindle) ont opté pourdes formats propriétaires et ne peuventdonc pas les exploiter (il existenéanmoins des solutions de conversion,comme l’excellent Calibre [http://calibre-

Page 14: er :Creer des ebooks

ebook.com/]).Signalons enfin que le format actuel de

l’ePub tel qu’il est créé par Sigil estl’ePub 2. C’est ce format que nousabordons dans ce tutoriel.

L’ePub3 est en cours dedéveloppement et sera davantage tournévers des fonctions multimédias. Iln’empêche donc pas la publication d’ePub2 et ne nous concerne pas dans le cadre dulivre numérique non enrichi.

Page 15: er :Creer des ebooks

Les deux types d’ePubIl existe deux grandes catégories

d’ePub : les “fixed layout” et les“reflowable”.

Les “fixed layout” imposent que lalecture du fichier, quel que soit le support,conservera la maquette définie par lecréateur du fichier. C’est un peu comme sivous transposiez directement la maquettecomplète d’un livre sans vous préoccuperdu support sur lequel le fichier sera lu. Ceformat est à privilégier pour les ebooksartistiques et/ou graphiques (comme de laBD) mais c’est tout. En effet, en figeant lamaquette, ce type de fichier ne permet pasde s’adapter correctement à la diversitédes supports (ordinateurs, portables,

Page 16: er :Creer des ebooks

tablettes, smartphones, liseuses…) et desécrans. Imaginez par exemple que voussouhaitiez lire une BD sur votresmartphone. Si les pages sont en fixedlayout, votre téléphone affichera la pageentière sur l’écran, et les textes, devenustrop petits, seront illisibles. Il vous faudraalors zoomer et vous déplacer à la maindans chaque page pour pouvoir suivrevotre histoire. Pas vraiment agréable entermes d’expérience de lecture.

À l’inverse, les “reflowable”s’adaptent au support sur lequel ilss’ouvrent. À l’instar d’une page internet,le logiciel de lecture fait correspondre lefichier au format de l’objet. Le texte estdonc lisible sur n’importe quel écran, sansavoir besoin de zoomer ou d’opérer des

Page 17: er :Creer des ebooks

changements rébarbatifs. Le seul élémentqui change dans un reflowable est lapagination : comme cette dernières’adapte à la taille de l’écran, vousn’aurez pas la même pagination sur unécran de smartphone ou une liseuse. Parexemple, l’ebook L’Incroyable Guide del’autopublication en numérique compte141 pages sur liseuse alors qu’il en fautprès de 594 sur iPhone. Le texte est lemême mais, pour tout lire il faut justeparcourir beaucoup plus d’écrans.

Comme vous le voyez, les ePubreflowable sont les plus pertinents car àmême de convenir à tous les supports.C’est donc de ce type d’ePub que nousallons parler ci-dessous.

Note : Si vous souhaitez plus

Page 18: er :Creer des ebooks

d’informations sur ces deux types defichier, vous pouvez consulter ce billet deJiminy Panoz [http://jiminypanoz.com/2012/03/08/reflowable-text-et-fixed-layout/].

Qu’y a-t-il dans unePub ?Sans rentrer dans les détails, sachez

qu’un fichier ePub est une sorte de fichiercompressé type .zip, dans lequel sontregroupés tous les éléments nécessaires aufichier (polices, textes, images,indications pour les logiciels de lecture).Si vous êtes curieux, vous pouvez

Page 19: er :Creer des ebooks

regarder ce qu’il y a à l’intérieursimplement : il vous suffit de renommer le.epub en .zip puis de décompresser lefichier, comme vous le feriez avecn’importe quel fichier compressé.

Un ePub contient trois éléments :

un fichier nommé mimetype, quiindique au logiciel que le fichierest un ePubun répertoire nommé meta-inf,disposant du fichier container.xml.Ce fichier indique au logiciel oùaller chercher les différentes infosdont il a besoin (texte, polices,nom d’auteur…). Vous n’aureznormalement pas besoind’intervenir sur ce fichier.un répertoire nommé OEBPS qui

Page 20: er :Creer des ebooks

contient tous les élémentsnécessaires au contenu de l’ePub.Ce dernier dispose généralementde trois répertoires (Images pourles… images, Style pour les…feuilles de style, Text pour les…textes) et de deux fichiers. Lefichier content.opf recense toutesles métadonnées du fichier (nom del’auteur, titre de l’œuvre, date depublication…) et le fichier toc.ncxest utilisé pour la table desmatières (toc étant l’abréviation detable of contents, soit table desmatières en anglais).

Sauf grosse exception, vous n’aureznormalement pas à intervenir directementdans ces fichiers. Les programmes que

Page 21: er :Creer des ebooks

nous allons utiliser le font à notre place etd’une manière plus intuitive.

Remarque : Si vous vous amusez àrecompresser le dossier en .zip et à lerenommer en .epub, vous constaterez qu’ilne sera pas reconnu lors de son ouverture.En réalité, un ePub n’a pas l’ensemble deses fichiers compressés car, pour quel’ePub soit lu, le fichier mimetype ne doitpas être compressé. Si vous souhaitez lelire, il vous faut donc compresser ledossier en précisant que mimetype ne doitpas l’être, ou plus simplement utiliser deslogiciels dédiés à la recompressiond’ePubs tels que ePub Packager.

CSS

Page 22: er :Creer des ebooks

Lorsque vous lisez un texte, vousappréciez qu’il soit correctement mis enpage. Par exemple, les pensées peuventêtre en italiques, le titre de chapitrecentré, et le paragraphe commencer par unalinéa. Toutes ces mises en formes sontprécisées au sein des CSS (Cascade StyleSheet, soit feuille de style en cascade enanglais). Les feuilles CSS sont incluesdans l’ePub et répertorient toutes lesmises en forme utilisées.

Vous n’êtes pas obligé de définir desCSS pour votre ePub, chaque supportpouvant appliquer sa mise en forme pardéfaut. Néanmoins, l’utilisation des CSSvous permettra de personnaliser votrelivre, de rendre sa mise en page plusprofessionnelle, et donc plus lisible. Nous

Page 23: er :Creer des ebooks

aborderons donc dans ce tutoriel lamanière d’utiliser les CSS. Commesouvent, vous ne trouverez rien de biensorcier ici et devriez vous en sortir avecun minimum d’organisation.

HTMLSi vous regardez à l’intérieur d’un

fichier ePub, en particulier dans le dossierOEBPS/Text, vous constaterez que lestextes sont en réalité des pages xhtml (oui,les mêmes que celles utilisées surInternet). Un ePub utilise donc lagrammaire du html (le xhtml est juste untype un peu plus abouti que le html

Page 24: er :Creer des ebooks

classique) pour ses textes et un minimumde connaissance de ce langage peut êtrenécessaire. Néanmoins, comme le html estextrêmement simple à utiliser pour dutexte, vous ne devriez pas avoir dedifficultés.

À l’instar des CSS ci-dessus, nousaborderons les notions de htmlnécessaires à l’ePub plus loin dans cetutoriel.

Remarque : En réalité, Sigil peut toutà fait gérer les pages html et xml.Néanmoins, dans le cadre de ce tutoriel,nous considérerons que vous manipulezdes pages xhtml. Ce langage est en effetidéal pour l'ePub : il est plus carré etlogique que le html pur, sans pour autantse révéler aussi étendu que le xml.

Page 25: er :Creer des ebooks
Page 26: er :Creer des ebooks

Retour au Sommaire

Par oùcommencer

Pour réaliser votre fichier ePub, vousallez avoir besoin de quatre éléments :

votre texte à proprement parlerSigil[http://code.google.com/p/sigil/]Notepad++ [http://notepad-plus-plus.org/fr/]Gimp [http://www.gimp.org]

Remarque : Normalement, Notepad++

Page 27: er :Creer des ebooks

n’est même pas nécessaire. Je lementionne pour mémoire car je l’ai utilisélors de la création de mon premier ePubde démo[http://ptgptb.free.fr/ebooks/Ebook_PTGPTB_1-le_plaisir_de_jouer.epub] dans la mesureoù je travaillais à la fois sous Linux etsous Windows et où il me fallait un outilpour faire le passe-plat. Notepad++constitue en effet une sorte de super bloc-notes, bien pratique pour ouvrir lesfichiers créés et modifier directement lecode (pour les CSS et le html donc).Néanmoins, Sigil se charge très bien de lamajorité des tâches.

Page 28: er :Creer des ebooks

Retour au Sommaire

Votre texteNous n’allons pas vous expliquercomment écrire votre texte, vous pouveztrès probablement le faire vous-même.Néanmoins, sachez que, avant de vouslancer dans votre ePub, il vaut mieux quevotre texte soit finalisé. Ainsi, vous nevous concentrerez que sur une seulechose : la manière de créer votre ePub.

Il faut toutefois savoir que Sigil nesupporte pas tous les formats de texte. Parexemple, les .doc et .docx propres à Wordne sont pas compatibles avec Sigil. D’une

Page 29: er :Creer des ebooks

manière générale, vous pourrez importersans problème un fichier html (dans votretraitement de texte, vous devezl’enregistrer au format Page web, filtrée)ou un fichier txt (dans votre traitement detexte, vous devez l’enregistrer au formattexte). Nous vous recommandons toutefoisle format txt car, même si ce format neconserve pas la mise en forme, il fournitun fichier très propre. À l’inverse, lespages html enregistrées depuis untraitement de texte rajoutent tout un tasd’informations superflues qui surchargentvotre document et ralentissent sonexploitation.

Page 30: er :Creer des ebooks

Un truc pour ne pasperdre totalement vosmises en formeSi votre document est long, vous

apprécierez sans doute modérément dedevoir relire tout votre texte attentivementpour le baliser dans Sigil (mettrel’italique, le gras, les titres au bonformat…). Pour cela, nous avons un petittruc qui vous fera probablement gagner dutemps : détourner la fonctionRechercher/Remplacer pour atteindredirectement les éléments qui doivent êtremodifiés.

Il faut au préalable que vous balisiez

Page 31: er :Creer des ebooks

quelque peu votre document avant del’enregistrer au format texte. Ici, rien debien compliqué : il suffit de mettre devantchaque groupe de mots nécessitant unemise en forme particulière une balise quevous êtes sûr de ne pas retrouver dans lecorps du texte. Par exemple, pour chaqueensemble de mots devant être en italique,vous pouvez mettre au début du groupe letexte xxxi. Vous pouvez mettre xxxg pourtout ce qui concerne le gras. Pour lestitres, vous pouvez mettre du t1, t2, etc. ouxxxt1, xxxt2, etc. L’essentiel est que lesbalises retenues ne se retrouvent dansvotre texte que pour les balises et non aucœur du texte (si par exemple, vous avezdécidé de baliser un texte avec le termetitre, il y a des chances que, quand vous

Page 32: er :Creer des ebooks

recherchiez le mot “titre” dans votrefichier texte, il ne vous renvoie pas quevos balises mais également tous les mots“titre” présents dans votre texte).

Une fois que vous avez intégré cesbalises, vous pouvez enregistrer votrefichier au format texte. Quand vous serezdans Sigil, vous utiliserez leRechercher/Remplacer et lui demanderez,

Page 33: er :Creer des ebooks

par exemple, de rechercher tous les xxxi.Il vous suffira alors, à la main (oui, il fautquand même un peu de manipulation àl’ancienne), de mettre le textecorrespondant en italique, puis desupprimer le xxxi. Vous ferez la mêmemanipulation pour les autres xxxi, puispour les autres balises que vous avezprécisées.

Certes, ce processus n’est pas aussirapide que le simple import d’une pagehtml créée avec votre traitement de textemais il présente l’avantage de fournir unfichier propre et donc plus efficace. Et,croyez-nous, en procédant de la sorte,vous gagnerez plus de temps que si vouspréférez enregistrer la page au format htmlpuis effacer toutes les scories superflues

Page 34: er :Creer des ebooks

dans Sigil.

SigilSigil est un logiciel open source (i.e.

enrichi par les utilisateurs qui lesouhaitent et gratuit) pour créer et éditerdes ePub. Il a la particularité d’être enWYSIWYG (what you see is what youget). En d’autres termes, ce que vousvoyez dans Sigil apparaîtra de la mêmemanière dans votre lecteur ePub.

Vous pouvez télécharger Sigil ici[http://code.google.com/p/sigil/].

Page 35: er :Creer des ebooks

Notepad++Comme expliqué plus haut, ce logiciel

est une sorte de bloc-notes avancé. Vousn’en aurez normalement pas besoin mais,si jamais vous souhaitez travailler sur lecode de l’ePub en dehors de Sigil, il voussera très certainement utile.

GimpGimp est un logiciel de retouche

d’images très puissant qui vous permetd’appliquer des effets à vos fichiersimages. Nous ne nous appesantirons pas

Page 36: er :Creer des ebooks

ici sur son utilisation mais sachez qu’ilvous sera très utile pour convertir vosimages (Enregistrer sous), modifier leurtaille et réaliser votre couverture.

Vous pouvez télécharger Gimp ici[http://www.gimp.org].

Page 37: er :Creer des ebooks

Retour au Sommaire

Créer monpremier ePub

Pour ce premier ePub, nous partons duprincipe que vous souhaitez simplementconvertir un texte en ePub, juste pourpouvoir le lire dans ce format, sansconserver la mise en forme. Pour cela,suivez les étapes ci-dessous.

Le texte

Page 38: er :Creer des ebooks

1. Ouvrez Sigil2. Au besoin, créez un nouveau

document (Fichier>Nouveau)3. Dans la fenêtre de droite, tapez

votre texte.

Sigil est réparti en trois grandesfenêtres :

la fenêtre supérieure (1) contientles menus et les raccourcis pour lesfonctions principales,

la fenêtre de gauche (2) liste lecontenu de l'ePub. Nous avons vuplus haut qu'un ePub était une sortede gros zip. Les différents éléments

Page 39: er :Creer des ebooks

présents dans ce zip se trouventdans cette fenêtre de gauche.

La fenêtre de droite (3) est celle dutexte proprement dit.

Page 40: er :Creer des ebooks
Page 41: er :Creer des ebooks

Remarque : Vous pouvez faire aussiun copier/coller de votre documentoriginal dans Sigil.

Les métadonnéesPour qu’un fichier ePub soit valide, il

doit contenir au minimum trois éléments :

le texte proprement ditle nom de l’auteurle titre de l’œuvre

Ces deux derniers éléments font partiede ce que l’on appelle des métadonnées,i.e. un ensemble d’informations quigravitent autour du texte mais qui ne luisont pas liées directement. On peut

Page 42: er :Creer des ebooks

notamment faire figurer dans lesmétadonnées le nom du traducteur, del’illustrateur, la date de publication, lenuméro ISBN (identifiant propre au livreet équivalant au code barre)… Seuls lesnoms d’auteur et d’œuvre sont nécessairesà la validation de l’ePub mais de bonnesmétadonnées, précises et exhaustives,faciliteront le travail des moteurs derecherche et auront un impact sur lestéléchargements de votre ebook. Nousallons voir ci-dessous commentrenseigner facilement ces éléments sousSigil.

1. Dans le menu Édition, sélectionnezÉditeur de métadonnées

2. Renseignez les champs indiqués(Titre et Auteur, au minimum)

Page 43: er :Creer des ebooks

3. Précisez la langue de votre ePub.Par défaut, elle est en anglais, aussisélectionnez French (ou toute autrelangue correspondant à la languede votre texte).

Remarque : Stricto sensu, la précisionde la langue n’est pas obligatoire pour lebon fonctionnement de l’ePub.Néanmoins, elle permettra aux appareilsde lecture de mieux se conformer à lalangue définie, en termes de césure et dedictionnaire notamment.

Vérification de routineNormalement, votre ePub devrait être

Page 44: er :Creer des ebooks

opérationnel. Néanmoins, pour en être sûr,deux petites manipulations s’imposent :vérifier le fichier et l’enregistrer.

1. Pour vérifier le fichier, cliquer surl’icône Valider l’ePub tout à droite(la coche verte). Normalement, unmessage s’affiche vous indiquantque tout est ok. Si Sigil relève deserreurs, il vous l’indique.

2. Enregistrez votre fichier viaFichier\Enregistrer sous.

Voilà, vous venez de réaliser votrepremier ePub. Certes, celui-ci est un peubrut de décoffrage, sans textes ni images,sans même une mise en forme particulière.Vous pouvez néanmoins le lire sansproblème sur les différents supports

Page 45: er :Creer des ebooks

concernés.Nous allons désormais aborder la

manière de mieux organiser votre ePub.

Page 46: er :Creer des ebooks

Retour au Sommaire

Pages, titres ettable des matières

La logique despages dans un ePub

Comme nous l’avons vu plus haut, lefichier ePub adopte une mise en page“reflowable”, i.e. où la pagination liée autexte s’adapte à l’écran qui l’affiche.

Page 47: er :Creer des ebooks

Néanmoins, il est important de savoirqu’un ePub contient lui aussi des pagesmême si celles-ci ne sont pas tout à faitles mêmes que celles auxquelles vous êteshabitué.

Si vous explorez un fichier ePub dansSigil, vous constaterez que, dans ledossier Textes, il y a parfois plusieursfichiers xhtml. Ce sont ces fichiers xhtmlqui constituent les “pages” de l’ePub. Cene sont donc pas des pages au sens où onl’entend habituellement, mais l’équivalentde pages web.

Schématiquement, considérez qu’unepage xhtml correspond à une section biendéfinie de votre texte (chapitre, partie,sous-partie, lexique, remerciements…).Supposons par exemple que vous ayez

Page 48: er :Creer des ebooks

écrit une nouvelle qui se compose de troischapitres. Vous pouvez tout à fait mettreles trois chapitres au sein d’une mêmepage xhtml. Néanmoins, cela impliqueraque la machine (liseuse, smartphone,tablette, ordinateur) chargera dans samémoire l’ensemble du texte en une seulefois alors que vous n’avez pas besoin detout. À l’inverse, si vous décidez de faireun fichier xhtml par chapitre, votresupport ne chargera que la page xhtml encours de lecture, ce qui sera plus rapide etmoins gourmand en énergie.

Qui plus est, le fait de travailler surplusieurs pages xhtml clairement définiesvous aidera à vous organiser et à mieuxvous repérer dans l’ePub. Supposons parexemple que votre texte soit une sélection

Page 49: er :Creer des ebooks

d’articles de votre blog et que, pour uneraison quelconque, vous décidiez demodifier l’un des billets. Vous pouvezfaire un rechercher/remplacer dans votregrosse page xhtml qui contient tous vostextes ou bien vous rendre directement surla page incriminée si vous avez eu labonne idée de réaliser plusieurs pagesdistinctes dans votre ePub.

Comme vous le voyez, le fait deréaliser plusieurs pages dans un ePub estpréférable car cela facilite le chargementdes pages (et les logiciels de lecture desliseuses ne sont pas des foudres de guerrecomme les ordinateurs) et permet demieux organiser son travail. Celaconstitue en quelque sorte la preuve d’untravail soigné et professionnel.

Page 50: er :Creer des ebooks

Retour au Sommaire

Comment insérer despages dans Sigil

La procédure est relativement simple, àpartir du moment où vous vous trouvezdans Sigil. Vous avez, au choix, deuxméthodes : l’insertion de pages àproprement parler et l’insertion de sautsde chapitres.

Insérer des pages àproprement parler

Page 51: er :Creer des ebooks

1. Dans le navigateur du livre (lafenêtre de gauche), positionnez-vous sur Textes

2. Faites un clic droit et sélectionnezAjouter section vierge.

3. Réitérez l’opération autant de foisque nécessaire.

Voilà, vous avez désormais vos pagessupplémentaires.

Insérer des pages grâceaux sauts de chapitre

Lorsque vous lisez un livre, à moinsqu’il ne s’agisse d’un très vieux livre depoche, lorsque vous attaquez un nouveauchapitre, vous commencez votre lecture

Page 52: er :Creer des ebooks

sur une nouvelle page. Ce changement depage facilite votre lecture en marquant unenette différence entre la fin d’un texte (lechapitre précédent) et le début d’un autre(le chapitre suivant).

Sigil conserve cette logique liée auchangement de page de sorte que, pourchaque changement de chapitre que voussouhaitez, il crée une nouvelle page. Voicila procédure à suivre :

1. Sélectionnez la pageSection0001.xhtml

2. Si jamais cette page dispose déjàd’un texte, assurez-vous de placerle curseur à l’endroit précis oùvous souhaitez effectuer lechangement de chapitre. Sigilgénérera en effet le saut de page à

Page 53: er :Creer des ebooks

l’endroit où se situe votre curseur.3. Appuyez sur l’icône Chapter Break

située dans le menu supérieur (ouutilisez le raccourci clavier ctrl +Entrée ou encore Édition\Saut dechapitre)

4. Si besoin, replacez le curseur àl’endroit de votre texte où voussouhaitez insérer un saut dechapitre

5. Réitérez les étapes 3 et 4 jusqu’àobtenir le nombre de pagesdésirées.

Remarque : Vous pouvez aussi insérer

Page 54: er :Creer des ebooks

des sauts de chapitre en utilisant leraccourci ctrl+ Entrée ou en passant par lemenu Édition\Saut de chapitre.

Tout l’intérêt de cette méthode est que

chaque page créée est une sorte de clonede la page référente. Ainsi, si vous avezdécidé d’appliquer des styles particuliersà votre texte, ceux-ci pourront égalementêtre directement appliqués aux autrespages, sans que vous ayez besoin depréciser à chaque fois où aller chercherles styles à utiliser (voir la partie sur lesCSS plus bas).

Renommer les pagesxhtml

Page 55: er :Creer des ebooks

Si vous le souhaitez, vous pouvezrenommer les pages xhtml de votre ePubpour mieux vous y retrouver. Par exemple,plutôt que d’avoir quatre fichiersclassiques (Section1.xhtml,Section2.xhtml, Section3.xhtml,Section4.html), vous pouvez les renommerpour qu’ils s’appellent Chapitre1.xhtml,Chapitre2.xhtml, Chapitre3.xhtml etRemerciements.xhtml.

Là encore, la procédure est simple :

1. Sélectionnez la page que voussouhaitez renommer

2. Faites un clic droit et sélectionnezRenommer.

3. Renommez votre page, enn’oubliant pas de bien mettrel’extension .xhtml

Page 56: er :Creer des ebooks

Pour un traitement correct de votrefichier, quelques précautions d’usage sontà respecter dans le nom de votre fichier.Ainsi, n’utilisez pas de lettres accentuées,de caractères spéciaux (comme les pointsd’interrogation ou d’exclamation) et nemettez pas d’espace.

Remarque : Vous pouvez égalementrenommer votre page en la sélectionnantet en appuyant sur F2.

Page 57: er :Creer des ebooks

Retour au Sommaire

TitresBien. Nous avons donc vu commentorganiser votre ePub en plusieurs pagesxhtml pour lui donner une présentationcohérente. Il est temps désormais des’intéresser aux titres et à lahiérarchisation de votre texte.

Si votre texte est long, il seracertainement divisé en plusieurs parties,voire en sous-parties. S’il s’agit d’uneœuvre de fiction, vous aurez sans doutedes chapitres. Si votre ouvrage est unessai, vous aurez vraisemblablement des

Page 58: er :Creer des ebooks

chapitres, des sous-chapitres, voire dessous-sous-parties. Et, si vous vous êtesdonné la peine d’organiser vos propos,vous aimeriez également que votre lecteurpuisse s’y retrouver facilement.

Les titres sont là pour ça.Ils interviennent dans votre fichier de

deux manières. D’une part, en tant quetitres, ils disposent d’une mise en formespécifique qui les met en avant. Celapermet de rythmer la lecture et de serepérer plus facilement dans le texte.D’autre part, comme ils sont définiscomme titres dans Sigil, vous allezpouvoir créer une table des matièresautomatique rapidement et sans problème.Vos lecteurs pourront ainsi naviguer dansl’ePub directement à partir de cette table

Page 59: er :Creer des ebooks

des matières.Remarque : Dans un ePub, la table des

matières est automatisée et se trouve endehors du texte proprement dit (voussavez, c’est le fichier toc.ncx auquel onn’a pas besoin de toucher). Il n’est doncpas forcément nécessaire de faire figurer,en début ou en fin d’ouvrage, une tabledes matières ou un sommaire similaire àcelui que vous trouvez dans les versionspapier. Seule exception notable à larègle : si vous destinez votre fichier auformat Kindle. Le format de fichier propreau Kindle implique en effet la présenced’une table des matières physique. Si vousenvisagez ce support, il vous faudra doncrajouter votre table des matièresmanuellement dans votre ePub, liant

Page 60: er :Creer des ebooks

chaque section de votre livre au fichierxhtml concerné en lien hypertexte. Ellefera doublon avec le toc.ncx mais c’estune contrainte avec laquelle il fautmalheureusement composer…

La hiérarchie destitresL’intérêt de mettre des titres est de

hiérarchiser l’information. Les titresseront donc des titres de niveau 1, 2, 3…

Un titre de niveau 1 correspondgénéralement à un titre de chapitre ou degrande partie.

Un titre de niveau 2 est une sous-partie

Page 61: er :Creer des ebooks

d’un titre de niveau 1. Il sépare le contenude votre texte en plusieurs grandsensembles clairement identifiables. Parexemple, si vous avez un texte qui a pourtitre de niveau 1 “Les êtres vivants”, vousaurez probablement, en titres de niveau 2,“Les vertébrés” et “Les invertébrés”.

Un titre de niveau 3 constitue lui-mêmeune sous-partie d’un titre de niveau 2.Pour reprendre l’exemple ci-dessus, vouspourriez avoir, en titre de niveau 3 “Lesanimaux marins”, “Les animaux volants”et “Les animaux terrestes”.

Un titre de niveau 4 est une sous-partied’un titre de niveau 3.

Et ainsi de suite.Sachez que vous pouvez aller jusqu’à 6

niveaux de titres, ce qui est normalement

Page 62: er :Creer des ebooks

amplement suffisant. À titre indicatif, cetutoriel dispose de 5 niveaux de titres etcela fait déjà une arborescence biendéveloppée.

Le balisage des titresNormalement, si vous avez bien

préparé votre texte au préalable, voussavez déjà quel texte constitue un titre,quel texte constitue un sous-titre, queltexte constitue un sous-sous-titre et ainside suite. Le balisage est alorsextrêmement simple.

1. Sélectionnez la portion de texte àlaquelle vous voulez appliquer une

Page 63: er :Creer des ebooks

mise en forme de titre

2. Cliquez sur la boîte de dialogue“Normal” et sélectionnez le niveaude titre que vous souhaitez(Heading 1 pour titre de niveau 1,Heading 2 pour titre de niveau2…). Sigil appliquera une mise enforme spécifique pour chaqueniveau de titre. Nous verrons plusloin comment modifier (ou créer !)ces mises en forme pour lespersonnaliser à l’envi.

Page 64: er :Creer des ebooks

3. Répétez l’opération pour tous lestitres de votre document

Page 65: er :Creer des ebooks

Retour au Sommaire

Table des matièresNous avons vu plus haut que l’intérêtd’une table des matières au sein d’un ePubétait son automatisation. Pour fairesimple, votre table des matières est unesorte de grosse page web qui reprend vostitres et qui, lorsque vous cliquez sur l’und’eux, vous amène directement à la pageconcernée. Donc, si vous avezcorrectement balisé votre fichier, vouspourrez générer automatiquement unetable des matières propre et efficace.

Page 66: er :Creer des ebooks

Comment générer unetable des matièresComme cette création est totalement

gérée par Sigil, vous n’avez qu’à suivreles quelques étapes ci-dessous.Maintenant que vous avez créé les titres,il n’y a presque plus rien à faire.

Page 67: er :Creer des ebooks

1. Tout d’abord, affichez la fenêtre deTable des matières via Vue\Tabledes matières ou en appuyant sur alt+ F3

2. Cliquez sur le bouton “GénérerTDM depuis les titres”

3. Une nouvelle fenêtre intituléeSélecteur de titres apparaît, vousprésentant la table des matières. Sicertains titres n’apparaissent pas àce stade, c’est parce qu’ils n’ontpas été correctement balisés.Refermez donc ce sélecteur etvérifiez le balisage. Puis reprenezà l’étape 2.

Page 68: er :Creer des ebooks

4. Le sélecteur vous permet de choisirles titres que vous souhaitez voirapparaître dans votre table desmatières. Si vous voulez en fairedisparaître certains (par exemple,si vous souhaitez vous cantonneraux titres de niveau 1 et 2), il suffitde retirer la coche des casescorrespondantes.

5. Cliquez sur OK. Votre nouvelle

Page 69: er :Creer des ebooks

table des matières estopérationnelle et apparaît dans safenêtre.

6. Par acquis de conscience, cliquezsur l’icône Valider l’ePub tout àdroite (la coche verte).Normalement, un message s’affichevous indiquant que tout est ok. SiSigil relève des erreurs, il vousl’indique.

Remarque : Pour générer la table desmatières, Sigil balise votre texte avec desid, des marqueurs d’identité qui luipermettent de s’y retrouver. Par défaut, illeur donne des noms abscons (commeid_heading_1) mais vous pourrez lesmodifier si besoin dans le code html. Sigilremettra automatiquement à jour la table

Page 70: er :Creer des ebooks

des matières.Comme vous le voyez, le fait de bien

structurer son texte en amont permetensuite de gagner en efficacité.

Page 71: er :Creer des ebooks

Retour au Sommaire

Avant depoursuivre

Nous venons de voir comment réaliser unePub très facilement. Histoire de bienfixer les éléments, voici un rapide résumédes éléments à prendre en compte.

1. Importez ou tapez votre texte.2. Au besoin, organisez-le en ajoutant

des pages pour éviter que tout ne setrouve en un seul bloc.

3. Balisez correctement votre texte en

Page 72: er :Creer des ebooks

termes de titres et de sous-titres.4. Générez votre table des matières.5. Renseignez les métadonnées Auteur

et Titre, ainsi que celles que vousestimez utiles.

6. Lancez la vérification de l’ePub.7. Si tout est ok, enregistrez le fichier

en n’oubliant pas de préciserl’extension .epub. Vous pourrezdès lors le lire sur tous lessupports à même d’ouvrir ce typede fichier.

Nous allons maintenant nous penchersur la manière de personnaliser etd’optimiser votre fichier. Pour cela, nousvous présenterons d’abord les différentesicônes de Sigil, pour que vous soyez enterrain de connaissance. Puis nous

Page 73: er :Creer des ebooks

aborderons les feuilles de style CSS.

Page 74: er :Creer des ebooks

Retour au Sommaire

L’interfacede Sigil

Vous êtes déjà familiarisé avec certainséléments de l’interface de Sigil. Voyonsmaintenant à quoi correspondent lesdifférentes barres d’outils.

Remarque : La présentation ci-dessous est extraite de L'Autopublicationby Walrus de Jiminy Panoz. S’il aborde lacréation d’un ePub, sa lecture se révèlesurtout instructive concernant lesdifférentes plates-formes d’auto-édition et

Page 75: er :Creer des ebooks

la manière de promouvoir son titre (unélément à ne surtout pas négliger si onveut sortir du lot !)

Page 76: er :Creer des ebooks

Retour au Sommaire

La rangéesupérieure

Le premier bloc vous sert à Créer unnouveau fichier, Ouvrir un fichier,Enregistrer et Enregistrer sous.

Le deuxième bloc est constitué deséléments Annuler et Refaire.

Page 77: er :Creer des ebooks

Le troisième fournit les outilscouper/copier/coller.

Le quatrième vous sert à Rechercherdans le texte et Rechercher + remplacer(très utile pour bien coordonner les CSS).

Le cinquième permet de réglerl’affichage du texte et de son formatage :vue normale, vue normale + vue en codeHTML, vue en code HTML. Vous

Page 78: er :Creer des ebooks

utiliserez ces icônes lorsque nousattaquerons l’optimisation du code et lesCSS.

Le sixième et dernier bloc vous permetd’insérer un nouveau chapitre (doncinsère un saut de page numérique) ou uneimage. Cette dernière doit être au formatjpg, gif ou png.

Page 79: er :Creer des ebooks

La rangée inférieureLe premier bloc est un sélecteur qui

vous permet d’organiser votre table desmatières par arborescence (headings).Vous l’avez déjà utilisé pour faire votretable des matières automatique.

Page 80: er :Creer des ebooks

Le deuxième bloc vous permet demettre en gras, italique, souligner ou rayerla partie de texte que vous avezsélectionnée.

Le troisième vous permet d’aligner àdroite ou à gauche, de centrer et dejustifier votre texte. Vous n’aurez

Page 81: er :Creer des ebooks

normalement pas besoin de ces outils sivous utilisez les CSS.

Le quatrième permet d’insérer deslistes à puces ou numérotées.

Le cinquième bloc vous permet defaire un don pour aider au développementde l’application.

Le sixième vous permet de régler

Page 82: er :Creer des ebooks

l’indentation de votre texte. Là encore,recourir aux CSS permet de se passer deces outils.

Le septième et dernier bloc vouspermet de nettoyer le code HTML devotre e-book et de valider votre fichierpour vous assurer qu’il est correct. Vousavez déjà utilisé la coche verte pour vousassurer que votre premier ePubfonctionnait convenablement.

Page 83: er :Creer des ebooks

Pourquoi des outilsqui ne servent àrien ?

Vous avez probablement remarquéqu’une bonne partie des outils proposéspar Sigil ne nous serviront pas dans lecadre de ce tutoriel. Les utilisern’empêchera certes pas votre ePub defonctionner mais, comme le but de cetutoriel est de vous apprendre à réaliserun fichier optimisé, utiliser ces outilsrisque de plus vous gêner qu’autre chose :vous appliqueriez un effet qu’il vousfaudrait ensuite retravailler proprement

Page 84: er :Creer des ebooks

dans le code du fichier. Nous préférons deloin passer directement par le code pourconfigurer dès le départ les bonséléments, sans passer par l’étapeutilisation d’outil + retouche. Cela serapeut-être un peu plus laborieux (et encore,vous verrez que le html et les CSS sontglobalement simples pour les ePub) mais,au final, vous aurez la satisfaction d’avoirréalisé un ePub dont vous n’aurezabsolument pas à rougir auprès desprofessionnels. Un ePub qui, en outre,sera calibré pour éviter les bugs etfaciliter sa lecture.

Page 85: er :Creer des ebooks
Page 86: er :Creer des ebooks

Retour au Sommaire

Les bases du HTML

Bien. Nous entrons désormais dans lapartie cambouis de l’ePub. Pour pouvoirréaliser ce que vous souhaitezproprement, il va vous falloir patauger unpeu dans le code html et les CSS. Pas depanique ! Le html est un langage simple,surtout lorsqu’il s’applique à du texte.Nous allons donc voir dans un premiertemps comment se compose un fichierhtml (ou xhtml), histoire de comprendre lalogique de présentation, puis nous

Page 87: er :Creer des ebooks

aborderons les balises utiles en ePub.Remarque importante : Toutes les

informations qui suivent ont pour but devous familiariser avec le langage html.Mais vous n’aurez nullement à tout saisirà la main, Sigil s’en charge très bien.Seulement, le html, c’est comme lamécanique : si vous voulez commencer àbidouiller dans le moteur, il vaut mieuxque vous compreniez comment çafonctionne pour éviter les erreurs.

Les principes desaisie

Page 88: er :Creer des ebooks

Le html est un langage deprogrammation dérivé de l’anglais. Parconséquent, pour tout ce qui concerne seséléments, n’utilisez PAS de termes avecaccent.

De même, ce langage informatique gèremal les espaces au sein de ses propresbalises. Si vous devez créer des identitésou des classes (nous verrons plus loin dequoi il s’agit), les noms que vouschoisissez devront être attachés et sanscaractère spécifique. D’une manièregénérale, cantonnez-vous à l’alphabet, auxchiffres et aux tirets, vous serez sûr de nepas vous tromper.

Le code d’une page

Page 89: er :Creer des ebooks

webUne page web telle qu’affichée par

votre navigateur Internet est en réalité unepage de texte pur, contenant tout un tasd’instructions d’affichage (tel élément enhaut, tel bloc à gauche…) et de liens versles objets présents sur la page (une image,une vidéo, une adresse mail…). C’estvotre navigateur qui interprète lesdifférentes instructions pour affichercorrectement la page.

Sous Sigil, imaginons une bête pagexhtml qui contient le texte suivant :

Ceci est une page test d’ePub.

Page 90: er :Creer des ebooks

Elle comporte trois paragraphes.Ceci est une page test d’ePub.

Elle comporte trois paragraphes.Ceci est une page test d’ePub.

Elle comporte trois paragraphes.

Si vous copiez et collez ces troisparagraphes dans une page vierge de Sigilet que vous basculez ensuite en vue html(via la barre d’outils ou en apppuyant surF11), vous aurez le texte suivant :

Page 91: er :Creer des ebooks

Présenté comme cela, l’ensembleparaît très abscons mais ne l’est en réalitépas tant que cela. Nous allons décortiquerensemble les différentes parties de ce

Page 92: er :Creer des ebooks

code pour que vous en compreniez bien lalogique.

Le bloc de déclaration

Ce premier paragraphe indique aunavigateur de quoi est composé le fichierqu’il est en train de lire. Il répond à unesyntaxe très précise dont il ne faut pasdévier. Fort heureusement, Sigil génère

Page 93: er :Creer des ebooks

tout seul ce bloc de déclaration.

Le bloc html

Cette ligne indique au navigateur que lereste du texte qu’il va lire utilise lelangage html. C’est dans ce bloc que vouspréciserez la langue de votre page, pouraider le logiciel à effectuer les bonnescésures. Il vous faudra pour cela rajouterle texte xml:lang="fr", pour avoir :

Page 94: er :Creer des ebooks

Remarque : Il vous paraît sans douteétrange de devoir ajouter cette mentionalors que, dans les métadonnées de votrefichier, vous avez déjà précisé la langue.Sachez que ce rajout permet surtout auxmachines de gérer correctement lescésures et les dictionnaires intégrés. Iln’est donc pas nécessaire au bonfonctionnement de l’ePub mais constitueune jolie cerise sur le gâteau.

Le bloc en-tête

Page 95: er :Creer des ebooks

C’est dans ce bloc que vous déclarezcertains informations propres au fichiertel le titre de la page (vous savez, ce quiapparaît en haut de votre navigateurInternet) ou l’endroit où aller chercher lesfeuilles de style.

Le bloc body

Page 96: er :Creer des ebooks

C’est dans ce bloc que vous allez avoirtout votre texte. Ce bloc peut donc serévéler très long mais il ne présente guèrede difficultés.

Le bloc html, retour

Page 97: er :Creer des ebooks

Cette balise clôt le fichier html et nouspermet d’aborder l’élément le plusimportant du html : l’utilisation desbalises.

Page 98: er :Creer des ebooks

Retour au Sommaire

Les balises htmlIl faut savoir que le langage html utilisedes balises, qui agissent comme desmarqueurs dans le fichier. Ainsi, il existedes balises pour les titres, lesparagraphes, les images… Pour fairesimple, imaginez les balises comme desguillemets de dialogue. Quand vous lisezun texte, un guillemet au début vousprécise que le dialogue commence. Et, enfin de dialogue, un second guillemet,légèrement différent du premier, vousindique que le dialogue est terminé. Si

Page 99: er :Creer des ebooks

vous n’avez que le guillemet de départ, lalecture vous gêne car vous sentez qu’ilmanque quelque chose en fin de texte.

Eh bien, pour les balises, c’est pareil :si vous voulez que tout fonctionne, il fautune balise au début et une autre balise,légèrement différente, à la fin. Et aumilieu, le texte auquel s’appliquent lesbalises.

Toutes les balises html prennent laforme <XXX> et </XXX>. La balise<XXX> figure au début, et la </XXX>figure en fin.

Si vous reprenez le code ci-dessus,vous verrez que les balises suiventexactement cette logique. Ainsi, vous avezen haut un <html> et tout en bas un</html>. Ou encore <p> et </p>.

Page 100: er :Creer des ebooks

Certaines balises sont également pluslongues que d’autres. Par exemple, <htmlxmlns="http://www.w3.org/1999/xhtml">est légèrement plus complexe qu’unsimple <html>. C’est tout simplementparce que, pour certaines balises, vouspouvez rajouter des informationscomplémentaires à l’intérieur. Nousverrons plus bas les infoscomplémentaires qu’on peut rajouter,l’essentiel étant ici de se souvenirqu’elles se mettent dans la premièrebalise.

La logique des cumulsde balise

Page 101: er :Creer des ebooks

Vous avez de la chance, le langagehtml est un langage relativement simple ettrès logique. Si vous l’abordezcalmement, vous verrez qu’il n’est guèresorcier pour peu que l’on garde enmémoire quelques grands principes.

Nous avons déjà abordé le premierprincipe, celui des balises ouvrantes etfermantes. Nous allons désormais aborderla question des balises multiples.

Imaginons que vous souhaitiez qu’unmot d’un paragraphe se trouve en italiquealors que le reste du paragraphe ne l’estpas. Votre paragraphe normal se trouveraencadré par les balises <p> et </p> (lesbalises pour les paragraphes) alors quevotre mot sera encadré par les balises <i>et </i> (les balises pour l’italique).

Page 102: er :Creer des ebooks

Supposons que dans la phrase “Je suis icimais pas là”, vous souhaitiez mettre enitalique le “ici”. On aurait alors le codesuivant :

Comme vous le voyez, le code pourl’italique (<i> et </i>) se trouve imbriquédans le code du paragraphe (<p> et </p>).L’imbrication des balises est aussi simpleque ça : la dernière balise ouverte doitêtre la première fermée. Comme dans unjeu de poupées russes, vous vous assurezque la plus petite (ici la plus imbriquée)est complète (i.e. ouverte et fermée) puisvous passez à la poupée russe un peu plus

Page 103: er :Creer des ebooks

grande puis à celle encore plus grande etainsi de suite.

Cela vous semble compliqué ? Labonne nouvelle, c’est que Sigil est équipéd’un outil puissant pour nettoyer votrecode html (c’est l’icône du pinceau à côtéde la coche verte) et qu’il peut rattrapervos erreurs d’inattention. L’autre bonnenouvelle est que, pour un fichier texte,vous aurez relativement peu de balisesimbriquées les uns dans les autres.

Les balises dehiérarchisationIl est maintenant temps de vous

Page 104: er :Creer des ebooks

présenter les principales balises que vouspourrez utiliser. Plutôt que de toutes vousles lister abruptement, nous avons préféréles regrouper par catégories. Cescatégories ne sont en rien officielles, ellesnous ont simplement paru plus pratiquespour la compréhension des différentesbalises.

Nous allons commencer par les balisesde hiérarchisation, i.e. celles qui vouspermettent d’organiser votre document.Elles sont de deux grands types : lesbalises de titre et les balises deparagraphe.

Les balises de titreSelon le niveau que vous souhaitez

Page 105: er :Creer des ebooks

pour votre titre, ces balises prendront laforme d’un h (heading en anglais, pourtitre) suivi d’un numéro. Ainsi vous avez :

<h1> </h1> pour les titres deniveau 1<h2> </h2> pour les titres deniveau 2<h3> </h3> pour les titres deniveau 3<h4> </h4> pour les titres deniveau 4<h5> </h5> pour les titres deniveau 5Et <h6> </h6> pour les titres deniveau 6

Remarquez qu’il n’existe pas debalises pour des titres de niveau 7 et

Page 106: er :Creer des ebooks

inférieurs. Six niveaux de titre sontlargement suffisants pour couvrir lahiérarchisation de votre texte mais, sivous souhaitez aller au-delà, vous pouvezencore ruser en ajoutant des listes à puces,pour distinguer les différents éléments.

Lorsque vous avez appliqué les stylesà vos titres pour préparer la table desmatières, Sigil a attribué ces balises auxtextes concernés (vous pouvez le vérifieren basculant en vue html, via la barred’outils ou en appuyant sur F11).

La balise de paragrapheElle est toute simple : <p> et </p>.

Tout paragraphe de la page commencerapar <p> et se terminera par </p>.

Page 107: er :Creer des ebooks

Les balises de mise enformeAux commencements d’Internet, les

CSS et leur mise en forme n’existaientpas. Néanmoins, les concepteurs avaientpris soin de créer quelques balises demise en forme applicables directementdans le code html. Ces dernières sonttoujours utilisées et vous permettentd’alléger le code de vos CSS (donc derendre vos fichiers plus efficaces).

ItaliqueVous pouvez utiliser indifféremment

<i> </i> et <em> </em>, interprétés de la

Page 108: er :Creer des ebooks

même manière par les logiciels.Néanmoins, si vous tenez à être le pluslogique par rapport au code html,privilégiez le <em> </em>.

GrasVous pouvez utiliser indifféremment

<b> </b> (b comme bold, soit gras enanglais) et <strong> </strong> interprétésde la même manière par les logiciels.Néanmoins, si vous tenez à être le pluslogique par rapport au code html,privilégiez le <strong> </strong>.

SoulignéLe html utilise les balises <u> </u> (u

Page 109: er :Creer des ebooks

pour underlined, soit souligné en anglais)pour le soulignement. Nous ne lesmentionnons ici que par soucid’exhaustivité car ces balises sont àbannir dans un ePub : elles sont toutsimplement une source d’erreur. Qui plusest, le soulignement sert déjà pour lesliens hypertextes. L’utiliser pour une autrefonction sera donc plus source deconfusion qu’autre chose.

ExposantSi vous utilisez des abréviations, vous

aurez peut-être recours à des “1er”, “2e”,“3e” et ainsi de suite (notez au passageque l’abréviation correcte utiliseseulement le e et non le ème comme on le

Page 110: er :Creer des ebooks

voit trop souvent avec 2ème, 3ème, etc.). Lee de ces abréviations est en exposant, i.e.plus petit et surélevé par rapport à la lignede base de votre texte. Pour le mettre enexposant, il faudra utiliser les balises<sup> et </sup>.

Par exemple, pour le texte “1er prix :une tablette tactile”, votre code aura laforme suivante :

Remarque : L’utilisation de la balise<sup> permet effectivement de relevervotre texte par rapport à la ligne de base.Néanmoins, elle ne diminue pas la taille

Page 111: er :Creer des ebooks

de la lettre. Pour que la mise en forme soitharmonieuse par rapport au reste duparagraphe, il faudra donc veiller àdéfinir un style pour cette balise, ce quenous verrons plus loin.

Quelques balisessupplémentaires

Retour à la ligneParfois, vous voudrez que votre texte

retourne à la ligne sans forcément générerun nouveau paragraphe (par exemple,vous voulez faire une énumération avecdes tirets et ne voulez pas d’interligne

Page 112: er :Creer des ebooks

accru entre chaque ligne). Dans ce cas-là,vous pouvez forcer le renvoi à la ligne enutilisant <br />. Notez que,exceptionnellement, cette balise n’a pasbesoin d’une balise fermante.

Exemple

Liens hypertexteexternes

Vous souhaiterez peut-être insérer dans

Page 113: er :Creer des ebooks

votre fichier des liens vers des pagesweb. Dans ce cas-là, vous le ferez avecl’instruction <a href="XXX"> </a> (a estl’abréviation de anchor, soit ancre enanglais), où vous remplacerez XXX parl’adresse web que vous désirez.

Il est préférable que vos lienshypertextes soient clicables depuis untexte, et non une image. En effet, lesliseuses ne traitent pas les lienshypertextes sur les images. Donc, si vousles mettez, sachez qu’ils ne seront pastoujours actifs et que tout dépendra dusupport de lecture.

ExempleSupposons que, dans le texte “Plus

d’infos sur Google”, vous souhaitiez que“Google” soit cliquable et vous amène à

Page 114: er :Creer des ebooks

la page d’accueil du moteur de recherche.Le code html sera alors :

Liens hypertexte au seinde l’ePub

Parfois, notamment si votre texte estlong, vous aurez envie de permettre àvotre lecteur d’aller directement à unesection de votre page xhtml ou de votredocument. Il ne s’agit donc pas ici deliens externes qui renvoient vers uneadresse extérieure mais de liens internes

Page 115: er :Creer des ebooks

propres à votre fichier. On distingueradeux types de liens internes : ceux quirenvoient à une autre page xhtml de votreePub et ceux qui renvoient à la même pagexhtml de votre ePub mais à un autreendroit (comme pour une note de bas depage).

Dans le premier cas, le code reste lemême que ci-dessus (soit <ahref="XXX"></a>), à ceci près que, enlieu et place du XXX mentionné ci-dessus, vous indiquez le nom de la pagexhtml que vous souhaitez.

Normalement, l’ensemble desdocuments xhtml se trouvent dans le mêmesous-dossier de l’ePub (généralementText). Vous n’avez donc pas besoin depréciser l’emplacement du fichier.

Page 116: er :Creer des ebooks

Cependant, s’il s’avère que, pour uneraison ou une autre, les textes liés ne setrouvent pas dans le même sous-dossier, ilfaudra alors préciser le chemin à suivre.

ExempleVous avez un texte qui dit “Vous

pouvez en savoir plus sur l’auteur ici”, où“ici” renvoie à une notice bibliographiquede l’auteur présente en fin de fichier.Cette notice se trouve dans une page xhtmlintitulée notice.xhtml. Le code est alors lesuivant :

Page 117: er :Creer des ebooks

Supposons maintenant que cette noticese trouve ailleurs, dans un répertoireintitulé Text. Le code serait alors :

Les .. indiquent qu’il faut remonterd’un dossier dans l’arborescence (i.e.passer du dossier où se trouve le xhtml audossier racine) puis se rendre dans ledossier Text pour y trouver la bonne page.

Liens hypertexte au seind’une même page

Page 118: er :Creer des ebooks

Si vous souhaitez qu’au sein d’unemême page xhtml, un renvoi s’effectue(comme pour un appel de note de bas depage, par exemple), vous allez avoirbesoin de deux éléments supplémentaires :id et #.

Id (pour identification) est un marqueurqui agit comme une sorte de drapeau.Vous l’intégrez au sein d’une balise déjàexistante, vous lui attribuez un nom et,lorsque vous vous référerez à ce nom, lelogiciel le retrouvera automatiquement.Comme il s’agit d’un marqueur qui permetau logiciel de se repérer, les id de chaquepage doivent être uniques pour empêchertoute confusion. Le nom attribué à une idne peut donc pas être repris pour une autreid de la même page.

Page 119: er :Creer des ebooks

Remarque : Vous pouvez en revancheattribuer le même nom à des id qui setrouvent dans des pages différentes. Eneffet, lorsque vous faites un lien vers uneautre page, vous précisez le nom de lapage, ce qui empêche la confusion avecune autre id.

# est pour sa part un marqueur quiindique au logiciel de rester dans la mêmepage xhtml. Lorsque vous saisissez le lien,en lieu et place du XXX, vous précisez #suivi du nom de l’id que vous aurezdéfinie. Le logiciel se chargera de vousemmener directement au textecorrespondant.

ExempleVous souhaitez que, dans votre texte, le

terme “Calembour” soit cliquable et vous

Page 120: er :Creer des ebooks

amène en bas de fichier pour une noteexplicative mentionnant “Définition deCalembour : jeu de mots”. Pour cela, vousallez devoir indiquer, pour “Calembour”,qu’il y a un lien à suivre et, pour“Définition de Calembour : jeu de mots”,qu’il y a un drapeau auquel se rendre. Cedrapeau doit avoir un nom, que nousappellerons “note1”.

Le code sera le suivant :

Le #note1 indique au navigateur derechercher l’id note1 dans la même page

Page 121: er :Creer des ebooks

xhtml que le texte. Le navigateur se renddonc au paragraphe défini par id="note1"et l’affiche.

Remarque : Nous ne saurions tropvous conseiller, si vous multipliez lesrenvois, de rester logique dans les nomsque vous donnez à vos id. Cela sera certesun peu plus laborieux mais vous permettraau final de mieux vous y retrouver.

Liens hypertexte versun point précis del’ePub

Vous aurez parfois besoin d’insérer unlien vers un endroit précis d’une autrepage xhtml. Supposons par exemple que,

Page 122: er :Creer des ebooks

dans un ePub de recettes de cuisine, unepage liste tous les ingrédients nécessaireset la manière de les préparer et que voussouhaitiez insérer un lien, non pas vers lapage des ingrédients mais vers uningrédient en particulier. Il va vous falloirindiquer au logiciel dans quelle page allerchercher, et à quelle ancre s’attacher.

Le code est ici un mélange de deuxcodes que nous avons vus ci-dessus : lelien vers une autre page et le lien au seind’une même page. Il prendra la formesuivante :

Page 123: er :Creer des ebooks

N’oubliez pas dans le nom de la page,de bien préciser le nom complet, avecl’extension (xhtml ou html la plupart dutemps).

ExempleReprenons l’idée de la recette de

cuisine. Vous souhaitez que votre texte “1kg de pommes de terre” renvoie vers lapage ingredients.html, à la balisepommesdeterre. Vous aurez alors :

Dans la page où vous insérez le lien :

Et dans votre page d’ingrédients, pour

Page 124: er :Creer des ebooks

le paragraphe pommes de terre :

Renvois multiplesGardez enfin à l’esprit que votre texte

est un texte vivant, dans lequel le lecteurdoit pouvoir naviguer facilement etreprendre sa lecture après avoir lu votrerenvoi. De la même manière que vousavez défini des liens du texte vers votrerenvoi, il vous faudra donc définir desliens de votre renvoi vers le texte,toujours avec <a href="XXX"> </a>.

Page 125: er :Creer des ebooks

ExempleReprenons le cas de la note relative

aux calembours. Conformément à nosrecommandations, vous avez décidé demettre un renvoi à la fin de vos notes pourretourner au corps du texte. Vous avezdeux id à définir : celle pour leparagraphe contenant l’appel de note,pour pouvoir y revenir par la suite et cellepour la note. Nous appellerons ces deuxid “Onote1” (o pour origine) et “note1”.Enfin, nous insérerons en fin de note letexte “[Retour]”, cliquable pour revenirau texte.

Le code sera alors le suivant :

Page 126: er :Creer des ebooks

Pour la note à proprement parler :

Liens mailVous pouvez également vouloir que le

lien n’ouvre pas une page Internet mais unmail dans lequel il soit possible d’écrire.Dans ce cas-là, la balise est juste un peuplus précise : <a href="mailto:XXX"> oùvous remplacerez XXX par une adressemail valide.

Page 127: er :Creer des ebooks

ExempleDans votre page de présentation, vous

souhaitez laisser la possibilité au lecteurde vous contacter et indiquez donc lamention suivante : “Si vous avez desremarques ou des suggestions, n’hésitezpas à me contacter à[email protected].”.

Le code html sera le suivant :

Remarque : Dans le code html,

Page 128: er :Creer des ebooks

l’adresse mail de cet exemple est répétéedeux fois. La première indique en réalitéau navigateur le lien à suivre pourenvoyer le message tandis que la secondeaffiche l’adresse à l’écran. Mais vouspouvez tout à fait avoir comme texte “Sivous avez des remarques ou dessuggestions, n’hésitez pas à me contacterici” avec un “ici” cliquable qui ouvre lamessagerie. Le code sera alors :

Page 129: er :Creer des ebooks

Insertion d’imageLes critères pour insérer une image

Vous souhaiterez très probablementinsérer des images dans votre texte, qu’ils’agisse d’un logo ou de votre couverture.Sigil vous permet d’insérer trèsfacilement de telles images viaÉdition\Insérer une image ou le bouton dela barre d’outils. Cependant, vous devezconnaître quelques éléments pourprocéder correctement.

En premier lieu, le format de fichier. Ilexiste de multiples formats d’affichaged’image mais les ePub n’en gèrent quetrois : les .jpg, les .gif et les .png. Lechoix d’un format ou d’un autre pour votreePub a assez peu d’incidence sur la

Page 130: er :Creer des ebooks

qualité d’affichage donc il vous suffit devous assurer que vos images sont au bonformat.

En deuxième lieu la taille de votrefichier image. Nous avons vu plus hautqu’un ePub était un fichier compressé typezip qui contenait différents éléments, dontdes images. Donc, plus le fichier de votreimage sera lourd et plus l’ePub le sera. Sivous avez peu d’images, ce n’est pasforcément gênant. Néanmoins, si votreePub contient beaucoup d’images, il peutêtre intéressant que vous réduisiez enamont le poids de vos fichiers pour éviterde vous retrouver avec un ebook deplusieurs megaoctets.

Pour réduire le poids de vos fichiers,vous avez deux solutions (que vous

Page 131: er :Creer des ebooks

pouvez combiner) : réduire le nombre depixels qui composent votre image etprivilégier le format jpg. En effet, leformat jpg inclut, à la base, unecompression d’image si bien qu’uneimage en jpg ne fera pas le même poidsqu’une image en .gif.

Pour réduire le nombre de pixels devotre fichier, il va vous falloir passer parun logiciel de retouche d’image. Gimp[http://www.gimp.org] est gratuit etpermet très bien cela :

1. Ouvrez votre image dans Gimp2. Allez dans Image\Échelle et taille

de l’image3. Assurez-vous de voir le symbole

d’une chaîne reliée, entre la largeuret la hauteur de votre image. Cela

Page 132: er :Creer des ebooks

signifie que votre image seramodifiée de façon proportionnelle.Au besoin, cliquez sur la chaînebrisée pour qu’elle soit à nouveaureliée.

4. Modifiez la largeur ou la hauteurde votre image.

5. Enregistrez votre image.6. Réitérez si besoin les étapes 1 à 5.

La balise html pour l’insertiond’image

Si vous fouillez dans le code html devotre ePub, il est bon de savoir à quoicorrespond la balise pour insérer desimages. Cette dernière prendra la formesuivante :

Page 133: er :Creer des ebooks

Le alt indique sommairement à quoiressemble l’image et est utilisé pour lessites internet. Si l’image vient à manquer,vous passez la souris dessus et le textes’affiche. Bien évidemment dans un ePub,votre image se trouve dans le fichier doncvous n’avez pas besoin de mettre un texteen cas d’absence.

Le src indique le chemin et le nom del’image à utiliser. Il prend généralement laforme suivante : src="../Images/XXX" oùXXX est le nom de votre image. Commevu plus haut, les .. indiquent qu’il fautremonter d’un dossier dansl’arborescence (i.e. passer du dossier

Page 134: er :Creer des ebooks

Texte où se trouve le xhtml au dossierracine) puis se rendre dans le dossierImages pour y trouver la bonne image.

Enfin, n’oubliez pas de mettre le nomcomplet de votre image, avec sonextension (jpg, gif ou png dans le cadred’un ePub) et en respectant bien lesmajuscules et les minuscules.

Les balisesd’organisationNous entrons ici dans des balises un

peu plus complexes et spécifiques, quivont vous permettre d’affiner laprésentation de votre fichier. Elles seront

Page 135: er :Creer des ebooks

utilisées conjointement avec les CSS.

SpanNous avons vu qu’il existait des

balises pour les paragraphes, les titres,etc. Curieusement, il ne semble pas enexister pour des mots ou des lettres seuls.En réalité, c’est la balise <span> </span>qui remplit cet office.

Utilisée seule, <span> </span>n’ajoute rien au code html, il s’agitsimplement d’un élément neutre.Néanmoins, tout l’intérêt de cette baliseest qu’elle peut être renseignée (par un id,par exemple), ce qui lui permet depouvoir grandement interagir avec lesCSS.

Page 136: er :Creer des ebooks

ExempleVous rédigez un texte sur les films

d’action et faites référence à Piège decristal, le premier film de la trilogie DieHard, avec Bruce Willis. Vous nesouhaitez pas surcharger votre texte avectrop d’informations filmiques et décidezde les faire figurer en note de bas de page.

Votre texte sera le suivant :

Ici Piège de cristal est suivi d’une note

Page 137: er :Creer des ebooks

en exposant (1) et, en cliquant dessus,vous arrivez à votre note. Les balises<sup></sup> permettent de générerl’exposant. Les <a href="#note1"> </a>précisent le renvoi à suivre. Enfin, les<span id="Onote1"></span> définissentle marqueur qui permettra au lecteur dereprendre sa lecture après avoir lu la note.

Votre note de bas de page aura quant àelle le code suivant :

Page 138: er :Creer des ebooks

Ici, nous appliquons l’id à la balise<p> car nous avons besoin que le lecteurcommence la note au début du paragraphe.

DivNous venons de voir que la balise

<span> s’applique à des élémentstextuels. Si vous souhaitez pouvoirappliquer des CSS à des blocs de texte etnon à des éléments disparates, vous aurezbesoin de la balise <div> </div> (divpour division en anglais). L’utilisation decette balise indique au navigateur deconsidérer l’ensemble du texte inclus danscette balise comme un gros bloc sur lequelagir.

Nous verrons au chapitre CSS

Page 139: er :Creer des ebooks

comment l’utiliser conjointement avec lesfeuilles de style.

Page 140: er :Creer des ebooks

Retour au Sommaire

Les CSS

Nous abordons à présent la manière deréaliser des feuilles de style en cascade etde les appliquer aux pages xhtml de votreePub. Pour cela, nous allons procéder enplusieurs temps. Tout d’abord, nous vousindiquerons l’endroit où mettre votrefeuille de style ainsi que le moyen d’yfaire appel depuis vos pages xhtml. Nousaborderons ensuite la manière dont seprésente un style CSS avant de détaillerles propriétés les plus souvent utilisées

Page 141: er :Creer des ebooks

dans un ePub. Nous terminerons enfin parquelques trucs auquel il faut faire attentionpour avoir un fichier vraiment nickel.

Comme souvent, il n’y a rien devraiment sorcier dans les outils àmaîtriser, il suffit juste d’un peu delogique et d’organisation.

Page 142: er :Creer des ebooks

Retour au Sommaire

Où se cachent lesfeuilles de style etles styles

Quelques définitionsTout d’abord, précisons la différenceentre les styles et les feuilles de style.

Un style est un ensemble de paramètresgraphiques (espacement, police, taille dutexte…) qui s’applique à une partie

Page 143: er :Creer des ebooks

donnée du texte ou de l’image.Une feuille de style est pour sa part le

fichier dans lequel sont enregistrés tousles styles. Vous n’avez donc pas besoind’une feuille de style par style. Nous vousrecommandons, pour des raisons desimplicité, de n’avoir qu’une seule feuillede style dans votre ePub.

Où trouver la feuillede styleFort logiquement, la feuille de style se

trouve dans le dossier Styles de l’ePub.Néanmoins, il faut savoir que les feuillesde style sont une “coquetterie” de

Page 144: er :Creer des ebooks

présentation et ne sont nullementnécessaires au bon fonctionnement del’ePub. Si aucun style n’est défini, lelogiciel utilise sa mise en page par défaut,tout simplement. Donc, si vous ouvrez unePub que vous avez téléchargé, ne vousétonnez pas si vous ne trouvez aucunefeuille de style.

Insérer une feuille de style vierge dansvotre ePub est très facile. Nous allonsvoir comment procéder avec Sigil.

1. Sélectionnez le dossier Style.2. Faites un clic droit et sélectionnez

Ajouter feuille de style vierge3. Un fichier nommé Style0001.css

apparaît. Vous pouvez si besoin lerenommer. Dans ce cas, n’utilisezpas d’accents et n’oubliez pas de

Page 145: er :Creer des ebooks

conserver l’extension de fin .css.

Remarque : Les fichiers quiconstituent le texte de votre ePub sont auformat xhtml. Le document qui regroupevos styles est dans un autre format (CSS)et doit donc porter l’extension .css pourque le navigateur sache de quoi il s’agit.

Indiquer à Sigil qu’ilfaut utiliser la feuillede styleMaintenant que vous avez créé votre

feuille de style, il est nécessaire que Sigilsache qu’il doit l’utiliser et pour quelles

Page 146: er :Creer des ebooks

pages. Pour cela, vous devez insérer unlien dans chaque fichier xhtml où voussouhaitez utiliser les CSS. Nous vousconseillons d’insérer ce lien dans tous vosfichiers xhtml, pour que votre ePub soithomogène en termes de mise en forme.

Rappel : Ce lien peut êtreautomatiquement intégré dans vos pagesxhtml si vous utilisez le saut de chapitrepour insérer des pages (voir Insérer despages). Pour chaque page ainsi créée,vous devrez cependant nettoyer la balisebody, en remplaçant <body style=""> par<body>. Faute de quoi le lien vers votrefeuille de style ne s’appliquera pas.

Le lien se met dans le bloc en-tête devotre page xhtml, i.e. la partie du fichierqui commence par <head> et se termine

Page 147: er :Creer des ebooks

par </head>. Nous vous conseillons demettre le lien directement à la suite desbalises <title></title>.

Le lien prendra la forme suivante :

Où XXX.css est le nom de votre feuillede style CSS. Si vous n’avez pas renommévotre feuille de style, le texte à insérersera donc :

Page 148: er :Creer des ebooks

À l’instar des images, le texte“../Styles/Style0001.css” précise lechemin à suivre pour le logiciel, depuis lefichier xhtml jusqu’à la feuille de style.Les .. indiquent qu’il faut remonter d’undossier dans l’arborescence (i.e. passerdu dossier Texte où se trouve le xhtml audossier racine) puis se rendre dans ledossier Styles pour y trouver la feuille destyle.

Le texte rel="stylesheet" précise que lelien est une feuille de style. Quant au textetype="text/css", il précise que cette feuillede style sera en CSS et composée de texte.

Point important : les liens au sein del’ePub sont particulièrement sensibles àl’usage des majuscules et des minusculesdans les noms de fichier. Si votre feuille

Page 149: er :Creer des ebooks

de style se nomme STYLE.css et que vousfaites appel, dans le lien, au fichierstyle.css, le logiciel ne trouvera pas lafeuille correspondante et Sigil renverraune erreur lors de la vérification. Veillezdonc à bien respecter l’usage desmajuscules et des minuscules. Pour unemeilleure facilité, nous vous conseillons,soit de tout mettre en minuscules(styles.css), soit de ne mettre la majusculequ’au premier caractère du nom de votrefichier (Styles.css).

Rappel : Les noms de fichier et le textedes CSS ne doivent pas utiliser de lettreaccentuée. Les accents sont autorisésuniquement dans le texte de vos pagesxhtml.

Page 150: er :Creer des ebooks

ExempleVous avez un fichier ePub constitué de

quatre pages xhtml, respectivementintitulées couverture.xhtml,chapitre1.xhtml, chapitre2.xhtml etchapitre3.xhtml. Vous disposez d’unefeuille de styles intitulée StyleePub.css,qui se trouve dans le dossier Styles del’ePub.

Les blocs en-tête des quatre pagesxhtml seront les suivants :

Pour le fichier couverture.xhtml :

Page 151: er :Creer des ebooks

Pour le fichier chapitre1.xhtml :

Pour le fichier chapitre2.xhtml :

Page 152: er :Creer des ebooks

Et pour le fichier chapitre3.xhtml :

Remarque : Le texte est à chaque foisrigoureusement le même, vu que vousvous référerez à chaque fois à la mêmefeuille. Nous l’avons indiqué ici par soucid’exhaustivité, pour que vous compreniezbien la nécessité de déclarer la feuille destyle dans toutes les pages de votre ePub.

Page 153: er :Creer des ebooks

Remarque : Généralement, les balises<title> et </title> encadrent le titre de lapage html qui apparaît au sommet de lapage lors de la lecture. Nous ne l’avonspas indiqué ici pour ne pas surcharger lecode de l’exemple. Néanmoins, vouspourriez tout à fait avoir<title>Couverture</title>, <title>Chapitre1</title>, <title>Chapitre 2</title> et

Page 154: er :Creer des ebooks

<title>Chapitre 3</title>

Page 155: er :Creer des ebooks

Retour au Sommaire

La syntaxe CSS

La structure desfeuilles CSS

À la différence des pages xhtml de votreePub, vous n’avez pas besoin de précisertout un tas d’éléments au début de votrepage CSS. Le simple fait que le nom dufichier se termine par .css indique aulogiciel de quoi il s’agit. Votre feuille destyle CSS sera donc une simple liste des

Page 156: er :Creer des ebooks

styles CSS utilisés et de leurs paramètres.

Les classesNous avons vu que les principales

balises liées au texte sont les titres (h1,h2, h3…), le paragraphe (p) et la baliseneutre <span>. Seulement, votre texterisque fort d’avoir des mises en formesupplémentaires, comme les appels denote, les notes de bas de page, les textesen exposant (1er, 2e, 3e…), etc. Il peutmême y avoir des paragraphes où voussouhaitez appliquer un style autre quecelui normalement défini pour lesparagraphes.

Pour tous ces éléments, on ne passe pas

Page 157: er :Creer des ebooks

par des balises mais par ce que l’onappelle des classes. Une classe est unecatégorie pour laquelle vous définissez unstyle particulier. Vous pourrez donc avoirune classe notedebasdepage, une classeappeldenote, une classe signature, etc. Cesclasses peuvent, au choix, s’appliquer àtoutes les balises ou à un type précis debalises.

Faire appel à une classe estrelativement simple : il suffit de lepréciser dans la balise ouvranteconcernée en ajoutant class="XXX" oùXXX est le nom que vous aurez attribué àvotre classe. Notez la syntaxe anglaise :class s’écrit sans le e en html. Et, commed’habitude, rappelez-vous de n’utiliser nilettres accentuées, ni caractères spéciaux

Page 158: er :Creer des ebooks

dans vos noms de classes sous peine deproblème d’affichage.

ExempleVous disposez de remerciements que

vous souhaitez mettre à la fin de votretexte. Au sein de votre feuille de style,vous avez défini une classe“remerciements” avec la mise en formeadéquate (nous verrons comment un peuplus loin) et souhaitez l’appliquer. Votreparagraphe aura alors la forme suivante :

Page 159: er :Creer des ebooks

La syntaxe CSSAu sein d’une feuille CSS basique, un

style CSS peut se présenter de troismanières :

XXX {YYY:ZZZ;}.XXX {YYY:ZZZ;}AAA.XXX {YYY:ZZZ;}

Le premier s’applique aux balises et leXXX est remplacé par le nom de la balisecorrespondante (p, h1, sup, etc.).

Le deuxième s’applique aux classes etle XXX est remplacé par le nom de laclasse précédé d’un point.

Le troisième s’applique aux classesliées à une balise spécifique. AAA estremplacé par la balise et XXX par le nom

Page 160: er :Creer des ebooks

de la classe, avec un point pour les relier.YYY désigne pour sa part une

propriété CSS (espacement, couleur,taille, alignement…) et ZZZ la valeur dela propriété (espace de 2 points, couleurrouge, taille de 12 points, alignementjustifié…). Pour cette dernière,lorsqu’elle est chiffrée, il importe depréciser quelle unité utiliser (le point, lepixel, le pourcentage…). Nousdétaillerons plus loin ces unités.

Lorsque vous tapez vos CSS, faitesbien attention à la présence de laponctuation : le point en début s’il s’agitd’une classe, les accolades pour ouvrir etfermer les propriétés du style, et le pointvirgule à la fin de chaque propriété (iln’est pas obligatoire sur la dernière ligne

Page 161: er :Creer des ebooks

mais cela évitera des oublis fâcheux !).

ExempleNous souhaitons que tous les

paragraphes soient justifiés (i.e. alignés àgauche et à droite) et, en parallèle, quecertains textes aient une taille decaractères un peu plus grande. Nousallons donc définir deux styles différents.Le premier s’appliquera aux paragrapheset le second sera une classe qui nes’appliquera que si on fait appel à elle.Nous appellerons cette classe “big”. Lapropriété pour le texte justifié est text-align et celle pour la taille de la police estfont-size. Les deux CSS auront donc laforme suivante :

Page 162: er :Creer des ebooks

Et le code de votre texte se présenteracomme suit :

Page 163: er :Creer des ebooks

Ce qui, en version graphique, donnerala chose suivante :

Ceci est un paragraphe

qui, en plus du style p,utilise le style défini par laclass “big”. Remarque : Vous pouvez attribuer

plusieurs class en même temps à unebalise. Il suffit juste de les séparer par unespace. Par exemple, vous pourriez tout àfait avoir un <p class="big textegras"> oùs’appliqueraient à la fois la class big et laclass textegras. Si jamais il y a desconflits entre les class, c’est la dernièrequi a préséance.

Page 164: er :Creer des ebooks

Si nous souhaitons que le corps de1.2em ne s’applique qu’à des paragrapheset pas à des titres, la CSS prend alors laforme suivante :

Remarque : Les CSS étant des feuillesde style en cascade, elles dépendent lesunes des autres. Pour le style p.big, laclasse big découle du style p. Vous n’avezdonc pas besoin de repréciser toute lamise en forme du style p. En précisantp.big, la CSS sait qu’elle doit appliquerd’abord les styles du paragraphe puisceux de la classe. Comme pour ci-dessus,si jamais il y a des informations

Page 165: er :Creer des ebooks

contradictoires, c’est la dernière indiquéequi a préséance (big dans le cadre denotre exemple).

Les CSS “enrichies”L’exemple ci-dessus est relativement

simple car chaque style n’utilise qu’unepropriété. Néanmoins, tout l’intérêt desCSS est de pouvoir combiner cesdernières en fonction de ses besoins. Pourcela, il suffit simplement de mettre lespropriétés CSS et leurs valeurs les unes àla suite des autres, séparées par le pointvirgule. À noter que vous pouvez tout àfait, pour plus de lisibilité, insérer dessauts de ligne et/ou des espaces après

Page 166: er :Creer des ebooks

chaque point virgule. Les espaces et sautsde ligne n’ont en effet pas grandesignification en CSS, les éléments les plusimportants étant les accolades, les pointsvirgules et le point pour la classe.

ExempleNous souhaitons désormais que notre

paragraphe soit justifié et avec un corpsde 1.2em. Dans ce cas, la CSS est lasuivante :

Ou, si vous préférez :

Page 167: er :Creer des ebooks

Les unités de mesureNous avons vu plus haut qu’une

propriété CSS était suivie d’une valeuraprès ses “:”. Avant de détailler lespropriétés les plus communes, il est utilede préciser quelles mesures peuvent êtreutilisées et comment bien les employer.

Les valeurs absoluesIl existe deux grands types de valeurs :

Page 168: er :Creer des ebooks

les absolues et les relatives. Les valeursabsolues ne changent pas quel que soit lesupport utilisé. Par exemple, si vousdéfinissez qu’une image fait 300 pixels delarge, elle fera toujours 300 pixels delarge, que ce soit sur un smartphone, uneliseuse, une tablette ou un écrand’ordinateur. Dans ce cas-là, il y a deschances que l’image soit trop grande surun smartphone et trop petite sur un écrand’ordinateur. Cela ne signifie cependantpas que vous ne devez utiliser aucunevaleur absolue, simplement qu’il fautgarder en tête cette contrainte.

Vous aurez principalement deux typesde valeurs absolues : le pixel (px) et lepoint (pt). Le pixel est une unité pour lesimages et la maquette en général. Il

Page 169: er :Creer des ebooks

précise combien de points de l’écranutiliser. Par exemple, si votre écrand’ordinateur a une résolution de 1024 x768 pixels, cela signifie que, si vousdemandez à votre image de faire 2000pixels de long, elle débordera sur ladroite de l’écran.

Le point définit quant à lui la hauteurde la police que vous utilisez(théoriquement, un point correspond à1/72e de pouce soit 0,352 mm) et s’utilisedonc pour le texte. Si vous êtes habitué autraitement de texte, vous utilisez déjà lepoint comme unité de mesure pour la taillede votre police.

Les valeurs relatives

Page 170: er :Creer des ebooks

À l’inverse des valeurs absolues, lesvaleurs relatives sont définies par rapportà d’autres. Par exemple, elles prennent encompte la taille de l’écran ou la hauteurde la ligne. Elles permettent donc des’adapter aux différents supports surlesquels apparaîtra le fichier, afind’obtenir un affichage harmonieux. Ilexiste deux grands types d’unitésrelatives : le % et le em.

Le % est, comme son nom l’indique, unpourcentage. Par défaut, 100 %correspond à la valeur maximale de lapropriété, généralement définie parl’écran. Ainsi, une hauteur de 100 %correspondra à la hauteur de votre écran,une largeur de 100 % à la largeur del’écran et ainsi de suite. Si vous demandez

Page 171: er :Creer des ebooks

donc à une propriété de ne faire que 50 %de la taille initiale, elle prendra la moitiéde la hauteur ou de la largeur de l’écran.

La taille des polices En matière de dimension, on peut

utiliser plusieurs unités de mesure : lepoint (pt), le nombre de pixels (px) et lalargeur de m (em). Ce em (différent du emutilisé pour l’italique) correspond à lalargeur de la lettre m dans la police decaractère utilisée et sa taille par défaut estde 1em. La largeur de la lettre m sert icide référence pour étalonner la totalité devotre document, et permet d’utiliser votrepolice de caractère à sa taille naturelle.

Ainsi, même s’il est en général admisqu’une police de caractère standardprésente un corps d’une taille de 12px, il

Page 172: er :Creer des ebooks

est recommandé d’utiliser la mesure debase en em, à savoir 1em. Comme lamesure en em est proportionnelle,contrairement aux mesures en pt et en px,le lecteur pourra ainsi modifier la tailledu texte de manière proportionnelle.

Ainsi, si les <p> de votre corps detexte mesurent 1em, vous pourrez attribueraux titres une valeur de 2em, ou 3em, parexemple. Attention, les virgules n’existentpas dans la notation em : il faut lesremplacer par des points. Ainsi, si voussouhaitez que votre classe big soit 1,2 foisplus grande (20% de plus) que votre textecourant, il faudra indiquer 1.2em.Inversement, une note de bas de page seraplus petite et pourrait avoir une taille de0.8em voire 0.5.

Page 173: er :Creer des ebooks

Ces différences entre notations detaille peuvent paraître insignifiantes maiselle sont en réalité extrêmementimportantes. En effet, en fonction desappareils de lecture, de la taille de leurécran et de leur résolution, avoir une taillede caractère bloquée empêchera le lecteurde régler la taille du texte comme ill’entend, le privant ainsi d’une expériencede lecture optimale.

C’est pourquoi nous vous conseillons,pour le texte courant <p>, d’utiliser lataille 1em, et d’adapter ensuite vos titreset autres sections en fonction de cette

Page 174: er :Creer des ebooks

taille de référence, à l’aide d’emproportionnels. Vous pouvez égalementutiliser le pourcentage % commeréférence typographique. Dans ce cas, laCSS pour <p> sera : p {font-size :100% ;}

Une dernière remarque concernant lesunités absolues et relatives : vous verrezque certaines propriétés CSS demanderontplusieurs valeurs. Dans ce cas-là, évitezde mélanger valeurs absolues et valeursrelatives, ou même des unités différentes.Cela complexifie le travaild’interprétation du logiciel et peut créerdes confusions.

Page 175: er :Creer des ebooks

Retour au Sommaire

Les propriétés CSSBien, maintenant que nous avonsdébroussaillé la manière d’utiliser lesCSS, abordons les différentes propriétéspossibles.

Les balises auxquellesappliquer les feuillesde style

Page 176: er :Creer des ebooks

Nous avons vu plus haut que vouspouviez appliquer les CSS à certainesbalises html. Nous mentionnons lesprincipales ici à titre de rappel.

BodyAu sein de cette classe, vous

préciserez la mise en forme que voussouhaitez appliquer à l’ensemble dudocument. Cette mise en forme sera eneffet utilisée pour tous les éléments quifigurent entre les balises <body> et</body> de votre page xhtml, soit toutvotre texte.

Généralement, les styles bodyprécisent les marges extérieures (pouréviter que le texte colle au bord de

Page 177: er :Creer des ebooks

l’écran) et, plus rarement, les retraits depremière ligne, la taille de la police ouencore la police à utiliser.

Cependant, il faut malheureusementrappeler que les liseuses n’interprètentpas les instructions de la même façon. LesKobo par exemple (dont la Kobo by Fnac)ne prennent ainsi pas compte despropriétés précisées dans body. Donc,même si c’est laborieux et moins pertinenten termes d’architecture CSS, nous vousconseillons de ne pas utiliser de stylespour cette balise mais de détaillerdavantage les styles des autres propriétés(les paragraphes et les titres,principalement). Ainsi, même si celasemble redondant, il vaut mieux rappelerles marges pour les <p> et les <h1>,

Page 178: er :Creer des ebooks

<h2>, <h3>… pour être sûr qu’ellesseront prises en compte correctement surtous les supports.

pVous préciserez dans cette classe tout

ce que vous souhaitez appliquer à unparagraphe lambda de votre texte : tailledu texte, italique, gras, retrait de premièreligne, justification…

Gardez juste à l’esprit que, commenous sommes en CSS, les styles de l’objetbody s’appliquent déjà donc vous n’avezpas besoin de les remettre, à moins devouloir spécifiquement les modifier.

Page 179: er :Creer des ebooks

h1, h2, h3…Ici, vous mentionnerez la mise en

forme spécifique à chaque titre (taille,graisse, italique, majuscules, espacesavant, espaces après, etc.). Là encore, pasbesoin de remettre les styles de l’objetbody.

Lorsque vous établissez vos mises enformes pour vos styles, ne perdez pas devue qu’ils donnent une dimensionlégèrement graphique à votre fichier doncsoignez-les. Vérifiez notamment leurrendu dans la page, en faisant se succéderdes titres de différents niveaux et desparagraphes.

sup

Page 180: er :Creer des ebooks

Comme indiqué plus haut, cette baliseest utilisée pour mettre le texte enexposant (comme dans 2e, 3e, etc.). Leproblème avec cette balise est que,utilisée telle quelle en html, elle secontente de relever les lettres indiquées,sans les réduire. Du coup, vous avez ausein de votre paragraphe un espace blancdisgracieux au-dessus de votre ligne carle logiciel laisse la place pour la lettresurélevée.

Pour éviter cet impair, nous vousconseillons de définir votre balise supcomme suit :

Page 181: er :Creer des ebooks

Cela réduira la taille de votre exposant(elle ne fera que 67 % de sa taille) et lasurélèvera (des 33 % restants), sans créerde blanc impromptu.

DivComme indiqué plus haut, div est une

manière d’organiser les éléments de votretexte en en groupant certains au sein d’unbloc. Vous pouvez donc tout à faitappliquer une mise en forme à vos blocs.

Les div sont particulièrement utilespour les images car, correctementparamétrés, ils permettent de centrer lesimages dans la page.

Page 182: er :Creer des ebooks

Les propriétés CSS demise en pageNous allons dans un premier temps

aborder les propriétés CSS qui nes’appliquent pas au texte proprement ditmais qui permettent de définir votre miseen page de façon harmonieuse.

Les margesPour éviter que votre texte ne colle à

l’écran, vous aurez à définir des marges.Ces dernières n’ont pas forcément besoind’être grandes mais elles doivent existerpour faire respirer la lecture. Il n’y a riende pire qu’un texte qui court d’un bout à

Page 183: er :Creer des ebooks

l’autre de l’écran, sans laisser d’espacevide où l’œil puisse se reposer.

Il existe quatre propriétés CSS pourdéfinir les marges : marge gauche(margin-left), marge droite (margin-right),marge supérieure (margin-top) et margeinférieure (margin-bottom). Vous pouveztout à fait ne pas attribuer les mêmesvaleurs à vos marges, en fonction du rendusouhaité.

Signalons enfin qu’il existe unepropriété regroupant les quatre propriétésci-dessus : margin. Vous y indiquez vosvaleurs de margin dans l’ordre suivant :haut, droite, bas, gauche ; chaque valeurétant séparée des autres par un espace.

Remarque : Vous pouvez tout à faitdéfinir un margin pour le body et un

Page 184: er :Creer des ebooks

margin pour les paragraphes. Dans ce cas-là, les deux mises en formes se cumulerontpour les paragraphes. Cela est notammentutile si vous voulez faire respirer vosparagraphes : insérer de légers margin-topet margin-bottom, qui sépareront chaqueparagraphe pour mieux les mettre envaleur.

ExempleVous souhaitez que l’ensemble de

votre texte dispose de marges régulièrestout autour de l’écran. Vous ne voulez pasque ces marges soient trop importantes,sans pour autant nuire à la lecture. Un boncompromis est une marge située entre 3 et5 % de la taille de l’écran et vous optezdans un premier temps pour une marge de3 % en haut et en bas, et de 5 % à gauche

Page 185: er :Creer des ebooks

et à droite.Comme vous souhaitez que cette marge

concerne l’ensemble du document, lemieux est de le préciser pour le style de labalise body. Le code CSS sera donc lesuivant :

Ou bien

Page 186: er :Creer des ebooks

En outre, en plus de ces marges quis’appliquent à tout le document, voussouhaitez que chaque paragraphe disposed’un léger espace au-dessus de lui(0.2em) et en-dessous (0.5em). Votrecode CSS sera alors :

Les interlignesIl peut aussi arriver que, pour des

raisons typograhiques qui vous sontpropres, vous souhaitiez que votre texteait un interligne plus grand qued’habitude. De la sorte, vous disposerez

Page 187: er :Creer des ebooks

d’un espace blanc entre chaque ligne quipourra faire respirer votre texte.

La propriété pour définir votreinterligne est line-height.

ExempleReprenons notre style de paragraphe.

En plus des marges en début et en fin deparagraphe, vous vous dites qu’un légerinterligne pourrait être une bonne chose. Iln’est pas nécessaire que celui-ci soitélevé aussi vous décidez-vous pour uninterligne de 1.05em. Cela signifie quevotre texte prendra 1em de hauteur maisqu’il y aura un blanc de 0.05em en pluspour chaque ligne. Le code pour vosparagraphes sera le suivant :

Page 188: er :Creer des ebooks

Remarque : Si vous jouez avec lesinterlignes, assurez-vous que votre line-height soit supérieur ou égal à votre taillede police. Sans quoi en fonction de votrepolice de caractères, vos lignes de texterisqueront de se chevaucher les unes avecles autres.

Les sauts de pageSur certains textes mal maquettés, il

peut arriver qu’un titre se retrouve en bas

Page 189: er :Creer des ebooks

de page tout seul, sans texte courant pourle suivre. Cela donne une impressionbizarre car le lecteur a le sentiment que letitre en question aurait dû apparaître surl’écran suivant pour faire bloc avec sontexte. Pour éviter ce genre dedésagrément, il faut donc lier les deuxblocs texte (ici le titre et son paragraphequi le suit) pour qu’ils ne soient passéparés.

Pour cela, vous aurez besoin despropriétés CSS page-break-before (sautde page avant) et page-break-after (sautde page après). Les valeurs de ces deuxpropriétés sont les suivantes :

avoid évitera autant que possiblede séparer les blocs. Mais lorsquece ne sera pas possible, les deux

Page 190: er :Creer des ebooks

blocs seront séparés.always indique de toujours insérerun saut de page. On utilise parexemple cette valeur si on veutqu’un titre débute toujours sur unnouvel écran.auto laisse le navigateur afficher lapage comme il l’entend, sanscontraintes particulières. Cettevaleur est peu utilisée.inherit applique au saut de pageles mêmes paramètres que lafeuille de style parente dont elledécoule (généralement body, p ouh). Cette valeur est peu utilisée.

Comme on le voit, ce sont surtout lesvaleurs avoid et always qui serontutilisées pour gérer les sauts de pages.

Page 191: er :Creer des ebooks

Remarque : Les titres qui sont audébut d’une nouvelle page htmlcommencent par défaut sur un nouvelécran. Vous n’êtes donc pas obligé decréer un style rien que pour eux pour gérerles sauts de page.

ExempleVous souhaitez que votre titre de

niveau 2 soit toujours sur un nouvel écran.Le style sera donc le suivant :

L’alignement de votretexte

Page 192: er :Creer des ebooks

Note : Les deux propriétés qui suivent(text-align et text-indent) s’appliquent àdes éléments de votre texte mais, commeleur utilisation résulte principalement dela mise en page, nous avons préféré lesmentionner dans cette partie.

Un texte peut se présenter dedifférentes formes au sein d’une page. Ilpeut être aligné à gauche (le mode pardéfaut des traitements de texte), aligné àdroite (comme pour une signature), centréou justifié (i.e. que votre texte remplitharmonieusement l’espace en une sorte degros rectangle). Tous ces éléments dejustification peuvent être définis en CSS.

On utilise pour cela la propriété text-align, en lui précisant la valeur que l’onsouhaite (left pour un alignement à gauche,

Page 193: er :Creer des ebooks

right pour un alignement à droite, centerpour un alignement au centre et justifypour un texte justifié).

Remarque : Il est préférable de définirl’alignement pour les différentes balisesde votre texte, en particulier les titres. Eneffet, même si on peut considérer qu’untitre, par nature court, sera aligné à gauchemême si le texte est justifié, l’expérienceprouve que le résultat peut êtredésastreux, en particulier sur les petitsécrans. Donc, même si cela vous sembleinutile, définissez bien un text-align:leftpour vos titres.

ExempleReprenons le cas de notre corps de

texte. Nous souhaitons que, par défaut, enplus des 5 % et 3 % de marge, le texte soit

Page 194: er :Creer des ebooks

justifié. Le code sera alors le suivant :

Les retraits de premièreligne

En littérature notamment, chaqueparagraphe commence par un alinéa, i.e.une première ligne légèrement en retraitdu reste du texte. En typographie, onappelle cela une indentation et si voussouhaitez appliquer une telle indentation,vous devrez utiliser la propriété text-indent.

Page 195: er :Creer des ebooks

ExempleReprenons notre style de paragraphe

défini plus haut. En plus des marges endébut et en fin de paragraphe et del’interligne, vous souhaitez un retrait depremière ligne équivalant à une lettre. Lecode sera alors le suivant :

Les propriétés CSS à

Page 196: er :Creer des ebooks

appliquer au texte

La taille de textePour définir la taille de votre police,

vous utiliserez la propriété font-size. Pourrappel, il vaut mieux définir la taille pardéfaut de vos paragraphes avec une valeurde 1em et définir les valeurs des autresstyles en fonction de celle-ci.

ExempleSachant que vos paragraphes auront

une taille de 1em, vous décidez de définirles styles de vos titres de niveau 1. Aprèsplusieurs essais, vous estimez qu’unetaille de 1.7em serait une bonne chose etqu’il faudrait que le texte soit centré. Le

Page 197: er :Creer des ebooks

code sera alors le suivant :

Remarque : Nous précisons uneindentation de 0em (text-indent) pour lecas où les styles précédents (commebody) aient prévu une indentation pardéfaut.

L’italiqueSi vous désirez utiliser l’italique (ou

Page 198: er :Creer des ebooks

indiquer au CSS que vous ne voulez PASd’italique), il vous faudra utiliser lapropriété font-style. Cette dernière a deuxvaleurs : normal (i.e. non italique) etitalic.

ExempleVous désirez que votre titre de niveau

1 soit également en italique pour mieuxressortir. Si l’on reprend le style ci-dessus, le code serait alors :

Page 199: er :Creer des ebooks

Remarque : Si vous utilisez une policepar défaut (i.e. vous n’incorporez pas depolice à votre ePub), vous n’avez pasbesoin de définir un style uniquement pourl’italique. Si vous utilisez des policesspécifiques (cf. plus bas sur la manière deprocéder), il vous faudra créer le style i{font-style:italic;}.

Le grasDe la même manière que pour

l’italique, la propriété font-weightdéterminera la graisse de votre texte. Cedernier sera soit normal (si vous nevoulez PAS de gras) soit bold (gras).

Exemple

Page 200: er :Creer des ebooks

Pour donner encore plus d’impact àvotre titre, vous souhaitez qu’en plus del’italique, le texte en question soit en gras.Le style aura donc le code suivant :

Remarque : À l’instar de l’italique,vous n’avez pas besoin de définir un stylepour le gras si vous n’incorporez pas depolices à votre ePub. Dans le cascontraire, vous devrez définir le style b

Page 201: er :Creer des ebooks

{font-weight:bold;}.

Gérer les majuscules etles minuscules

Vous pourrez vouloir, indépendammentde la saisie de votre texte, lui appliquerune mise en forme particulière au niveaudes majuscules. Peut-être voulez-vous quevotre titre soit totalement en majuscules,ou que la première lettre de chaque motsoit en majuscules. Dans ce cas-là, lapropriété à utiliser est text-transform.

Cette propriété peut prendre quatrevaleurs :

uppercase, qui met tout le texte enmajuscules

Page 202: er :Creer des ebooks

capitalize, qui met une majusculeau début de chaque mot (le résultatest en général assez disgracieuxmais sachez que cette optionexiste)lowercase, qui met tout enminusculesnone, qui indique juste de ne rienchanger au texte

ExempleFinalement, vous décidez que votre

titre de niveau 1 ne doit pas être enitalique mais totalement en majuscules.Vous allez donc supprimer l’italique dustyle et y ajouter les majuscules. Le stylesera alors le suivant :

Page 203: er :Creer des ebooks

Remarque : La propriété text-transform étant assez particulière, ellen’est pas comprise par tous les moteurs delecture. Ne vous étonnez donc pas si ellene fonctionne pas sur votre liseuse, mêmesi iBooks l’affiche correctement. Le plussimple est encore d’écrire directementvotre titre en majuscules.

Les petites capitales

Page 204: er :Creer des ebooks

En plus des majuscules et desminuscules, il existe ce que l’on appelledes petites capitales. Elles ont la formedes lettres majuscules mais la hauteur deslettres minuscules. On s’en sertrelativement peu mais il faut savoir que,typographiquement parlant, les noms desiècles se composent en petitesmajuscules. Il est donc toujours utile deprévoir son utilisation, en particulier sivous utilisez les noms de siècles.

Si vous souhaitez utiliser ce genre demise en forme, vous devrez recourir à lapropriété font-variant. Cette propriétévous permet d’utiliser la variante Smallcaps d’une police, si cette variante existeau sein de la police. Si cette variante

Page 205: er :Creer des ebooks

Small caps n’existe pas dans la police, lapropriété sera la plupart du temps ignoréesur les supports de lecture.

Font-variant peut prendre deuxvaleurs : normal et small-caps.

Remarque : Il est assez peu probableque vous ayez besoin de la valeur normal,à moins que votre texte ait été tapé enpetite capitales et que vous souhaitiez leremettre dans une mise en forme normale.

ExempleVous avez défini les propriétés de

votre titre de niveau 1 plus haut. Il esttemps de vous charger de celles de niveau2. Pour ceux-ci, vous ne souhaitez pas demise en avant particulière mais vous ditesqu’une différenciation du corps de texteserait une bonne chose. Vous optez donc

Page 206: er :Creer des ebooks

pour les petites capitales. Vous reprenezdonc votre style h2 défini plus haut et lemodifiez comme suit :

Les propriétés CSScomplexesLes propriétés que nous allons aborder

ici ne sont en réalité pas tropcompliquées. Toutefois, comme leur usageest assez particulier (puisqu’il traite des

Page 207: er :Creer des ebooks

images et des ajouts de polices), nousavons préféré les traiter dans une sectionà part.

Largeur et hauteurd’une image

Si vous insérez une image, voussouhaiterez probablement qu’elle nedépasse pas de votre écran ou qu’elle soitmême plus petite. Pour cela, vous pourrezjouer sur la hauteur et la largeur del’affichage de l’image.

Il existe quatre propriétés que vouspouvez utiliser : width, height, max-widthet max-height. Width et height vouspermettent, respectivement, de définir lalargeur et la hauteur de votre image, tandis

Page 208: er :Creer des ebooks

que max-width et max-height vouspermettent de définir la largeur et lahauteur maximales de votre image. Lanuance entre les deux types de propriétésest assez fine et c’est surtout le rendu finalqui vous fera choisir celle que vouspréférez. Nous avons cependant constatéque les propriétés max-width et max-height étaient plus facilement interprétéespar les logiciels que width et height.

À l’instar des polices, la valeur quevous allez donner à votre image sera unevaleur chiffrée, généralement en pixels(px) ou en pourcentage (%). À moins devouloir un rendu déformé, vous n’aurezbesoin de définir qu’une seule propriétépour votre image. En effet, si vousmodifiez une seule caractéristique sans

Page 209: er :Creer des ebooks

forcer les autres, l’ensemble de l’imagesera modifié de façon proportionnelle. Ilvous faut donc agir sur le critère le plusencombrant (la hauteur ou la largeur) pourque, par ricochet, le second soitcorrectement proportionné.

Dernier point : il est plus quepréférable que l’image qui vous servirade page de titre prenne toute la taille del’écran. Nous vous conseillons donc delui mettre un height de 100%.

Remarque : Si votre image fait plus de600 pixels de large, il est primordial despécifier un width de 600 px ou moins(dans le cadre d'une CSS à valeur fixe).En effet, toute image dépassant les 600pixels de large n'est tout simplement pasaffichée par Adobe Digital Editions. Or,

Page 210: er :Creer des ebooks

ADE est le lecteur principal d'ebooks surPC.

ExempleVous disposez d’une image plutôt

verticale (en mode portrait, si on suit laterminologie des traitements de texte)intitulée couverture.jpg, qui se trouve dansle dossier Images de l’ePub. Voussouhaitez la mettre en première page devotre fichier mais, comme cette image esttrop grosse, vous allez devoir l’adapter àla taille de l’écran. De plus, pour éviterque l’image ne prenne tout l’écran(question de goût), vous décidez que cettedernière ne prendra que 90 % de l’écran.

La feuille de style CSS prendra laforme suivante :

Page 211: er :Creer des ebooks

Dans votre page xhtml, vousappliquerez ensuite la classe img90 de lafaçon suivante :

Centrer une imageIl n’existe pas de propriété CSS pour

centrer spécifiquement une image.Néanmoins, cela est tout à fait possible, etde deux manières différentes : en utilisantles div ou en jouant avec les marges. Les

Page 212: er :Creer des ebooks

deux méthodes étant interprétées de lamême manière par les lecteurs, leurutilisation est plus une question depréférence de votre part qu’autre chose.

Centrer une image avec les divNous avons vu plus haut que les

balises <div></div> permettaient deregrouper des éléments ensemble pourleur appliquer une mise en formecommune. Ici, l’astuce consiste à insérerl’image au sein d’un div et ensuite àjustifier ce div. On utilisera pour cela lapropriété text-align:center. Le code seraalors le suivant :

Dans la page xhtml :

Page 213: er :Creer des ebooks

Et dans la feuille de style :

Remarque : Nous précisons uneindentation de 0em (text-indent) pour lecas où les styles précédents (commebody) aient prévu une indentation pardéfaut.

Centrer une image avec les marges

Page 214: er :Creer des ebooks

Si vous n’êtes pas à l’aise avec lesdiv, vous pouvez utiliser des valeursrelatives. Le processus est assez simple.

Supposons que notre image occupe90 % de l’écran. Cela signifie qu’il reste10 % pour les marges. Si vous souhaitezcentrer votre image en hauteur, il voussuffit donc de préciser que vos margeshaute et basse font chacune 5 % (puisque90 % de l’image + 5 % de marge basse +5 % de marge haute = 100 %, soit la taillede l’écran). Le code de votre style seraalors le suivant :

Dans la page xhtml :

Page 215: er :Creer des ebooks

Et dans la feuille de style :

Remarque : À l’instar de <br/>, labalise <img /> n’a pas besoin de balisefermante. Et, tout comme <br/>, elle nepeut se trouver directement dans le codehtml. Elle doit donc être encadrée avecdes balises tels <p></p> ou <div></div>.

Si vous souhaitez centrer votre image

horizontalement, le processus est le même,mais en définissant max-width, margin-left

Page 216: er :Creer des ebooks

et margin-right.Terminons enfin par une petite astuce

si vous êtes amené à utiliser plusieursimages dans votre ePub. Comme cesdernières n’auront probablement pas lamême taille initiale et que vous nevoudrez pas leur appliquer la mêmeaugmentation ou diminution en fonction deleur utilisation, nous vous conseillons decréer plusieurs classes d’image.

Vous pouvez par exemple créerhorizontal90 (avec max-width:90%;margin-left:5%;margin-right:5%;) et le décliner en horizontal80(max-width:80%;margin-left:10%;margin-right:10%;), horizontal70 (max-width:70%;margin-left:15%;margin-right:15%;) et ainsi de suite.

Page 217: er :Creer des ebooks

De la sorte, vous aurez toute une grillede classes à utiliser en fonction de vosimages. Ainsi, si jamais vous devezchanger la taille d’une image qui ne vousconvient pas, vous avez juste à modifier laréférence à la classe de votre image (enremplaçant par exempleclass="horizontal90" parclass="horizontal70").

Insérer et utiliser despolices spécifiques

Vous pourrez vouloir utiliser despolices particulières pour donner uncertain cachet à votre texte (comme parexemple une police futuriste pour vostitres, s’il s’agit d’une histoire de science-

Page 218: er :Creer des ebooks

fiction). Vous trouverez ci-dessous lamarche à suivre pour incorporer de tellespolices.

Quelles polices utiliserVous pouvez utiliser des fonts au

format OTF ou TTF, en sachant que lestypos TTF peuvent parfois poser quelquesproblèmes. Si besoin, des logicielscomme FontForge(http://fontforge.sourceforge.net/)permettent de convertir des TTF en OTF.

N’oubliez pas non plus que, comme lespolices sont des créations, elles sontlégalement protégées et que leur auteur adéfini quel usage était possible ou non(par exemple, une typo peut être gratuitepour un usage non commercial). Vérifiezdonc bien que l’usage que vous allez faire

Page 219: er :Creer des ebooks

de la police correspond à l’autorisationde l’auteur.

Au besoin, n’hésitez pas à contacterl’auteur de la police. Ces derniers nerechignent généralement pas à ce que voussortiez du cadre défini pour peu qu’ils ensoient informés et soient crédités quelquepart dans le fichier.

Importer les fontesEn premier lieu, vous devez faire en

sorte que votre ePub contienne les policesque vous utiliserez. Il faut donc lesimporter dans le fichier. Pour cela :

1. Sélectionnez le dossier Polices (ouFonts si vous avez une versionanglaise de Sigil), situé sous ledossier Images.

Page 220: er :Creer des ebooks

2. Faites un clic droit et choisissezAjouter des fichiers.

3. Sélectionnez les polices à insérer.4. Validez.

Voilà, vos typos font désormais partiede l’ePub. Il reste maintenant à préciserleur utilisation dans votre feuille de style.

Importer les polices dans la feuillede style

Pour exploiter correctement vospolices, nous allons utiliser une propriétéparticulière :

Page 221: er :Creer des ebooks

Remarque : Le premier

Remarque : Comme vousappliquez la police de sorte à cequ’elle soit utilisée par tous leséléments du livre, n’oubliez pasde définir les styles i {font-style:italic;} (ou em {font-style:italic;} si vous utilisez labalise <em></em> pourl’italique) et b {font-weight:bold;} (ou strong {font-weight:bold;} si vous utilisez labalise <strong></strong> pour legras) pour exploiter correctementle gras et l’italique de cette typo.

Page 222: er :Creer des ebooks
Page 223: er :Creer des ebooks

Retour au Sommaire

Petit résumépour bienexploiter lesCSS

Nous venons de voir commentfonctionnaient les CSS et commentles appliquer à votre ePub.Histoire de bien fixer les choses,voici un rapide résumé deséléments à prendre en compte.

Page 224: er :Creer des ebooks

1. Créez votre feuille de style2. Insérez le lien vers cette

feuille de style dans toutesles balises <head></head> de vos pagesxhtml

3. Dans votre feuille de style,déclarez en priorité lespolices que vous allezutiliser (pour l’usagenormal, gras, italique,gras+italique).

4. Définissez vos stylespropres aux balisesclassiques (body, h1, h2,h3, p, etc.)

5. Définissez les stylesspéciaux comme les appels

Page 225: er :Creer des ebooks

de note à l’aide des classes(.XXX)

6. Dans vos pages xhtml,attribuez les mises enforme liées à vos classesgrâce à la balise neutre<span class="XXX">

Enfin, petit rappel des règles àrespecter pour la saisie des CSSdans la feuille de style :

1. Toutes les propriétés d’unstyle sont enfermées ausein d’accolades ({ et })

2. Toutes les propriétés d’unstyle se terminent par unpoint-virgule (;)

3. N’utilisez ni lettresaccentuées ni caractères

Page 226: er :Creer des ebooks

spéciaux.4. Quand vous utilisez des

unités, conservez les mêmespour tout le style afind’éviter toute erreurd'interprétation.

5. La virgule n’existe paspour les unités. Il faututiliser le point à la place.

6. Vous pouvez utiliser lesespaces et les retours à laligne pour rendre vos CSSmoins touffues.

Page 227: er :Creer des ebooks

Retour au Sommaire

Quelquesconsidérationspour finir

Astucestypographiques

Lorsque vous aurez fini de définiret d’appliquer vos styles, il resteencore quelques petites

Page 228: er :Creer des ebooks

manipulations typographiques àeffectuer, pour être sûr que votrefichier soit bien propre. Ceschangements s’effectuent assezrapidement grâce à la fonctionRechercher/Remplacer. Nous lesfaisons intervenir en toute fin decréation d’ePub pour que toutesles modifications s’appliquentd’un coup. Si vous effectuez ceschangements au début etqu’ensuite vous modifiez votrefichier, il vous faudra à nouveaurépéter l’opération en fin decourse. Donc autant ne la fairequ’une seule fois.

Espaces insécables

Page 229: er :Creer des ebooks

Il vous est peut-être arrivé devoir des points d’exclamation oudes points-virgules en début deligne et de vous dire qu’ilsn’avaient rien à faire là. Entypographie, ces signes sontprécédés d’un espace mais, pouréviter les renvois à la lignemalheureux, il s’agit en réalitéd’un espace insécable (i.e. qu’onne peut pas couper).Malheureusement, ces espacesinsécables sont rarementconservés quand vous importezvotre texte dans Sigil et ils sontencore moins insérables via unraccourci clavier. Mais, il existeun moyen relativement facile de

Page 230: er :Creer des ebooks

les intégrer sans devoir vousrelire tout votre texte : avec lafonction Rechercher/Remplacer.

Voici la méthode à suivre (nousindiquons entre balises le texte àmettre dans la boîte de dialogue).

1. Sélectionnez votre page etbasculez en vue html (via labarre d’outils ou enapppuyant sur F11)

2. Lancez leRechercher/Remplacer(menu Édition/Rechercherou ctrl + h)

3. Remplacez <espace><espace> par <espace>[Cela vous permetd’éliminer les espaces

Page 231: er :Creer des ebooks

superflus]4. Remplacez <espace><!>

par <&nbsp;><!> [&nbsp;est le sigle pour l’espaceinsécable et signifie non-breakable space]

5. Remplacez <espace><?>par <&nbsp;><?>

6. Remplacez <espace><;>par <&nbsp;><;>

7. Remplacez <espace><:>par <&nbsp;><:>

8. Si besoin, sélectionnez unenouvelle page et réitérezles étapes 2 à 7.

De la sorte, vous ne devriezplus avoir de soucis avec dessigles typo malheureux en début

Page 232: er :Creer des ebooks

de ligne.

GuillemetsIl existe deux types de

guillemets : les guillemetsfrançais, qui ressemblent à des<< et des >> ; et les guillemetsanglais qui ressemblent à desdoubles apostrophes ouvrantes etfermantes (“ et ”). Vous pouvezutiliser ceux que vous souhaitezmais, outre le fait qu’il estpréférable de n’avoir qu’un seultype de guillemets dans votrefichier (question de renduprofessionnel), il faut savoir queles espaces ne sont pas gérés de la

Page 233: er :Creer des ebooks

même façon.

Les guillemets françaisSi vous utilisez les guillemets

français, vous aurez à utiliser desespaces insécables. En effet, unguillemet français ouvrant («) estsuivi d’un espace insécable et unguillemet français fermant estprécédé d’un espace insécable.

L’expérience prouve qu’enutilisant le Rechercher/Remplaceret en faisant un Remplacer tout, lerésultat n’est pas correct : il n’estpas rare que vous vous retrouviezavec plus de guillemets ouvrantsque fermants, ce qui n’estnormalement pas le cas.

Pour purger votre texte, il n’y

Page 234: er :Creer des ebooks

a donc pas trente-six solutions :effectuez une recherche manuelle.Voici comment procéder :

1. Sélectionnez votre page etbasculez en vue html (via labarre d’outils ou enapppuyant sur F11)

2. Lancez la recherche (menuÉdition/Rechercher ou ctrl+ h) sur le guillemet

3. Lorsque vous en trouvezun, quittez la recherche etvérifiez si le guillemet enquestion a la bonne mise enforme (s’agit-il bien d’unguillemet français ?)

4. Si l’espace n’est pas unespace insécable,

Page 235: er :Creer des ebooks

remplacez-le par &nbsp;5. Relancez la recherche pour

un autre guillemet etréitérez les étapes 3 à 5

Remarque : Lorsque voustombez sur un guillemet françaisouvrant, vous pouvez aussi,visuellement, rechercher songuillemet fermant correspondantpour vérifier sa mise en forme etson espace. En effet, les dialoguesne sont généralement pas trèslongs dans un texte donc un coupd’œil permet souvent de sauterune recherche.

Évidemment, cette manière deprocéder est un peu artisanalemais de la sorte, vous serez assuré

Page 236: er :Creer des ebooks

d’avoir autant de guillemetsouvrants que de guillemetsfermants et qu’ils ont tous leurespace insécable à proximité.

Les guillemets anglaisLes guillemets anglais

obéissent à une autreproblématique. En effet, il estassez fréquent, lorsque vous tapezvotre texte, que ces guillemetssoient remplacés par des “faux”guillemets anglais, i.e. desguillemets ouvrants et fermantsidentiques (" au lieu de “ et ”),similaires à ceux qui sont utilisésen code CSS. Votre tâche ici seradonc de remplacer ces guillemetspour qu’ils soient tous corrects.

Page 237: er :Creer des ebooks

Attention cependant ! Lesguillemets que vous devezremplacer sont ceux de votre texteet non ceux du code html. Assurez-vous donc, quand vous remplacezvos guillemets, qu’ils ne setrouvent pas au sein d’une balisehtml mais bel et bien dans lecorps de votre texte.

Concernant les espaces, lesguillemets anglais ne sont passuivis/précédés d’un espace doncil faudra supprimer ceux en trop.

Pour cela, nous allons une foisencore utiliser le Recherchermanuel. Voici la marche à suivre :

1. Copiez au préalable dansle presse-papier le doublet

Page 238: er :Creer des ebooks

“”2. Sélectionnez votre page et

basculez en vue html (via labarre d’outils ou enapppuyant sur F11)

3. Lancez la recherche (menuÉdition/Rechercher ou ctrl+ h) sur le guillemet

4. Lorsque vous en trouvezun, quittez la recherche etvérifiez si le guillemet enquestion a la bonne mise enforme (s’agit-il bien d’unguillemet anglais ?). S’iln’est pas correct,remplacez-le par le doublet(“”) et supprimez dudoublet le guillemet

Page 239: er :Creer des ebooks

superflu5. Si besoin, supprimez

l’espace lié au guillemet6. Relancez la recherche pour

un autre guillemet etréitérez les étapes 4 à 6

Remarque : Une autre méthodeconsiste à remplacer correctementtous les guillemets puis àremplacer <“><espace> par <“>et <espace><”> par <”>.

Points desuspension etapostrophes

Il existe enfin des sigles qui ont

Page 240: er :Creer des ebooks

la fâcheuse tendance de ne pasêtre corrects lorsque vous lessaisissez manuellement. C’est lecas des points de suspension etdes apostrophes. En effet, lespoints de suspension peuventn’être qu’une succession de troispoints (et non un seul signe depoints de suspension). Quant auxapostrophes, elles peuvent êtrevictimes de fausses apostrophes,un peu à la manière des “faux”guillemets : l’apostrophe enquestion est juste un trait verticalsuspendu en hauteur, et nonl’équivalent d’une virgule.

La bonne nouvelle pour cesdeux sigles est que, en utilisant le

Page 241: er :Creer des ebooks

Remplacer tout duRechercher/Remplacer, vouspurgez d’un coup toutes lesmauvaises occurrences.

Vous devez donc prendre soinde Remplacer tous les <...> par<…> et <'> par <’>.

Les tirets d’inciseParfois dans votre texte, vous

aurez des tirets d’incise. Cestirets, assez proches du traitd’union, sont un peu l’équivalentde parenthèses, permettant àl’auteur de glisser desinformations supplémentairessans bouleverser la structure de

Page 242: er :Creer des ebooks

sa phrase.Seulement, en termes

typographiques, les tirets d’incisene sont pas des traits d’union. Ilssont légèrement plus longs ets’appellent en réalité des tiretsdemi-cadratins. Ces tirets demi-cadratins ont la particularitéd’être précédés et suivis d’unespace. Ils ne collent donc pas lesmots de votre texte.

À l’instar des guillemetsanglais, le mieux est de collerdans le presse papier le tiretdemi-cadratin (–) puis d’effectuerune recherche manuelle et deremplacer les <-> par des<espace><–><espace>.

Page 243: er :Creer des ebooks

Note : Il existe également unautre type de tiret, plus long,appelé tiret cadratin. Ces tiretssont généralement utilisés pourles dialogues, soit lorsque vousutilisez les guillemets anglais soitlorsque vous n’utilisez que destirets. Il faudra alors égalementveiller à remplacer les tirets dansvos dialogues.

Le balisage despages de l’ePubNous avons vu plus haut

comment définir les métadonnées

Page 244: er :Creer des ebooks

(auteur, titre, traducteur, etc.) devotre fichier. Il existe cependantdes données internes à l’ePub quipermettent aux logiciels de mieuxs’y retrouver. Ces donnéesinternes s’appellent notions (ousemantics en anglais) et indiquentsi une page html est votre texte àproprement parler, la page decouverture, la page de crédits, deremerciements, etc.

La notion de couverture estprimordiale pour votre ePub carc’est l’image de cette page quiapparaîtra en miniature pourreprésenter le fichier. Il vous fautdonc impérativement définir cettenotion. Les autres sont laissées à

Page 245: er :Creer des ebooks

votre discrétion : à l’instar ducode xml:lang="fr" dans votrebalise html, les mettre sera unebelle cerise sur le gâteau maisn’est pas nécessaire au bonfonctionnement de l’ePub.

La procédure pour définir cesnotions est extrêmement simple :

1. Sélectionnez la page xhtmlde votre ePub à laquellevous souhaitez appliquerune notion

2. Faites un clic droit etsélectionnez Ajouternotions (ou Add semantics)

3. Sélectionnez la notioncorrespondant à votre page

4. Au besoin, réitérez les

Page 246: er :Creer des ebooks

étapes 1 à 3 avec les autrespages xhtml.

La couvertureComme indiqué plus haut, la

couverture constitue un élémenttrès important pour la visibilité devotre ePub. C’est en effet cettepage qui intervient en miniaturepour représenter votre texte. Elleest utilisée à la fois dans lesétagères virtuelles desbibliothèques (comme pour iBookspar exemple) et comme visuel chezles libraires en ligne. Elleconstitue le premier accès dulecteur à votre titre et, à ce titre,

Page 247: er :Creer des ebooks

il est important de connaîtrequelques grands principes pouroptimiser son utilisation.

Le designEn tant que premier accès du

lecteur à votre titre, il estimportant de soigner la maquettede votre couverture. Si cettedernière est hideuse, le lecteurpotentiel sera rebuté et ne ferapas l’effort d’en savoir plus. Àl’inverse, une couvertureharmonieuse témoigne d’untravail professionnel soigné quimet davantage le lecteur enconfiance. En librairie, une bellecouverture compte pour plus de50 % dans l’acte d’achat du

Page 248: er :Creer des ebooks

lecteur. C’est dire sonimportance.

La lisibilitéNous avons vu que votre

couverture apparaissait enminiature dans les librairies enligne et sur les étagères desbibliothèques. Cela signifie doncque la première taille qu’elle aura(celle de la miniature) ne sera passa taille normale mais une tailleréduite. Par conséquent, tous leséléments qui figurent dessusseront plus petits que leur tailleréelle.

Comme cette miniature est lepremier contact du lecteur avecvotre œuvre, il est important que

Page 249: er :Creer des ebooks

votre couverture soit lisible,même à une taille réduite. Sansquoi, son design global risque depasser pour de l’amateurismeavec les conséquences décrites ci-dessus.

Pour régler ce problème delisibilité, tâchez d’appliquer troisgrandes règles : tout d’abord, nesurchargez pas votre couvertured’informations (le titre et le nomde l’auteur suffisent). Ensuite,optez pour des polices qui, mêmeréduites, restent lisibles. Enfin,mettez votre texte en légèrementplus gros que ce que vous avezprévu, de sorte que, même réduit,il soit bien lisible.

Page 250: er :Creer des ebooks

Et, bien entendu, n’hésitez pasà faire plusieurs essais et àdemander l’avis de votreentourage.

D’un point de vue techniqueMaintenant que nous avons

abordé les questions théoriquesde maquette et de lisibilité, il esttemps de nous pencher sur cettecouverture d’un point de vuetechnique. Ici, l’impératif estsimple : votre couverturecomplète doit être une image, unpoint c’est tout. En effet, si votrecouverture est, par exemple, untexte suivi d’une image, seulel’image apparaîtra en miniature.Il vous faut donc réaliser votre

Page 251: er :Creer des ebooks

couverture comme s’il s’agissaitd’une image.

Pour cela, vous pourrez encorerecourir à Gimp[http://www.gimp.org]. Nous nenous étendrons cependant pas icisur les différentes possibilités deGimp tant elles peuvent varier enfonction des utilisateurs.

Une fois que vous aurez définivotre couverture, il reste quelquespoints à vérifier, justement auniveau technique.

Commençons par un rappel surle format de votre image. Il existede multiples formats d’affichagepour les images mais l’ePub n’enaccepte que trois : gif, png et jpg.

Page 252: er :Creer des ebooks

Assurez-vous donc que votreimage de couverture est bien dansce format-là.

Vient ensuite la taille de votreimage. Celle-ci s’exprime ennombre de pixels. Plusprécisément, une image disposed’une hauteur et d’une largeur etla multiplication de l’un parl’autre (oui, oui, comme vos coursde géométrie où, pour calculerl’aire d’un rectangle, vousmultipliiez la largeur par lahauteur) donne la taille de votreimage. Si par exemple, vous avezune image qui fait 800 pixels dehaut pour 600 pixels de large, elleaura une taille de 480 000 pixels.

Page 253: er :Creer des ebooks

Cela peut paraître beaucoupmais est en réalité assez peu : iln’est pas rare que les imagesaient des tailles de plusieursmillions de pixels. On parleraalors de megapixels. Si, parexemple, votre image fait 1200pixels de haut par 1000 pixels delarge, elle fera 1 200 000 pixels,soit 1,2 megapixels.

Vous trouverez généralementles informations relatives à lataille de votre image dans votrelogiciel de retouche, dans unmenu type Édition\Taille del’image.

Bien, maintenant que vousconnaissez la taille de votre

Page 254: er :Creer des ebooks

image, voyons quels sont lesimpératifs à respecter. Ils sont aunombre de deux : tout d’abord,votre image ne doit pas faire plusde 2 megapixels en tout et ensuite,sa hauteur doit être supérieure ouégale à 1400 pixels. Pourquoi cesvaleurs si précises ? Simplementparce qu’il s’agit des critèresd’Apple pour apparaître dansiBooks. Or, iBooks est l’un desfournisseurs principaux en ePubdonc autant se conformer à sesdirectives si vous souhaiteztoucher le plus de lecteurspossible.

Remarque : La taille del’image abordée ici n’a rien à

Page 255: er :Creer des ebooks

voir avec l’affichage que vousaurez défini dans les CSS. Uneimage peut tout à fait être trèslourde et apparaître en tout petitdans votre ePub ou, à l’inverse,très légère, et être agrandie (maisdans ce cas-là, le résultat serasouvent désastreux). C’est un peucomme si, pour une recette, vousaviez une quantité donnée defarine. Quelle que soit la quantitéd’eau ou de lait que vousrajouterez, vous aurez toujours lamême dose de farine. Et seul lefait d’en ajouter ou d’en retirerpermettra de modifier la quantitéprésente dans votre recette.

Page 256: er :Creer des ebooks

Et en cas deproblème ?Jusqu’à présent, nous vous

avons expliqué comment réaliserun ePub correctement. Si voussuivez nos conseils et nosinstructions, il n’y a pas deraisons que la validation de votreePub renvoie des erreurs.Néanmoins, comme tout ne sepasse pas toujours comme on lesouhaite, nous allons aborder iciles cas d’erreurs les plusfréquents.

Page 257: er :Creer des ebooks

Élément manquantLe texte : This resource is

reachable but not present in theOPF <manifest>. "Reachable"means that a reference of somekind that points to this resourceexists in the epub.

L’explication : Votre ePubutilise un élément qui n’est plusprésent dans le fichier(généralement une image ou unepolice). Vous avez sans doutesupprimé l’élément de son dossieren pensant ne plus vous en servir.Sauf que vous n’avez passupprimé la référence à cetélément dans vos pages xhtml.

Page 258: er :Creer des ebooks

Dans la mesure où Sigil vousindique le nom de la référencemanquante, vous devriez savoirquelle(s) page(s) sont concernées.Ouvrez-les en vue html (f11) etcherchez le code qui se réfère àl’élément supprimé. Puis, effacez-le.

Élément inutiliséLe texte : This resource is

present in the OPF <manifest>,but it’s not reachable (it’sunused).

L’explication : C’est l’inversedu cas ci-dessus. Vous avez laissédes éléments dans votre ePub

Page 259: er :Creer des ebooks

alors qu’ils ne sont plus utilisés.C’est par exemple le cas si vousavez importé de nombreusesimages et ne les avez pas toutesintégrées à vos pages xhtml. Oualors si vous avez créé plusieursfeuilles de styles (celles qui seterminent en .css) et ne les avezpas toutes utilisées. Là encore,comme Sigil vous indique laréférence manquante, allezjusqu’à l’élément en question etsupprimez-le (ou bien faites-yappel s’il s’avère que vous l’avezintégré à votre ePub pour uneraison bien précise).

Problème de titre

Page 260: er :Creer des ebooks

Le texte : The <title> elementis missing.

L’explication : Vous n’avez pasrempli le titre de votre ePub dansles métadonnées et ce titre vousest indiqué comme manquant.Renseignez-le donc dans lesmétadonnées.

Remarque : L’absence de nomd’auteur ne renvoie pas de coded’erreur de la part de Sigil. Il estcependant vital que cettemétadonnée soit renseignée.Faute de quoi les lecteurs nepourront pas effectuer derecherche sur votre nom dans lesdifférents moteurs de recherche.

Page 261: er :Creer des ebooks

Autres problèmesD’autres problèmes peuvent

intervenir dans votre ePub mais,comme ces cas sont trèsspécifiques et dépendent de votrefichier, nous n’allons pas lesaborder ici. Gardez juste àl’esprit que, si l’explication deSigil peut paraître absconse, ellecontient cependant tous leséléments pour vous aider àrésoudre le problème : nature del’incident, endroit où celui-ciapparaît et éventuelle piste pourle résoudre. Le logiciel seréférera également aux différentsfichiers qui constituent l’ePub (le

Page 262: er :Creer des ebooks

manifest, toc.ncx, etc.). N’hésitezdonc pas à vous replonger dansles explications au début de cetebook pour y voir plus clair.

Enfin, si vous ne parveneztoujours pas à régler votreproblème, n’hésitez pas àarpenter le net, à poser vosquestions sur des forums voire àdes blogueurs spécialisés. Lesgens seront généralement ravis devous apporter leur aide et de vousaider à progresser.

Page 263: er :Creer des ebooks
Page 264: er :Creer des ebooks

Retour au Sommaire

Le mot de la finVoilà, vous savez désormais cequ’il faut faire pour créer votreePub optimisé. Nous avons tâchéde vous présenter les principalesfonctions dont vous pourriez avoirbesoin mais il en existe encore denombreuses. Nous n’avons pasvoulu ici trop vous surchargerd’informations sur les CSS :celles-ci feront l’objet d’un guideWalrus dédié.

Vous devez cependant garder

Page 265: er :Creer des ebooks

quelques éléments à l’esprit.En premier lieu, un ePub

classique, s’il reprend denombreuses particularités despages web, n’est pas un siteinternet. Vous ne pourrez doncreprendre tels quels tous les effetsou particularités graphiques quivous plaisent. Certainespropriétés seront mal interprétéesou ne seront tout simplement pasreconnues.

En second lieu, les différentssupports ne gèrent pas tous lespropriétés CSS de la mêmemanière. Sur iPad et iPhone,l’immense majorité des élémentssont correctement interprétés

Page 266: er :Creer des ebooks

mais ce n’est pas forcément le casdes liseuses et de certaines applis.Ne vous étonnez donc pas qu’unrendu que vous pensiez génial nesoit pas correctement retranscritd’un support à l’autre.

Pour résumer, la simplicité etl’efficacité devront être vosguides dans votre défrichage.Avec l’ePub, vous pourrez fairebeaucoup, mais vous ne pourrezde toute façon pas en faire trop.

Page 267: er :Creer des ebooks

Retour au Sommaire

Quelques sites pouraller plus loin

Si vous désirez approfondirvotre connaissance de l’ePub, desCSS et du HTML, vous trouverezci-dessous quelques sites parlesquels commencer. Il ne s’agitici que d’une poignée parmi unemyriade mais ce sont ceux quim’ont permis de me forger sur lacréation des ePub. Vous pouvezdonc commencer vos recherchespar là si vous le désirez.

html.net

Page 268: er :Creer des ebooks

http://fr.html.net/Voilà une adresse parfaite

pour débuter. Ses tutoriels sur lehtml et les CSS constituent uneexcellente base et une grandepartie des éléments mentionnésdans ce tutoriel provient de leursite et de mes expériences.

Zonecsshttp://www.zonecss.fr/index.phpZonecss est un très bon

complément si vous souhaitez uneexplication claire des différentespropriétés CSS.

Page 269: er :Creer des ebooks

Dans la mêmecollection

Page 270: er :Creer des ebooks

Crédits

Un livre numérique réalisé par

www.walrus-books.com

Page 271: er :Creer des ebooks

Walrus est un studio de création et

d'édition de livres numériquesd'exception. Sa vocation est de proposerdes ebooks innovants et immersifs, àl'aspect typographique soigné, où le textes'enrichit de contenus multimédia etinteractifs. En créant de nouvellesexpériences de lecture, plus en adéquationavec les pratiques numériquesd'aujourd'hui, Walrus lance l'édition surdes pistes inédites.