CREEZ DES EBOOKS AVEC

SIGIL

BENOIT HUOT

Table des matires

1/ Quelques dfinitions 2/ Par o commencer 3/ Crer mon premier ePub 4/ Pages, titres et tables des matires a. Insrer des pages dans Sigil b. Titres c. Table des matires 5/ Avant de poursuivre 6/ L'interface de Sigil 7/ Les bases du HTML a. Les principes de saisie b. Les balises HTML

8/ Les CSS a. O se cachent les feuilles de style ? b. La syntaxe CSS c. Les proprits CSS 9/ Quelques considrations pour finir 10/ Le mot de la fin Crdits

Bonjour tous, Vous avez sous les yeux un tutoriel qui vous expliquera pas pas comment raliser un fichier ePub, partir doutils gratuits et, nous lesprons, simples. Dans les lignes qui suivent, nous allons tcher de vous prsenter les fonctions principales ncessaires la ralisation de la majorit des ePub. Si daventure vous souhaitiez essayer quelque chose qui ne figure pas dans ce livre, nhsitez pas me contacter

(esteriane626ATgmail.com) ou vous tourner vers les tutoriels prsents en fin douvrage. Sur ce, bienvenue bord ! Benoit Huot

Avertissement de rigueur Il existe de nombreux logiciels vous permettant de crer des ePub rapidement, soit en enregistrant directement votre fichier dans ce format-l soit en convertissant un fichier dj existant. Sils font gnralement correctement leur travail, ces outils automatiques ont tendance surcharger le fichier dinstructions inutiles et donc le rendre moins efficace (le texte pourrait par exemple tre plus lent afficher). Le but tant de vous montrer comment optimiser votre fichier ePub, ce tutoriel abordera de lgres notions de programmation et vous

aurez probablement modifier du code. Nanmoins, il ny aura rien de bien sorcier. Sur ce, commenons !

Retour au Sommaire

Quelques dfinitions
Avant daller plus avant dans le tutoriel, quelques petites dfinitions pour viter de vous perdre et clarifier certains termes. Si vous tes dj familiaris avec eux, nous vous conseillons de passer directement la section suivante. Mais un peu de rvision na jamais fait de mal personne.

EPub

EPub (abrviation delectronic publication) est un format de fichiers utilis pour les livres numriques. Les fichiers au format ePub portent donc lextension .epub la fin de leur nom. De la mme manire quun .html indique lordinateur dutiliser un navigateur Internet et un .doc dutiliser un traitement de texte (gnralement Word), un .ePub indique lordinateur dutiliser un logiciel conu pour lire les .epub. Parmi ces logiciels, on peut citer : Des extensions pour navigateur internet tels Epubreader et Grabmybooks pour Firefox Des applications de lAndroid Market tels Google Play, Samsung Reader, Aldiko ou Moon+Reader

Des applications pour iPhone et iPad telles iBooks, Stanza ou Bluefire Reader Les logiciels installs sur les liseuses telles que le Kobo by Fnac ou le Cybook Odyssey La particularit du format ePub est dtre un format ouvert, i.e. utilisable par tous ceux qui le souhaitent, et non li une machine en particulier. Pour les possesseurs de liseuse, assurez-vous que votre machine peut le lire car, si le format ePub est bien ouvert, certains fabricants (dont Amazon et son Kindle) ont opt pour des formats propritaires et ne peuvent donc pas les exploiter (il existe nanmoins des solutions de conversion, comme lexcellent Calibre [http://calibre-

ebook.com/]). Signalons enfin que le format actuel de lePub tel quil est cr par Sigil est lePub 2. Cest ce format que nous abordons dans ce tutoriel.

LePub3 est en cours de dveloppement et sera davantage tourn vers des fonctions multimdias. Il nempche donc pas la publication dePub 2 et ne nous concerne pas dans le cadre du livre numrique non enrichi.

Les deux types dePub

Il existe deux grandes catgories dePub : les fixed layout et les reflowable. Les fixed layout imposent que la lecture du fichier, quel que soit le support, conservera la maquette dfinie par le crateur du fichier. Cest un peu comme si vous transposiez directement la maquette complte dun livre sans vous proccuper du support sur lequel le fichier sera lu. Ce format est privilgier pour les ebooks artistiques et/ou graphiques (comme de la BD) mais cest tout. En effet, en figeant la maquette, ce type de fichier ne permet pas de sadapter correctement la diversit des supports (ordinateurs, portables,

tablettes, smartphones, liseuses) et des crans. Imaginez par exemple que vous souhaitiez lire une BD sur votre smartphone. Si les pages sont en fixed layout, votre tlphone affichera la page entire sur lcran, et les textes, devenus trop petits, seront illisibles. Il vous faudra alors zoomer et vous dplacer la main dans chaque page pour pouvoir suivre votre histoire. Pas vraiment agrable en termes dexprience de lecture. linverse, les reflowable sadaptent au support sur lequel ils souvrent. linstar dune page internet, le logiciel de lecture fait correspondre le fichier au format de lobjet. Le texte est donc lisible sur nimporte quel cran, sans avoir besoin de zoomer ou doprer des

changements rbarbatifs. Le seul lment qui change dans un reflowable est la pagination : comme cette dernire sadapte la taille de lcran, vous naurez pas la mme pagination sur un cran de smartphone ou une liseuse. Par exemple, lebook LIncroyable Guide de lautopublication en numrique compte 141 pages sur liseuse alors quil en faut prs de 594 sur iPhone. Le texte est le mme mais, pour tout lire il faut juste parcourir beaucoup plus dcrans. Comme vous le voyez, les ePub reflowable sont les plus pertinents car mme de convenir tous les supports. Cest donc de ce type dePub que nous allons parler ci-dessous. Note : Si vous souhaitez plus

dinformations sur ces deux types de fichier, vous pouvez consulter ce billet de Jiminy Panoz [http://jiminypanoz.com/2012/03/08/reflow text-et-fixed-layout/].

Quy a-t-il dans un ePub ?

Sans rentrer dans les dtails, sachez quun fichier ePub est une sorte de fichier compress type .zip, dans lequel sont regroups tous les lments ncessaires au fichier (polices, textes, images, indications pour les logiciels de lecture). Si vous tes curieux, vous pouvez

regarder ce quil y a lintrieur simplement : il vous suffit de renommer le .epub en .zip puis de dcompresser le fichier, comme vous le feriez avec nimporte quel fichier compress. Un ePub contient trois lments : un fichier nomm mimetype, qui indique au logiciel que le fichier est un ePub un rpertoire nomm meta-inf, disposant du fichier container.xml. Ce fichier indique au logiciel o aller chercher les diffrentes infos dont il a besoin (texte, polices, nom dauteur). Vous naurez normalement pas besoin dintervenir sur ce fichier. un rpertoire nomm OEBPS qui

contient tous les lments ncessaires au contenu de lePub. Ce dernier dispose gnralement de trois rpertoires (Images pour les images, Style pour les feuilles de style, Text pour les textes) et de deux fichiers. Le fichier content.opf recense toutes les mtadonnes du fichier (nom de lauteur, titre de luvre, date de publication) et le fichier toc.ncx est utilis pour la table des matires (toc tant labrviation de table of contents, soit table des matires en anglais). Sauf grosse exception, vous naurez normalement pas intervenir directement dans ces fichiers. Les programmes que

nous allons utiliser le font notre place et dune manire plus intuitive. Remarque : Si vous vous amusez recompresser le dossier en .zip et le renommer en .epub, vous constaterez quil ne sera pas reconnu lors de son ouverture. En ralit, un ePub na pas lensemble de ses fichiers compresss car, pour que lePub soit lu, le fichier mimetype ne doit pas tre compress. Si vous souhaitez le lire, il vous faut donc compresser le dossier en prcisant que mimetype ne doit pas ltre, ou plus simplement utiliser des logiciels ddis la recompression dePubs tels que ePub Packager.

CSS

Lorsque vous lisez un texte, vous apprciez quil soit correctement mis en page. Par exemple, les penses peuvent tre en italiques, le titre de chapitre centr, et le paragraphe commencer par un alina. Toutes ces mises en formes sont prcises au sein des CSS (Cascade Style Sheet, soit feuille de style en cascade en anglais). Les feuilles CSS sont inclues dans lePub et rpertorient toutes les mises en forme utilises. Vous ntes pas oblig de dfinir des CSS pour votre ePub, chaque support pouvant appliquer sa mise en forme par dfaut. Nanmoins, lutilisation des CSS vous permettra de personnaliser votre livre, de rendre sa mise en page plus professionnelle, et donc plus lisible. Nous

aborderons donc dans ce tutoriel la manire dutiliser les CSS. Comme souvent, vous ne trouverez rien de bien sorcier ici et devriez vous en sortir avec un minimum dorganisation.

HTML
Si vous regardez lintrieur dun fichier ePub, en particulier dans le dossier OEBPS/Text, vous constaterez que les textes sont en ralit des pages xhtml (oui, les mmes que celles utilises sur Internet). Un ePub utilise donc la grammaire du html (le xhtml est juste un type un peu plus abouti que le html

classique) pour ses textes et un minimum de connaissance de ce langage peut tre ncessaire. Nanmoins, comme le html est extrmement simple utiliser pour du texte, vous ne devriez pas avoir de difficults. linstar des CSS ci-dessus, nous aborderons les notions de html ncessaires lePub plus loin dans ce tutoriel. Remarque : En ralit, Sigil peut tout fait grer les pages html et xml. Nanmoins, dans le cadre de ce tutoriel, nous considrerons que vous manipulez des pages xhtml. Ce langage est en effet idal pour l'ePub : il est plus carr et logique que le html pur, sans pour autant se rvler aussi tendu que le xml.

Retour au Sommaire

Par o commencer
Pour raliser votre fichier ePub, vous allez avoir besoin de quatre lments : votre texte proprement parler Sigil [http://code.google.com/p/sigil/] Notepad++ [http://notepad-plusplus.org/fr/] Gimp [http://www.gimp.org]

Remarque : Normalement, Notepad++

nest mme pas ncessaire. Je le mentionne pour mmoire car je lai utilis lors de la cration de mon premier ePub de dmo [http://ptgptb.free.fr/ebooks/Ebook_PTGPT le_plaisir_de_jouer.epub] dans la mesure o je travaillais la fois sous Linux et sous Windows et o il me fallait un outil pour faire le passe-plat. Notepad++ constitue en effet une sorte de super blocnotes, bien pratique pour ouvrir les fichiers crs et modifier directement le code (pour les CSS et le html donc). Nanmoins, Sigil se charge trs bien de la majorit des tches.

Retour au Sommaire

Votre texte
Nous nallons pas vous expliquer comment crire votre texte, vous pouvez trs probablement le faire vous-mme. Nanmoins, sachez que, avant de vous lancer dans votre ePub, il vaut mieux que votre texte soit finalis. Ainsi, vous ne vous concentrerez que sur une seule chose : la manire de crer votre ePub. Il faut toutefois savoir que Sigil ne supporte pas tous les formats de texte. Par exemple, les .doc et .docx propres Word ne sont pas compatibles avec Sigil. Dune

manire gnrale, vous pourrez importer sans problme un fichier html (dans votre traitement de texte, vous devez lenregistrer au format Page web, filtre) ou un fichier txt (dans votre traitement de texte, vous devez lenregistrer au format texte). Nous vous recommandons toutefois le format txt car, mme si ce format ne conserve pas la mise en forme, il fournit un fichier trs propre. linverse, les pages html enregistres depuis un traitement de texte rajoutent tout un tas dinformations superflues qui surchargent votre document et ralentissent son exploitation.

Un truc pour ne pas perdre totalement vos mises en forme

Si votre document est long, vous apprcierez sans doute modrment de devoir relire tout votre texte attentivement pour le baliser dans Sigil (mettre litalique, le gras, les titres au bon format). Pour cela, nous avons un petit truc qui vous fera probablement gagner du temps : dtourner la fonction Rechercher/Remplacer pour atteindre directement les lments qui doivent tre modifis. Il faut au pralable que vous balisiez

quelque peu votre document avant de lenregistrer au format texte. Ici, rien de bien compliqu : il suffit de mettre devant chaque groupe de mots ncessitant une mise en forme particulire une balise que vous tes sr de ne pas retrouver dans le corps du texte. Par exemple, pour chaque ensemble de mots devant tre en italique, vous pouvez mettre au dbut du groupe le texte xxxi. Vous pouvez mettre xxxg pour tout ce qui concerne le gras. Pour les titres, vous pouvez mettre du t1, t2, etc. ou xxxt1, xxxt2, etc. Lessentiel est que les balises retenues ne se retrouvent dans votre texte que pour les balises et non au cur du texte (si par exemple, vous avez dcid de baliser un texte avec le terme titre, il y a des chances que, quand vous

recherchiez le mot titre dans votre fichier texte, il ne vous renvoie pas que vos balises mais galement tous les mots titre prsents dans votre texte).

Une fois que vous avez intgr ces balises, vous pouvez enregistrer votre fichier au format texte. Quand vous serez dans Sigil, vous utiliserez le Rechercher/Remplacer et lui demanderez,

par exemple, de rechercher tous les xxxi. Il vous suffira alors, la main (oui, il faut quand mme un peu de manipulation lancienne), de mettre le texte correspondant en italique, puis de supprimer le xxxi. Vous ferez la mme manipulation pour les autres xxxi, puis pour les autres balises que vous avez prcises. Certes, ce processus nest pas aussi rapide que le simple import dune page html cre avec votre traitement de texte mais il prsente lavantage de fournir un fichier propre et donc plus efficace. Et, croyez-nous, en procdant de la sorte, vous gagnerez plus de temps que si vous prfrez enregistrer la page au format html puis effacer toutes les scories superflues

dans Sigil.

Sigil
Sigil est un logiciel open source (i.e. enrichi par les utilisateurs qui le souhaitent et gratuit) pour crer et diter des ePub. Il a la particularit dtre en WYSIWYG (what you see is what you get). En dautres termes, ce que vous voyez dans Sigil apparatra de la mme manire dans votre lecteur ePub. Vous pouvez tlcharger Sigil ici [http://code.google.com/p/sigil/].

Notepad++
Comme expliqu plus haut, ce logiciel est une sorte de bloc-notes avanc. Vous nen aurez normalement pas besoin mais, si jamais vous souhaitez travailler sur le code de lePub en dehors de Sigil, il vous sera trs certainement utile.

Gimp
Gimp est un logiciel de retouche dimages trs puissant qui vous permet dappliquer des effets vos fichiers images. Nous ne nous appesantirons pas

ici sur son utilisation mais sachez quil vous sera trs utile pour convertir vos images (Enregistrer sous), modifier leur taille et raliser votre couverture. Vous pouvez tlcharger Gimp ici [http://www.gimp.org].

Retour au Sommaire

Crer mon premier ePub

Pour ce premier ePub, nous partons du principe que vous souhaitez simplement convertir un texte en ePub, juste pour pouvoir le lire dans ce format, sans conserver la mise en forme. Pour cela, suivez les tapes ci-dessous.

Le texte

1. Ouvrez Sigil 2. Au besoin, crez un nouveau document (Fichier>Nouveau) 3. Dans la fentre de droite, tapez votre texte. Sigil est rparti en trois grandes fentres : la fentre suprieure (1) contient les menus et les raccourcis pour les fonctions principales,

la fentre de gauche (2) liste le contenu de l'ePub. Nous avons vu plus haut qu'un ePub tait une sorte de gros zip. Les diffrents lments

prsents dans ce zip se trouvent dans cette fentre de gauche.

La fentre de droite (3) est celle du texte proprement dit.

Remarque : Vous pouvez faire aussi un copier/coller de votre document original dans Sigil.

Les mtadonnes
Pour quun fichier ePub soit valide, il doit contenir au minimum trois lments : le texte proprement dit le nom de lauteur le titre de luvre Ces deux derniers lments font partie de ce que lon appelle des mtadonnes, i.e. un ensemble dinformations qui gravitent autour du texte mais qui ne lui sont pas lies directement. On peut

notamment faire figurer dans les mtadonnes le nom du traducteur, de lillustrateur, la date de publication, le numro ISBN (identifiant propre au livre et quivalant au code barre) Seuls les noms dauteur et duvre sont ncessaires la validation de lePub mais de bonnes mtadonnes, prcises et exhaustives, faciliteront le travail des moteurs de recherche et auront un impact sur les tlchargements de votre ebook. Nous allons voir ci-dessous comment renseigner facilement ces lments sous Sigil. 1. Dans le menu dition, slectionnez diteur de mtadonnes 2. Renseignez les champs indiqus (Titre et Auteur, au minimum)

3. Prcisez la langue de votre ePub. Par dfaut, elle est en anglais, aussi slectionnez French (ou toute autre langue correspondant la langue de votre texte).

Remarque : Stricto sensu, la prcision de la langue nest pas obligatoire pour le bon fonctionnement de lePub. Nanmoins, elle permettra aux appareils de lecture de mieux se conformer la langue dfinie, en termes de csure et de dictionnaire notamment.

Vrification de routine
Normalement, votre ePub devrait tre

oprationnel. Nanmoins, pour en tre sr, deux petites manipulations simposent : vrifier le fichier et lenregistrer. 1. Pour vrifier le fichier, cliquer sur licne Valider lePub tout droite (la coche verte). Normalement, un message saffiche vous indiquant que tout est ok. Si Sigil relve des erreurs, il vous lindique. 2. Enregistrez votre fichier via Fichier\Enregistrer sous. Voil, vous venez de raliser votre premier ePub. Certes, celui-ci est un peu brut de dcoffrage, sans textes ni images, sans mme une mise en forme particulire. Vous pouvez nanmoins le lire sans problme sur les diffrents supports

concerns. Nous allons dsormais aborder la manire de mieux organiser votre ePub.

Retour au Sommaire

Pages, titres et table des matires La logique des pages dans un ePub
Comme nous lavons vu plus haut, le fichier ePub adopte une mise en page reflowable, i.e. o la pagination lie au texte sadapte lcran qui laffiche.

Nanmoins, il est important de savoir quun ePub contient lui aussi des pages mme si celles-ci ne sont pas tout fait les mmes que celles auxquelles vous tes habitu. Si vous explorez un fichier ePub dans Sigil, vous constaterez que, dans le dossier Textes, il y a parfois plusieurs fichiers xhtml. Ce sont ces fichiers xhtml qui constituent les pages de lePub. Ce ne sont donc pas des pages au sens o on lentend habituellement, mais lquivalent de pages web. Schmatiquement, considrez quune page xhtml correspond une section bien dfinie de votre texte (chapitre, partie, sous-partie, lexique, remerciements). Supposons par exemple que vous ayez

crit une nouvelle qui se compose de trois chapitres. Vous pouvez tout fait mettre les trois chapitres au sein dune mme page xhtml. Nanmoins, cela impliquera que la machine (liseuse, smartphone, tablette, ordinateur) chargera dans sa mmoire lensemble du texte en une seule fois alors que vous navez pas besoin de tout. linverse, si vous dcidez de faire un fichier xhtml par chapitre, votre support ne chargera que la page xhtml en cours de lecture, ce qui sera plus rapide et moins gourmand en nergie. Qui plus est, le fait de travailler sur plusieurs pages xhtml clairement dfinies vous aidera vous organiser et mieux vous reprer dans lePub. Supposons par exemple que votre texte soit une slection

darticles de votre blog et que, pour une raison quelconque, vous dcidiez de modifier lun des billets. Vous pouvez faire un rechercher/remplacer dans votre grosse page xhtml qui contient tous vos textes ou bien vous rendre directement sur la page incrimine si vous avez eu la bonne ide de raliser plusieurs pages distinctes dans votre ePub. Comme vous le voyez, le fait de raliser plusieurs pages dans un ePub est prfrable car cela facilite le chargement des pages (et les logiciels de lecture des liseuses ne sont pas des foudres de guerre comme les ordinateurs) et permet de mieux organiser son travail. Cela constitue en quelque sorte la preuve dun travail soign et professionnel.

Retour au Sommaire

Comment insrer des pages dans Sigil

La procdure est relativement simple, partir du moment o vous vous trouvez dans Sigil. Vous avez, au choix, deux mthodes : linsertion de pages proprement parler et linsertion de sauts de chapitres.

Insrer des pages proprement parler

1. Dans le navigateur du livre (la fentre de gauche), positionnezvous sur Textes 2. Faites un clic droit et slectionnez Ajouter section vierge. 3. Ritrez lopration autant de fois que ncessaire. Voil, vous avez dsormais vos pages supplmentaires.

Insrer des pages grce aux sauts de chapitre

Lorsque vous lisez un livre, moins quil ne sagisse dun trs vieux livre de poche, lorsque vous attaquez un nouveau chapitre, vous commencez votre lecture

sur une nouvelle page. Ce changement de page facilite votre lecture en marquant une nette diffrence entre la fin dun texte (le chapitre prcdent) et le dbut dun autre (le chapitre suivant). Sigil conserve cette logique lie au changement de page de sorte que, pour chaque changement de chapitre que vous souhaitez, il cre une nouvelle page. Voici la procdure suivre : 1. Slectionnez la page Section0001.xhtml 2. Si jamais cette page dispose dj dun texte, assurez-vous de placer le curseur lendroit prcis o vous souhaitez effectuer le changement de chapitre. Sigil gnrera en effet le saut de page

lendroit o se situe votre curseur. 3. Appuyez sur licne Chapter Break situe dans le menu suprieur (ou utilisez le raccourci clavier ctrl + Entre ou encore dition\Saut de chapitre)

4. Si besoin, replacez le curseur lendroit de votre texte o vous souhaitez insrer un saut de chapitre 5. Ritrez les tapes 3 et 4 jusqu obtenir le nombre de pages dsires.

Remarque : Vous pouvez aussi insrer

des sauts de chapitre en utilisant le raccourci ctrl+ Entre ou en passant par le menu dition\Saut de chapitre. Tout lintrt de cette mthode est que chaque page cre est une sorte de clone de la page rfrente. Ainsi, si vous avez dcid dappliquer des styles particuliers votre texte, ceux-ci pourront galement tre directement appliqus aux autres pages, sans que vous ayez besoin de prciser chaque fois o aller chercher les styles utiliser (voir la partie sur les CSS plus bas).

Renommer les pages xhtml

Si vous le souhaitez, vous pouvez renommer les pages xhtml de votre ePub pour mieux vous y retrouver. Par exemple, plutt que davoir quatre fichiers classiques (Section1.xhtml, Section2.xhtml, Section3.xhtml, Section4.html), vous pouvez les renommer pour quils sappellent Chapitre1.xhtml, Chapitre2.xhtml, Chapitre3.xhtml et Remerciements.xhtml. L encore, la procdure est simple : 1. Slectionnez la page que vous souhaitez renommer 2. Faites un clic droit et slectionnez Renommer. 3. Renommez votre page, en noubliant pas de bien mettre lextension .xhtml

Pour un traitement correct de votre fichier, quelques prcautions dusage sont respecter dans le nom de votre fichier. Ainsi, nutilisez pas de lettres accentues, de caractres spciaux (comme les points dinterrogation ou dexclamation) et ne mettez pas despace. Remarque : Vous pouvez galement renommer votre page en la slectionnant et en appuyant sur F2.

Retour au Sommaire

Titres
Bien. Nous avons donc vu comment organiser votre ePub en plusieurs pages xhtml pour lui donner une prsentation cohrente. Il est temps dsormais de sintresser aux titres et la hirarchisation de votre texte. Si votre texte est long, il sera certainement divis en plusieurs parties, voire en sous-parties. Sil sagit dune uvre de fiction, vous aurez sans doute des chapitres. Si votre ouvrage est un essai, vous aurez vraisemblablement des

chapitres, des sous-chapitres, voire des sous-sous-parties. Et, si vous vous tes donn la peine dorganiser vos propos, vous aimeriez galement que votre lecteur puisse sy retrouver facilement. Les titres sont l pour a. Ils interviennent dans votre fichier de deux manires. Dune part, en tant que titres, ils disposent dune mise en forme spcifique qui les met en avant. Cela permet de rythmer la lecture et de se reprer plus facilement dans le texte. Dautre part, comme ils sont dfinis comme titres dans Sigil, vous allez pouvoir crer une table des matires automatique rapidement et sans problme. Vos lecteurs pourront ainsi naviguer dans lePub directement partir de cette table

des matires. Remarque : Dans un ePub, la table des matires est automatise et se trouve en dehors du texte proprement dit (vous savez, cest le fichier toc.ncx auquel on na pas besoin de toucher). Il nest donc pas forcment ncessaire de faire figurer, en dbut ou en fin douvrage, une table des matires ou un sommaire similaire celui que vous trouvez dans les versions papier. Seule exception notable la rgle : si vous destinez votre fichier au format Kindle. Le format de fichier propre au Kindle implique en effet la prsence dune table des matires physique. Si vous envisagez ce support, il vous faudra donc rajouter votre table des matires manuellement dans votre ePub, liant

chaque section de votre livre au fichier xhtml concern en lien hypertexte. Elle fera doublon avec le toc.ncx mais cest une contrainte avec laquelle il faut malheureusement composer

La hirarchie des titres

Lintrt de mettre des titres est de hirarchiser linformation. Les titres seront donc des titres de niveau 1, 2, 3 Un titre de niveau 1 correspond gnralement un titre de chapitre ou de grande partie. Un titre de niveau 2 est une sous-partie

dun titre de niveau 1. Il spare le contenu de votre texte en plusieurs grands ensembles clairement identifiables. Par exemple, si vous avez un texte qui a pour titre de niveau 1 Les tres vivants, vous aurez probablement, en titres de niveau 2, Les vertbrs et Les invertbrs. Un titre de niveau 3 constitue lui-mme une sous-partie dun titre de niveau 2. Pour reprendre lexemple ci-dessus, vous pourriez avoir, en titre de niveau 3 Les animaux marins, Les animaux volants et Les animaux terrestes. Un titre de niveau 4 est une sous-partie dun titre de niveau 3. Et ainsi de suite. Sachez que vous pouvez aller jusqu 6 niveaux de titres, ce qui est normalement

amplement suffisant. titre indicatif, ce tutoriel dispose de 5 niveaux de titres et cela fait dj une arborescence bien dveloppe.

Le balisage des titres

Normalement, si vous avez bien prpar votre texte au pralable, vous savez dj quel texte constitue un titre, quel texte constitue un sous-titre, quel texte constitue un sous-sous-titre et ainsi de suite. Le balisage est alors extrmement simple. 1. Slectionnez la portion de texte laquelle vous voulez appliquer une

mise en forme de titre

2. Cliquez sur la bote de dialogue Normal et slectionnez le niveau de titre que vous souhaitez (Heading 1 pour titre de niveau 1, Heading 2 pour titre de niveau 2). Sigil appliquera une mise en forme spcifique pour chaque niveau de titre. Nous verrons plus loin comment modifier (ou crer !) ces mises en forme pour les personnaliser lenvi.

3. Rptez lopration pour tous les titres de votre document

Retour au Sommaire

Table des matires

Nous avons vu plus haut que lintrt dune table des matires au sein dun ePub tait son automatisation. Pour faire simple, votre table des matires est une sorte de grosse page web qui reprend vos titres et qui, lorsque vous cliquez sur lun deux, vous amne directement la page concerne. Donc, si vous avez correctement balis votre fichier, vous pourrez gnrer automatiquement une table des matires propre et efficace.

Comment gnrer une table des matires

Comme cette cration est totalement gre par Sigil, vous navez qu suivre les quelques tapes ci-dessous. Maintenant que vous avez cr les titres, il ny a presque plus rien faire.

1. Tout dabord, affichez la fentre de Table des matires via Vue\Table des matires ou en appuyant sur alt + F3 2. Cliquez sur le bouton Gnrer TDM depuis les titres 3. Une nouvelle fentre intitule Slecteur de titres apparat, vous prsentant la table des matires. Si certains titres napparaissent pas ce stade, cest parce quils nont pas t correctement baliss. Refermez donc ce slecteur et vrifiez le balisage. Puis reprenez ltape 2.

4. Le slecteur vous permet de choisir les titres que vous souhaitez voir apparatre dans votre table des matires. Si vous voulez en faire disparatre certains (par exemple, si vous souhaitez vous cantonner aux titres de niveau 1 et 2), il suffit de retirer la coche des cases correspondantes. 5. Cliquez sur OK. Votre nouvelle

table des matires est oprationnelle et apparat dans sa fentre. 6. Par acquis de conscience, cliquez sur licne Valider lePub tout droite (la coche verte). Normalement, un message saffiche vous indiquant que tout est ok. Si Sigil relve des erreurs, il vous lindique.

Remarque : Pour gnrer la table des matires, Sigil balise votre texte avec des id, des marqueurs didentit qui lui permettent de sy retrouver. Par dfaut, il leur donne des noms abscons (comme id_heading_1) mais vous pourrez les modifier si besoin dans le code html. Sigil remettra automatiquement jour la table

des matires. Comme vous le voyez, le fait de bien structurer son texte en amont permet ensuite de gagner en efficacit.

Retour au Sommaire

Avant de poursuivre
Nous venons de voir comment raliser un ePub trs facilement. Histoire de bien fixer les lments, voici un rapide rsum des lments prendre en compte. 1. Importez ou tapez votre texte. 2. Au besoin, organisez-le en ajoutant des pages pour viter que tout ne se trouve en un seul bloc. 3. Balisez correctement votre texte en

4. 5. 6. 7.

termes de titres et de sous-titres. Gnrez votre table des matires. Renseignez les mtadonnes Auteur et Titre, ainsi que celles que vous estimez utiles. Lancez la vrification de lePub. Si tout est ok, enregistrez le fichier en noubliant pas de prciser lextension .epub. Vous pourrez ds lors le lire sur tous les supports mme douvrir ce type de fichier.

Nous allons maintenant nous pencher sur la manire de personnaliser et doptimiser votre fichier. Pour cela, nous vous prsenterons dabord les diffrentes icnes de Sigil, pour que vous soyez en terrain de connaissance. Puis nous

aborderons les feuilles de style CSS.

Retour au Sommaire

Linterface de Sigil
Vous tes dj familiaris avec certains lments de linterface de Sigil. Voyons maintenant quoi correspondent les diffrentes barres doutils. Remarque : La prsentation cidessous est extraite de L'Autopublication by Walrus de Jiminy Panoz. Sil aborde la cration dun ePub, sa lecture se rvle surtout instructive concernant les diffrentes plates-formes dauto-dition et

la manire de promouvoir son titre (un lment ne surtout pas ngliger si on veut sortir du lot !)

Retour au Sommaire

La range suprieure
Le premier bloc vous sert Crer un nouveau fichier, Ouvrir un fichier, Enregistrer et Enregistrer sous.

Le deuxime bloc est constitu des lments Annuler et Refaire.

Le troisime fournit couper/copier/coller.

les

outils

Le quatrime vous sert Rechercher dans le texte et Rechercher + remplacer (trs utile pour bien coordonner les CSS).

Le cinquime permet de rgler laffichage du texte et de son formatage : vue normale, vue normale + vue en code HTML, vue en code HTML. Vous

utiliserez ces icnes lorsque nous attaquerons loptimisation du code et les CSS.

Le sixime et dernier bloc vous permet dinsrer un nouveau chapitre (donc insre un saut de page numrique) ou une image. Cette dernire doit tre au format jpg, gif ou png.

La range infrieure
Le premier bloc est un slecteur qui vous permet dorganiser votre table des matires par arborescence (headings). Vous lavez dj utilis pour faire votre table des matires automatique.

Le deuxime bloc vous permet de mettre en gras, italique, souligner ou rayer la partie de texte que vous avez slectionne.

Le troisime vous permet daligner droite ou gauche, de centrer et de justifier votre texte. Vous naurez

normalement pas besoin de ces outils si vous utilisez les CSS.

Le quatrime permet dinsrer des listes puces ou numrotes.

Le cinquime bloc vous permet de faire un don pour aider au dveloppement de lapplication.

Le sixime vous permet de rgler

lindentation de votre texte. L encore, recourir aux CSS permet de se passer de ces outils.

Le septime et dernier bloc vous permet de nettoyer le code HTML de votre e-book et de valider votre fichier pour vous assurer quil est correct. Vous avez dj utilis la coche verte pour vous assurer que votre premier ePub fonctionnait convenablement.

Pourquoi des outils qui ne servent rien ?

Vous avez probablement remarqu quune bonne partie des outils proposs par Sigil ne nous serviront pas dans le cadre de ce tutoriel. Les utiliser nempchera certes pas votre ePub de fonctionner mais, comme le but de ce tutoriel est de vous apprendre raliser un fichier optimis, utiliser ces outils risque de plus vous gner quautre chose : vous appliqueriez un effet quil vous faudrait ensuite retravailler proprement

dans le code du fichier. Nous prfrons de loin passer directement par le code pour configurer ds le dpart les bons lments, sans passer par ltape utilisation doutil + retouche. Cela sera peut-tre un peu plus laborieux (et encore, vous verrez que le html et les CSS sont globalement simples pour les ePub) mais, au final, vous aurez la satisfaction davoir ralis un ePub dont vous naurez absolument pas rougir auprs des professionnels. Un ePub qui, en outre, sera calibr pour viter les bugs et faciliter sa lecture.

Retour au Sommaire

Les bases du HTML

Bien. Nous entrons dsormais dans la partie cambouis de lePub. Pour pouvoir raliser ce que vous souhaitez proprement, il va vous falloir patauger un peu dans le code html et les CSS. Pas de panique ! Le html est un langage simple, surtout lorsquil sapplique du texte. Nous allons donc voir dans un premier temps comment se compose un fichier html (ou xhtml), histoire de comprendre la logique de prsentation, puis nous

aborderons les balises utiles en ePub. Remarque importante : Toutes les informations qui suivent ont pour but de vous familiariser avec le langage html. Mais vous naurez nullement tout saisir la main, Sigil sen charge trs bien. Seulement, le html, cest comme la mcanique : si vous voulez commencer bidouiller dans le moteur, il vaut mieux que vous compreniez comment a fonctionne pour viter les erreurs.

Les principes de saisie

Le html est un langage de programmation driv de langlais. Par consquent, pour tout ce qui concerne ses lments, nutilisez PAS de termes avec accent. De mme, ce langage informatique gre mal les espaces au sein de ses propres balises. Si vous devez crer des identits ou des classes (nous verrons plus loin de quoi il sagit), les noms que vous choisissez devront tre attachs et sans caractre spcifique. Dune manire gnrale, cantonnez-vous lalphabet, aux chiffres et aux tirets, vous serez sr de ne pas vous tromper.

Le code dune page

web
Une page web telle quaffiche par votre navigateur Internet est en ralit une page de texte pur, contenant tout un tas dinstructions daffichage (tel lment en haut, tel bloc gauche) et de liens vers les objets prsents sur la page (une image, une vido, une adresse mail). Cest votre navigateur qui interprte les diffrentes instructions pour afficher correctement la page. Sous Sigil, imaginons une bte page xhtml qui contient le texte suivant : Ceci est une page test dePub.

Elle comporte trois paragraphes. Ceci est une page test dePub. Elle comporte trois paragraphes. Ceci est une page test dePub. Elle comporte trois paragraphes. Si vous copiez et collez ces trois paragraphes dans une page vierge de Sigil et que vous basculez ensuite en vue html (via la barre doutils ou en apppuyant sur F11), vous aurez le texte suivant :

Prsent comme cela, lensemble parat trs abscons mais ne lest en ralit pas tant que cela. Nous allons dcortiquer ensemble les diffrentes parties de ce

code pour que vous en compreniez bien la logique.

Le bloc de dclaration

Ce premier paragraphe indique au navigateur de quoi est compos le fichier quil est en train de lire. Il rpond une syntaxe trs prcise dont il ne faut pas dvier. Fort heureusement, Sigil gnre

tout seul ce bloc de dclaration.

Le bloc html

Cette ligne indique au navigateur que le reste du texte quil va lire utilise le langage html. Cest dans ce bloc que vous prciserez la langue de votre page, pour aider le logiciel effectuer les bonnes csures. Il vous faudra pour cela rajouter le texte xml:lang="fr", pour avoir :

Remarque : Il vous parat sans doute trange de devoir ajouter cette mention alors que, dans les mtadonnes de votre fichier, vous avez dj prcis la langue. Sachez que ce rajout permet surtout aux machines de grer correctement les csures et les dictionnaires intgrs. Il nest donc pas ncessaire au bon fonctionnement de lePub mais constitue une jolie cerise sur le gteau.

Le bloc en-tte

Cest dans ce bloc que vous dclarez certains informations propres au fichier tel le titre de la page (vous savez, ce qui apparat en haut de votre navigateur Internet) ou lendroit o aller chercher les feuilles de style.

Le bloc body

Cest dans ce bloc que vous allez avoir tout votre texte. Ce bloc peut donc se rvler trs long mais il ne prsente gure de difficults.

Le bloc html, retour

Cette balise clt le fichier html et nous permet daborder llment le plus important du html : lutilisation des balises.

Retour au Sommaire

Les balises html

Il faut savoir que le langage html utilise des balises, qui agissent comme des marqueurs dans le fichier. Ainsi, il existe des balises pour les titres, les paragraphes, les images Pour faire simple, imaginez les balises comme des guillemets de dialogue. Quand vous lisez un texte, un guillemet au dbut vous prcise que le dialogue commence. Et, en fin de dialogue, un second guillemet, lgrement diffrent du premier, vous indique que le dialogue est termin. Si

vous navez que le guillemet de dpart, la lecture vous gne car vous sentez quil manque quelque chose en fin de texte. Eh bien, pour les balises, cest pareil : si vous voulez que tout fonctionne, il faut une balise au dbut et une autre balise, lgrement diffrente, la fin. Et au milieu, le texte auquel sappliquent les balises. Toutes les balises html prennent la forme <XXX> et </XXX>. La balise <XXX> figure au dbut, et la </XXX> figure en fin. Si vous reprenez le code ci-dessus, vous verrez que les balises suivent exactement cette logique. Ainsi, vous avez en haut un <html> et tout en bas un </html>. Ou encore <p> et </p>.

Certaines balises sont galement plus longues que dautres. Par exemple, <html xmlns="http://www.w3.org/1999/xhtml"> est lgrement plus complexe quun simple <html>. Cest tout simplement parce que, pour certaines balises, vous pouvez rajouter des informations complmentaires lintrieur. Nous verrons plus bas les infos complmentaires quon peut rajouter, lessentiel tant ici de se souvenir quelles se mettent dans la premire balise.

La logique des cumuls de balise

Vous avez de la chance, le langage html est un langage relativement simple et trs logique. Si vous labordez calmement, vous verrez quil nest gure sorcier pour peu que lon garde en mmoire quelques grands principes. Nous avons dj abord le premier principe, celui des balises ouvrantes et fermantes. Nous allons dsormais aborder la question des balises multiples. Imaginons que vous souhaitiez quun mot dun paragraphe se trouve en italique alors que le reste du paragraphe ne lest pas. Votre paragraphe normal se trouvera encadr par les balises <p> et </p> (les balises pour les paragraphes) alors que votre mot sera encadr par les balises <i> et </i> (les balises pour litalique).

Supposons que dans la phrase Je suis ici mais pas l, vous souhaitiez mettre en italique le ici. On aurait alors le code suivant :

Comme vous le voyez, le code pour litalique (<i> et </i>) se trouve imbriqu dans le code du paragraphe (<p> et </p>). Limbrication des balises est aussi simple que a : la dernire balise ouverte doit tre la premire ferme. Comme dans un jeu de poupes russes, vous vous assurez que la plus petite (ici la plus imbrique) est complte (i.e. ouverte et ferme) puis vous passez la poupe russe un peu plus

grande puis celle encore plus grande et ainsi de suite. Cela vous semble compliqu ? La bonne nouvelle, cest que Sigil est quip dun outil puissant pour nettoyer votre code html (cest licne du pinceau ct de la coche verte) et quil peut rattraper vos erreurs dinattention. Lautre bonne nouvelle est que, pour un fichier texte, vous aurez relativement peu de balises imbriques les uns dans les autres.

Les balises de hirarchisation

Il est maintenant temps de vous

prsenter les principales balises que vous pourrez utiliser. Plutt que de toutes vous les lister abruptement, nous avons prfr les regrouper par catgories. Ces catgories ne sont en rien officielles, elles nous ont simplement paru plus pratiques pour la comprhension des diffrentes balises. Nous allons commencer par les balises de hirarchisation, i.e. celles qui vous permettent dorganiser votre document. Elles sont de deux grands types : les balises de titre et les balises de paragraphe.

Les balises de titre

Selon le niveau que vous souhaitez

pour votre titre, ces balises prendront la forme dun h (heading en anglais, pour titre) suivi dun numro. Ainsi vous avez : <h1> </h1> pour les titres de niveau 1 <h2> </h2> pour les titres de niveau 2 <h3> </h3> pour les titres de niveau 3 <h4> </h4> pour les titres de niveau 4 <h5> </h5> pour les titres de niveau 5 Et <h6> </h6> pour les titres de niveau 6 Remarquez quil nexiste pas de balises pour des titres de niveau 7 et

infrieurs. Six niveaux de titre sont largement suffisants pour couvrir la hirarchisation de votre texte mais, si vous souhaitez aller au-del, vous pouvez encore ruser en ajoutant des listes puces, pour distinguer les diffrents lments. Lorsque vous avez appliqu les styles vos titres pour prparer la table des matires, Sigil a attribu ces balises aux textes concerns (vous pouvez le vrifier en basculant en vue html, via la barre doutils ou en appuyant sur F11).

La balise de paragraphe
Elle est toute simple : <p> et </p>. Tout paragraphe de la page commencera par <p> et se terminera par </p>.

Les balises de mise en forme

Aux commencements dInternet, les CSS et leur mise en forme nexistaient pas. Nanmoins, les concepteurs avaient pris soin de crer quelques balises de mise en forme applicables directement dans le code html. Ces dernires sont toujours utilises et vous permettent dallger le code de vos CSS (donc de rendre vos fichiers plus efficaces).

Italique
Vous pouvez utiliser indiffremment <i> </i> et <em> </em>, interprts de la

mme manire par les logiciels. Nanmoins, si vous tenez tre le plus logique par rapport au code html, privilgiez le <em> </em>.

Gras
Vous pouvez utiliser indiffremment <b> </b> (b comme bold, soit gras en anglais) et <strong> </strong> interprts de la mme manire par les logiciels. Nanmoins, si vous tenez tre le plus logique par rapport au code html, privilgiez le <strong> </strong>.

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

pour underlined, soit soulign en anglais) pour le soulignement. Nous ne les mentionnons ici que par souci dexhaustivit car ces balises sont bannir dans un ePub : elles sont tout simplement une source derreur. Qui plus est, le soulignement sert dj pour les liens hypertextes. Lutiliser pour une autre fonction sera donc plus source de confusion quautre chose.

Exposant
Si vous utilisez des abrviations, vous aurez peut-tre recours des 1er, 2e, 3e et ainsi de suite (notez au passage que labrviation correcte utilise seulement le e et non le me comme on le

voit trop souvent avec 2me, 3me, etc.). Le e de ces abrviations est en exposant, i.e. plus petit et surlev par rapport la ligne de base de votre texte. Pour le mettre en exposant, il faudra utiliser les balises ^et. Par exemple, pour le texte 1er prix : une tablette tactile, votre code aura la forme suivante :

Remarque : Lutilisation de la balise <sup> permet effectivement de relever votre texte par rapport la ligne de base. Nanmoins, elle ne diminue pas la taille

de la lettre. Pour que la mise en forme soit harmonieuse par rapport au reste du paragraphe, il faudra donc veiller dfinir un style pour cette balise, ce que nous verrons plus loin.

Quelques balises supplmentaires

Retour la ligne
Parfois, vous voudrez que votre texte retourne la ligne sans forcment gnrer un nouveau paragraphe (par exemple, vous voulez faire une numration avec des tirets et ne voulez pas dinterligne

accru entre chaque ligne). Dans ce cas-l, vous pouvez forcer le renvoi la ligne en utilisant <br />. Notez que, exceptionnellement, cette balise na pas besoin dune balise fermante.

Exemple

Liens hypertexte externes

Vous souhaiterez peut-tre insrer dans

votre fichier des liens vers des pages web. Dans ce cas-l, vous le ferez avec linstruction <a href="XXX"> </a> (a est labrviation de anchor, soit ancre en anglais), o vous remplacerez XXX par ladresse web que vous dsirez. Il est prfrable que vos liens hypertextes soient clicables depuis un texte, et non une image. En effet, les liseuses ne traitent pas les liens hypertextes sur les images. Donc, si vous les mettez, sachez quils ne seront pas toujours actifs et que tout dpendra du support de lecture.

Exemple Supposons que, dans le texte Plus dinfos sur Google, vous souhaitiez que Google soit cliquable et vous amne

la page daccueil du moteur de recherche. Le code html sera alors :

Liens hypertexte au sein de lePub

Parfois, notamment si votre texte est long, vous aurez envie de permettre votre lecteur daller directement une section de votre page xhtml ou de votre document. Il ne sagit donc pas ici de liens externes qui renvoient vers une adresse extrieure mais de liens internes

propres votre fichier. On distinguera deux types de liens internes : ceux qui renvoient une autre page xhtml de votre ePub et ceux qui renvoient la mme page xhtml de votre ePub mais un autre endroit (comme pour une note de bas de page). Dans le premier cas, le code reste le mme que ci-dessus (soit <a href="XXX"></a>), ceci prs que, en lieu et place du XXX mentionn cidessus, vous indiquez le nom de la page xhtml que vous souhaitez. Normalement, lensemble des documents xhtml se trouvent dans le mme sous-dossier de lePub (gnralement Text). Vous navez donc pas besoin de prciser lemplacement du fichier.

Cependant, sil savre que, pour une raison ou une autre, les textes lis ne se trouvent pas dans le mme sous-dossier, il faudra alors prciser le chemin suivre.

Exemple Vous avez un texte qui dit Vous pouvez en savoir plus sur lauteur ici, o ici renvoie une notice bibliographique de lauteur prsente en fin de fichier. Cette notice se trouve dans une page xhtml intitule notice.xhtml. Le code est alors le suivant :

Supposons maintenant que cette notice se trouve ailleurs, dans un rpertoire intitul Text. Le code serait alors :

Les .. indiquent quil faut remonter dun dossier dans larborescence (i.e. passer du dossier o se trouve le xhtml au dossier racine) puis se rendre dans le dossier Text pour y trouver la bonne page.

Liens hypertexte au sein dune mme page

Si vous souhaitez quau sein dune mme page xhtml, un renvoi seffectue (comme pour un appel de note de bas de page, par exemple), vous allez avoir besoin de deux lments supplmentaires : id et #. Id (pour identification) est un marqueur qui agit comme une sorte de drapeau. Vous lintgrez au sein dune balise dj existante, vous lui attribuez un nom et, lorsque vous vous rfrerez ce nom, le logiciel le retrouvera automatiquement. Comme il sagit dun marqueur qui permet au logiciel de se reprer, les id de chaque page doivent tre uniques pour empcher toute confusion. Le nom attribu une id ne peut donc pas tre repris pour une autre id de la mme page.

Remarque : Vous pouvez en revanche attribuer le mme nom des id qui se trouvent dans des pages diffrentes. En effet, lorsque vous faites un lien vers une autre page, vous prcisez le nom de la page, ce qui empche la confusion avec une autre id. # est pour sa part un marqueur qui indique au logiciel de rester dans la mme page xhtml. Lorsque vous saisissez le lien, en lieu et place du XXX, vous prcisez # suivi du nom de lid que vous aurez dfinie. Le logiciel se chargera de vous emmener directement au texte correspondant. Exemple Vous souhaitez que, dans votre texte, le terme Calembour soit cliquable et vous

amne en bas de fichier pour une note explicative mentionnant Dfinition de Calembour : jeu de mots. Pour cela, vous allez devoir indiquer, pour Calembour, quil y a un lien suivre et, pour Dfinition de Calembour : jeu de mots, quil y a un drapeau auquel se rendre. Ce drapeau doit avoir un nom, que nous appellerons note1. Le code sera le suivant :

Le #note1 indique au navigateur de rechercher lid note1 dans la mme page

xhtml que le texte. Le navigateur se rend donc au paragraphe dfini par id="note1" et laffiche. Remarque : Nous ne saurions trop vous conseiller, si vous multipliez les renvois, de rester logique dans les noms que vous donnez vos id. Cela sera certes un peu plus laborieux mais vous permettra au final de mieux vous y retrouver.

Liens hypertexte vers un point prcis de lePub

Vous aurez parfois besoin dinsrer un lien vers un endroit prcis dune autre page xhtml. Supposons par exemple que,

dans un ePub de recettes de cuisine, une page liste tous les ingrdients ncessaires et la manire de les prparer et que vous souhaitiez insrer un lien, non pas vers la page des ingrdients mais vers un ingrdient en particulier. Il va vous falloir indiquer au logiciel dans quelle page aller chercher, et quelle ancre sattacher. Le code est ici un mlange de deux codes que nous avons vus ci-dessus : le lien vers une autre page et le lien au sein dune mme page. Il prendra la forme suivante :

Noubliez pas dans le nom de la page, de bien prciser le nom complet, avec lextension (xhtml ou html la plupart du temps).

Exemple Reprenons lide de la recette de cuisine. Vous souhaitez que votre texte 1 kg de pommes de terre renvoie vers la page ingredients.html, la balise pommesdeterre. Vous aurez alors : Dans la page o vous insrez le lien :

Et dans votre page dingrdients, pour

le paragraphe pommes de terre :

Renvois multiples
Gardez enfin lesprit que votre texte est un texte vivant, dans lequel le lecteur doit pouvoir naviguer facilement et reprendre sa lecture aprs avoir lu votre renvoi. De la mme manire que vous avez dfini des liens du texte vers votre renvoi, il vous faudra donc dfinir des liens de votre renvoi vers le texte, toujours avec <a href="XXX"> </a>.

Exemple Reprenons le cas de la note relative aux calembours. Conformment nos recommandations, vous avez dcid de mettre un renvoi la fin de vos notes pour retourner au corps du texte. Vous avez deux id dfinir : celle pour le paragraphe contenant lappel de note, pour pouvoir y revenir par la suite et celle pour la note. Nous appellerons ces deux id Onote1 (o pour origine) et note1. Enfin, nous insrerons en fin de note le texte [Retour], cliquable pour revenir au texte. Le code sera alors le suivant :

Pour la note proprement parler :

Liens mail
Vous pouvez galement vouloir que le lien nouvre pas une page Internet mais un mail dans lequel il soit possible dcrire. Dans ce cas-l, la balise est juste un peu plus prcise : <a href="mailto:XXX"> o vous remplacerez XXX par une adresse mail valide.

Exemple Dans votre page de prsentation, vous souhaitez laisser la possibilit au lecteur de vous contacter et indiquez donc la mention suivante : Si vous avez des remarques ou des suggestions, nhsitez pas me contacter esteriane626@gmail.com.. Le code html sera le suivant :

Remarque : Dans le code html,

ladresse mail de cet exemple est rpte deux fois. La premire indique en ralit au navigateur le lien suivre pour envoyer le message tandis que la seconde affiche ladresse lcran. Mais vous pouvez tout fait avoir comme texte Si vous avez des remarques ou des suggestions, nhsitez pas me contacter ici avec un ici cliquable qui ouvre la messagerie. Le code sera alors :

Insertion dimage
Les critres pour insrer une image Vous souhaiterez trs probablement insrer des images dans votre texte, quil sagisse dun logo ou de votre couverture. Sigil vous permet dinsrer trs facilement de telles images via dition\Insrer une image ou le bouton de la barre doutils. Cependant, vous devez connatre quelques lments pour procder correctement. En premier lieu, le format de fichier. Il existe de multiples formats daffichage dimage mais les ePub nen grent que trois : les .jpg, les .gif et les .png. Le choix dun format ou dun autre pour votre ePub a assez peu dincidence sur la

qualit daffichage donc il vous suffit de vous assurer que vos images sont au bon format. En deuxime lieu la taille de votre fichier image. Nous avons vu plus haut quun ePub tait un fichier compress type zip qui contenait diffrents lments, dont des images. Donc, plus le fichier de votre image sera lourd et plus lePub le sera. Si vous avez peu dimages, ce nest pas forcment gnant. Nanmoins, si votre ePub contient beaucoup dimages, il peut tre intressant que vous rduisiez en amont le poids de vos fichiers pour viter de vous retrouver avec un ebook de plusieurs megaoctets. Pour rduire le poids de vos fichiers, vous avez deux solutions (que vous

pouvez combiner) : rduire le nombre de pixels qui composent votre image et privilgier le format jpg. En effet, le format jpg inclut, la base, une compression dimage si bien quune image en jpg ne fera pas le mme poids quune image en .gif. Pour rduire le nombre de pixels de votre fichier, il va vous falloir passer par un logiciel de retouche dimage. Gimp [http://www.gimp.org] est gratuit et permet trs bien cela : 1. Ouvrez votre image dans Gimp 2. Allez dans Image\chelle et taille de limage 3. Assurez-vous de voir le symbole dune chane relie, entre la largeur et la hauteur de votre image. Cela

signifie que votre image sera modifie de faon proportionnelle. Au besoin, cliquez sur la chane brise pour quelle soit nouveau relie. 4. Modifiez la largeur ou la hauteur de votre image. 5. Enregistrez votre image. 6. Ritrez si besoin les tapes 1 5.

La balise html pour linsertion dimage Si vous fouillez dans le code html de votre ePub, il est bon de savoir quoi correspond la balise pour insrer des images. Cette dernire prendra la forme suivante :

Le alt indique sommairement quoi ressemble limage et est utilis pour les sites internet. Si limage vient manquer, vous passez la souris dessus et le texte saffiche. Bien videmment dans un ePub, votre image se trouve dans le fichier donc vous navez pas besoin de mettre un texte en cas dabsence. Le src indique le chemin et le nom de limage utiliser. Il prend gnralement la forme suivante : src="../Images/XXX" o XXX est le nom de votre image. Comme vu plus haut, les .. indiquent quil faut remonter dun dossier dans larborescence (i.e. passer du dossier

Texte o se trouve le xhtml au dossier racine) puis se rendre dans le dossier Images pour y trouver la bonne image. Enfin, noubliez pas de mettre le nom complet de votre image, avec son extension (jpg, gif ou png dans le cadre dun ePub) et en respectant bien les majuscules et les minuscules.

Les balises dorganisation

Nous entrons ici dans des balises un peu plus complexes et spcifiques, qui vont vous permettre daffiner la prsentation de votre fichier. Elles seront

utilises conjointement avec les CSS.

Span
Nous avons vu quil existait des balises pour les paragraphes, les titres, etc. Curieusement, il ne semble pas en exister pour des mots ou des lettres seuls. En ralit, cest la balise <span> </span> qui remplit cet office. Utilise seule, <span> </span> najoute rien au code html, il sagit simplement dun lment neutre. Nanmoins, tout lintrt de cette balise est quelle peut tre renseigne (par un id, par exemple), ce qui lui permet de pouvoir grandement interagir avec les CSS.

Exemple Vous rdigez un texte sur les films daction et faites rfrence Pige de cristal, le premier film de la trilogie Die Hard, avec Bruce Willis. Vous ne souhaitez pas surcharger votre texte avec trop dinformations filmiques et dcidez de les faire figurer en note de bas de page. Votre texte sera le suivant :

Ici Pige de cristal est suivi dune note

en exposant (1) et, en cliquant dessus, vous arrivez votre note. Les balises  permettent de gnrer lexposant. Les <a href="#note1"> </a> prcisent le renvoi suivre. Enfin, les <span id="Onote1"></span> dfinissent le marqueur qui permettra au lecteur de reprendre sa lecture aprs avoir lu la note. Votre note de bas de page aura quant elle le code suivant :

Ici, nous appliquons lid la balise <p> car nous avons besoin que le lecteur commence la note au dbut du paragraphe.

Div
Nous venons de voir que la balise <span> sapplique des lments textuels. Si vous souhaitez pouvoir appliquer des CSS des blocs de texte et non des lments disparates, vous aurez besoin de la balise <div> </div> (div pour division en anglais). Lutilisation de cette balise indique au navigateur de considrer lensemble du texte inclus dans cette balise comme un gros bloc sur lequel agir. Nous verrons au chapitre CSS

comment lutiliser conjointement avec les feuilles de style.

Retour au Sommaire

Les CSS
Nous abordons prsent la manire de raliser des feuilles de style en cascade et de les appliquer aux pages xhtml de votre ePub. Pour cela, nous allons procder en plusieurs temps. Tout dabord, nous vous indiquerons lendroit o mettre votre feuille de style ainsi que le moyen dy faire appel depuis vos pages xhtml. Nous aborderons ensuite la manire dont se prsente un style CSS avant de dtailler les proprits les plus souvent utilises

dans un ePub. Nous terminerons enfin par quelques trucs auquel il faut faire attention pour avoir un fichier vraiment nickel. Comme souvent, il ny a rien de vraiment sorcier dans les outils matriser, il suffit juste dun peu de logique et dorganisation.

Retour au Sommaire

O se cachent les feuilles de style et les styles

Quelques dfinitions
Tout dabord, prcisons la diffrence entre les styles et les feuilles de style. Un style est un ensemble de paramtres graphiques (espacement, police, taille du texte) qui sapplique une partie

donne du texte ou de limage. Une feuille de style est pour sa part le fichier dans lequel sont enregistrs tous les styles. Vous navez donc pas besoin dune feuille de style par style. Nous vous recommandons, pour des raisons de simplicit, de navoir quune seule feuille de style dans votre ePub.

O trouver la feuille de style

Fort logiquement, la feuille de style se trouve dans le dossier Styles de lePub. Nanmoins, il faut savoir que les feuilles de style sont une coquetterie de

prsentation et ne sont nullement ncessaires au bon fonctionnement de lePub. Si aucun style nest dfini, le logiciel utilise sa mise en page par dfaut, tout simplement. Donc, si vous ouvrez un ePub que vous avez tlcharg, ne vous tonnez pas si vous ne trouvez aucune feuille de style. Insrer une feuille de style vierge dans votre ePub est trs facile. Nous allons voir comment procder avec Sigil. 1. Slectionnez le dossier Style. 2. Faites un clic droit et slectionnez Ajouter feuille de style vierge 3. Un fichier nomm Style0001.css apparat. Vous pouvez si besoin le renommer. Dans ce cas, nutilisez pas daccents et noubliez pas de

conserver lextension de fin .css.

Remarque : Les fichiers qui constituent le texte de votre ePub sont au format xhtml. Le document qui regroupe vos styles est dans un autre format (CSS) et doit donc porter lextension .css pour que le navigateur sache de quoi il sagit.

Indiquer Sigil quil faut utiliser la feuille de style

Maintenant que vous avez cr votre feuille de style, il est ncessaire que Sigil sache quil doit lutiliser et pour quelles

pages. Pour cela, vous devez insrer un lien dans chaque fichier xhtml o vous souhaitez utiliser les CSS. Nous vous conseillons dinsrer ce lien dans tous vos fichiers xhtml, pour que votre ePub soit homogne en termes de mise en forme. Rappel : Ce lien peut tre automatiquement intgr dans vos pages xhtml si vous utilisez le saut de chapitre pour insrer des pages (voir Insrer des pages). Pour chaque page ainsi cre, vous devrez cependant nettoyer la balise body, en remplaant <body style=""> par <body>. Faute de quoi le lien vers votre feuille de style ne sappliquera pas. Le lien se met dans le bloc en-tte de votre page xhtml, i.e. la partie du fichier qui commence par <head> et se termine

par </head>. Nous vous conseillons de mettre le lien directement la suite des balises <title></title>. Le lien prendra la forme suivante :

O XXX.css est le nom de votre feuille de style CSS. Si vous navez pas renomm votre feuille de style, le texte insrer sera donc :

 linstar des images, le texte ../Styles/Style0001.css prcise le chemin suivre pour le logiciel, depuis le fichier xhtml jusqu la feuille de style. Les .. indiquent quil faut remonter dun dossier dans larborescence (i.e. passer du dossier Texte o se trouve le xhtml au dossier racine) puis se rendre dans le dossier Styles pour y trouver la feuille de style. Le texte rel="stylesheet" prcise que le lien est une feuille de style. Quant au texte type="text/css", il prcise que cette feuille de style sera en CSS et compose de texte. Point important : les liens au sein de lePub sont particulirement sensibles lusage des majuscules et des minuscules dans les noms de fichier. Si votre feuille

de style se nomme STYLE.css et que vous faites appel, dans le lien, au fichier style.css, le logiciel ne trouvera pas la feuille correspondante et Sigil renverra une erreur lors de la vrification. Veillez donc bien respecter lusage des majuscules et des minuscules. Pour une meilleure facilit, nous vous conseillons, soit de tout mettre en minuscules (styles.css), soit de ne mettre la majuscule quau premier caractre du nom de votre fichier (Styles.css). Rappel : Les noms de fichier et le texte des CSS ne doivent pas utiliser de lettre accentue. Les accents sont autoriss uniquement dans le texte de vos pages xhtml.

Exemple
Vous avez un fichier ePub constitu de quatre pages xhtml, respectivement intitules couverture.xhtml, chapitre1.xhtml, chapitre2.xhtml et chapitre3.xhtml. Vous disposez dune feuille de styles intitule StyleePub.css, qui se trouve dans le dossier Styles de lePub. Les blocs en-tte des quatre pages xhtml seront les suivants : Pour le fichier couverture.xhtml :

Pour le fichier chapitre1.xhtml :

Pour le fichier chapitre2.xhtml :

Et pour le fichier chapitre3.xhtml :

Remarque : Le texte est chaque fois rigoureusement le mme, vu que vous vous rfrerez chaque fois la mme feuille. Nous lavons indiqu ici par souci dexhaustivit, pour que vous compreniez bien la ncessit de dclarer la feuille de style dans toutes les pages de votre ePub.

Remarque : Gnralement, les balises <title> et </title> encadrent le titre de la page html qui apparat au sommet de la page lors de la lecture. Nous ne lavons pas indiqu ici pour ne pas surcharger le code de lexemple. Nanmoins, vous pourriez tout fait avoir <title>Couverture</title>, <title>Chapitre 1</title>, <title>Chapitre 2</title> et

<title>Chapitre 3</title>

Retour au Sommaire

La syntaxe CSS
La structure des feuilles CSS
la diffrence des pages xhtml de votre ePub, vous navez pas besoin de prciser tout un tas dlments au dbut de votre page CSS. Le simple fait que le nom du fichier se termine par .css indique au logiciel de quoi il sagit. Votre feuille de style CSS sera donc une simple liste des

styles CSS utiliss et de leurs paramtres.

Les classes
Nous avons vu que les principales balises lies au texte sont les titres (h1, h2, h3), le paragraphe (p) et la balise neutre <span>. Seulement, votre texte risque fort davoir des mises en forme supplmentaires, comme les appels de note, les notes de bas de page, les textes en exposant (1er, 2e, 3e), etc. Il peut mme y avoir des paragraphes o vous souhaitez appliquer un style autre que celui normalement dfini pour les paragraphes. Pour tous ces lments, on ne passe pas

par des balises mais par ce que lon appelle des classes. Une classe est une catgorie pour laquelle vous dfinissez un style particulier. Vous pourrez donc avoir une classe notedebasdepage, une classe appeldenote, une classe signature, etc. Ces classes peuvent, au choix, sappliquer toutes les balises ou un type prcis de balises. Faire appel une classe est relativement simple : il suffit de le prciser dans la balise ouvrante concerne en ajoutant class="XXX" o XXX est le nom que vous aurez attribu votre classe. Notez la syntaxe anglaise : class scrit sans le e en html. Et, comme dhabitude, rappelez-vous de nutiliser ni lettres accentues, ni caractres spciaux

dans vos noms de classes sous peine de problme daffichage.

Exemple
Vous disposez de remerciements que vous souhaitez mettre la fin de votre texte. Au sein de votre feuille de style, vous avez dfini une classe remerciements avec la mise en forme adquate (nous verrons comment un peu plus loin) et souhaitez lappliquer. Votre paragraphe aura alors la forme suivante :

La syntaxe CSS
Au sein dune feuille CSS basique, un style CSS peut se prsenter de trois manires : XXX {YYY:ZZZ;} .XXX {YYY:ZZZ;} AAA.XXX {YYY:ZZZ;} Le premier sapplique aux balises et le XXX est remplac par le nom de la balise correspondante (p, h1, sup, etc.). Le deuxime sapplique aux classes et le XXX est remplac par le nom de la classe prcd dun point. Le troisime sapplique aux classes lies une balise spcifique. AAA est remplac par la balise et XXX par le nom

de la classe, avec un point pour les relier. YYY dsigne pour sa part une proprit CSS (espacement, couleur, taille, alignement) et ZZZ la valeur de la proprit (espace de 2 points, couleur rouge, taille de 12 points, alignement justifi). Pour cette dernire, lorsquelle est chiffre, il importe de prciser quelle unit utiliser (le point, le pixel, le pourcentage). Nous dtaillerons plus loin ces units. Lorsque vous tapez vos CSS, faites bien attention la prsence de la ponctuation : le point en dbut sil sagit dune classe, les accolades pour ouvrir et fermer les proprits du style, et le point virgule la fin de chaque proprit (il nest pas obligatoire sur la dernire ligne

mais cela vitera des oublis fcheux !).

Exemple
Nous souhaitons que tous les paragraphes soient justifis (i.e. aligns gauche et droite) et, en parallle, que certains textes aient une taille de caractres un peu plus grande. Nous allons donc dfinir deux styles diffrents. Le premier sappliquera aux paragraphes et le second sera une classe qui ne sappliquera que si on fait appel elle. Nous appellerons cette classe big. La proprit pour le texte justifi est textalign et celle pour la taille de la police est font-size. Les deux CSS auront donc la forme suivante :

Et le code de votre texte se prsentera comme suit :

Ce qui, en version graphique, donnera la chose suivante :

Ceci est un paragraphe qui, en plus du style p, utilise le style dfini par la class big.
Remarque : Vous pouvez attribuer plusieurs class en mme temps une balise. Il suffit juste de les sparer par un espace. Par exemple, vous pourriez tout fait avoir un <p class="big textegras"> o sappliqueraient la fois la class big et la class textegras. Si jamais il y a des conflits entre les class, cest la dernire qui a prsance.

Si nous souhaitons que le corps de 1.2em ne sapplique qu des paragraphes et pas des titres, la CSS prend alors la forme suivante :

Remarque : Les CSS tant des feuilles de style en cascade, elles dpendent les unes des autres. Pour le style p.big, la classe big dcoule du style p. Vous navez donc pas besoin de reprciser toute la mise en forme du style p. En prcisant p.big, la CSS sait quelle doit appliquer dabord les styles du paragraphe puis ceux de la classe. Comme pour ci-dessus, si jamais il y a des informations

contradictoires, cest la dernire indique qui a prsance (big dans le cadre de notre exemple).

Les CSS enrichies

Lexemple ci-dessus est relativement simple car chaque style nutilise quune proprit. Nanmoins, tout lintrt des CSS est de pouvoir combiner ces dernires en fonction de ses besoins. Pour cela, il suffit simplement de mettre les proprits CSS et leurs valeurs les unes la suite des autres, spares par le point virgule. noter que vous pouvez tout fait, pour plus de lisibilit, insrer des sauts de ligne et/ou des espaces aprs

chaque point virgule. Les espaces et sauts de ligne nont en effet pas grande signification en CSS, les lments les plus importants tant les accolades, les points virgules et le point pour la classe.

Exemple
Nous souhaitons dsormais que notre paragraphe soit justifi et avec un corps de 1.2em. Dans ce cas, la CSS est la suivante :

Ou, si vous prfrez :

Les units de mesure

Nous avons vu plus haut quune proprit CSS tait suivie dune valeur aprs ses :. Avant de dtailler les proprits les plus communes, il est utile de prciser quelles mesures peuvent tre utilises et comment bien les employer.

Les valeurs absolues

Il existe deux grands types de valeurs :

les absolues et les relatives. Les valeurs absolues ne changent pas quel que soit le support utilis. Par exemple, si vous dfinissez quune image fait 300 pixels de large, elle fera toujours 300 pixels de large, que ce soit sur un smartphone, une liseuse, une tablette ou un cran dordinateur. Dans ce cas-l, il y a des chances que limage soit trop grande sur un smartphone et trop petite sur un cran dordinateur. Cela ne signifie cependant pas que vous ne devez utiliser aucune valeur absolue, simplement quil faut garder en tte cette contrainte. Vous aurez principalement deux types de valeurs absolues : le pixel (px) et le point (pt). Le pixel est une unit pour les images et la maquette en gnral. Il

prcise combien de points de lcran utiliser. Par exemple, si votre cran dordinateur a une rsolution de 1024 x 768 pixels, cela signifie que, si vous demandez votre image de faire 2000 pixels de long, elle dbordera sur la droite de lcran. Le point dfinit quant lui la hauteur de la police que vous utilisez (thoriquement, un point correspond 1/72e de pouce soit 0,352 mm) et sutilise donc pour le texte. Si vous tes habitu au traitement de texte, vous utilisez dj le point comme unit de mesure pour la taille de votre police.

Les valeurs relatives

 linverse des valeurs absolues, les valeurs relatives sont dfinies par rapport dautres. Par exemple, elles prennent en compte la taille de lcran ou la hauteur de la ligne. Elles permettent donc de sadapter aux diffrents supports sur lesquels apparatra le fichier, afin dobtenir un affichage harmonieux. Il existe deux grands types dunits relatives : le % et le em. Le % est, comme son nom lindique, un pourcentage. Par dfaut, 100 % correspond la valeur maximale de la proprit, gnralement dfinie par lcran. Ainsi, une hauteur de 100 % correspondra la hauteur de votre cran, une largeur de 100 % la largeur de lcran et ainsi de suite. Si vous demandez

donc une proprit de ne faire que 50 % de la taille initiale, elle prendra la moiti de la hauteur ou de la largeur de lcran.

La taille des polices En matire de dimension, on peut utiliser plusieurs units de mesure : le point (pt), le nombre de pixels (px) et la largeur de m (em). Ce em (diffrent du em utilis pour litalique) correspond la largeur de la lettre m dans la police de caractre utilise et sa taille par dfaut est de 1em. La largeur de la lettre m sert ici de rfrence pour talonner la totalit de votre document, et permet dutiliser votre police de caractre sa taille naturelle. Ainsi, mme sil est en gnral admis quune police de caractre standard prsente un corps dune taille de 12px, il

est recommand dutiliser la mesure de base en em, savoir 1em. Comme la mesure en em est proportionnelle, contrairement aux mesures en pt et en px, le lecteur pourra ainsi modifier la taille du texte de manire proportionnelle. Ainsi, si les <p> de votre corps de texte mesurent 1em, vous pourrez attribuer aux titres une valeur de 2em, ou 3em, par exemple. Attention, les virgules nexistent pas dans la notation em : il faut les remplacer par des points. Ainsi, si vous souhaitez que votre classe big soit 1,2 fois plus grande (20% de plus) que votre texte courant, il faudra indiquer 1.2em. Inversement, une note de bas de page sera plus petite et pourrait avoir une taille de 0.8em voire 0.5.

Ces diffrences entre notations de taille peuvent paratre insignifiantes mais elle sont en ralit extrmement importantes. En effet, en fonction des appareils de lecture, de la taille de leur cran et de leur rsolution, avoir une taille de caractre bloque empchera le lecteur de rgler la taille du texte comme il lentend, le privant ainsi dune exprience de lecture optimale. Cest pourquoi nous vous conseillons, pour le texte courant <p>, dutiliser la taille 1em, et dadapter ensuite vos titres et autres sections en fonction de cette

taille de rfrence, laide dem proportionnels. Vous pouvez galement utiliser le pourcentage % comme rfrence typographique. Dans ce cas, la CSS pour <p> sera : p {fontsize :100% ;} Une dernire remarque concernant les units absolues et relatives : vous verrez que certaines proprits CSS demanderont plusieurs valeurs. Dans ce cas-l, vitez de mlanger valeurs absolues et valeurs relatives, ou mme des units diffrentes. Cela complexifie le travail dinterprtation du logiciel et peut crer des confusions.

Retour au Sommaire

Les proprits CSS

Bien, maintenant que nous avons dbroussaill la manire dutiliser les CSS, abordons les diffrentes proprits possibles.

Les balises auxquelles appliquer les feuilles de style

Nous avons vu plus haut que vous pouviez appliquer les CSS certaines balises html. Nous mentionnons les principales ici titre de rappel.

Body
Au sein de cette classe, vous prciserez la mise en forme que vous souhaitez appliquer lensemble du document. Cette mise en forme sera en effet utilise pour tous les lments qui figurent entre les balises <body> et </body> de votre page xhtml, soit tout votre texte. Gnralement, les styles body prcisent les marges extrieures (pour viter que le texte colle au bord de

lcran) et, plus rarement, les retraits de premire ligne, la taille de la police ou encore la police utiliser. Cependant, il faut malheureusement rappeler que les liseuses ninterprtent pas les instructions de la mme faon. Les Kobo par exemple (dont la Kobo by Fnac) ne prennent ainsi pas compte des proprits prcises dans body. Donc, mme si cest laborieux et moins pertinent en termes darchitecture CSS, nous vous conseillons de ne pas utiliser de styles pour cette balise mais de dtailler davantage les styles des autres proprits (les paragraphes et les titres, principalement). Ainsi, mme si cela semble redondant, il vaut mieux rappeler les marges pour les <p> et les <h1>,

<h2>, <h3> pour tre sr quelles seront prises en compte correctement sur tous les supports.

p
Vous prciserez dans cette classe tout ce que vous souhaitez appliquer un paragraphe lambda de votre texte : taille du texte, italique, gras, retrait de premire ligne, justification Gardez juste lesprit que, comme nous sommes en CSS, les styles de lobjet body sappliquent dj donc vous navez pas besoin de les remettre, moins de vouloir spcifiquement les modifier.

h1, h2, h3
Ici, vous mentionnerez la mise en forme spcifique chaque titre (taille, graisse, italique, majuscules, espaces avant, espaces aprs, etc.). L encore, pas besoin de remettre les styles de lobjet body. Lorsque vous tablissez vos mises en formes pour vos styles, ne perdez pas de vue quils donnent une dimension lgrement graphique votre fichier donc soignez-les. Vrifiez notamment leur rendu dans la page, en faisant se succder des titres de diffrents niveaux et des paragraphes.

sup

Comme indiqu plus haut, cette balise est utilise pour mettre le texte en exposant (comme dans 2e, 3e, etc.). Le problme avec cette balise est que, utilise telle quelle en html, elle se contente de relever les lettres indiques, sans les rduire. Du coup, vous avez au sein de votre paragraphe un espace blanc disgracieux au-dessus de votre ligne car le logiciel laisse la place pour la lettre surleve. Pour viter cet impair, nous vous conseillons de dfinir votre balise sup comme suit :

Cela rduira la taille de votre exposant (elle ne fera que 67 % de sa taille) et la surlvera (des 33 % restants), sans crer de blanc impromptu.

Div
Comme indiqu plus haut, div est une manire dorganiser les lments de votre texte en en groupant certains au sein dun bloc. Vous pouvez donc tout fait appliquer une mise en forme vos blocs. Les div sont particulirement utiles pour les images car, correctement paramtrs, ils permettent de centrer les images dans la page.

Les proprits CSS de mise en page

Nous allons dans un premier temps aborder les proprits CSS qui ne sappliquent pas au texte proprement dit mais qui permettent de dfinir votre mise en page de faon harmonieuse.

Les marges
Pour viter que votre texte ne colle lcran, vous aurez dfinir des marges. Ces dernires nont pas forcment besoin dtre grandes mais elles doivent exister pour faire respirer la lecture. Il ny a rien de pire quun texte qui court dun bout

lautre de lcran, sans laisser despace vide o lil puisse se reposer. Il existe quatre proprits CSS pour dfinir les marges : marge gauche (margin-left), marge droite (margin-right), marge suprieure (margin-top) et marge infrieure (margin-bottom). Vous pouvez tout fait ne pas attribuer les mmes valeurs vos marges, en fonction du rendu souhait. Signalons enfin quil existe une proprit regroupant les quatre proprits ci-dessus : margin. Vous y indiquez vos valeurs de margin dans lordre suivant : haut, droite, bas, gauche ; chaque valeur tant spare des autres par un espace. Remarque : Vous pouvez tout fait dfinir un margin pour le body et un

margin pour les paragraphes. Dans ce casl, les deux mises en formes se cumuleront pour les paragraphes. Cela est notamment utile si vous voulez faire respirer vos paragraphes : insrer de lgers margin-top et margin-bottom, qui spareront chaque paragraphe pour mieux les mettre en valeur.

Exemple Vous souhaitez que lensemble de votre texte dispose de marges rgulires tout autour de lcran. Vous ne voulez pas que ces marges soient trop importantes, sans pour autant nuire la lecture. Un bon compromis est une marge situe entre 3 et 5 % de la taille de lcran et vous optez dans un premier temps pour une marge de 3 % en haut et en bas, et de 5 % gauche

et droite. Comme vous souhaitez que cette marge concerne lensemble du document, le mieux est de le prciser pour le style de la balise body. Le code CSS sera donc le suivant :

Ou bien

En outre, en plus de ces marges qui sappliquent tout le document, vous souhaitez que chaque paragraphe dispose dun lger espace au-dessus de lui (0.2em) et en-dessous (0.5em). Votre code CSS sera alors :

Les interlignes
Il peut aussi arriver que, pour des raisons typograhiques qui vous sont propres, vous souhaitiez que votre texte ait un interligne plus grand que dhabitude. De la sorte, vous disposerez

dun espace blanc entre chaque ligne qui pourra faire respirer votre texte. La proprit pour dfinir votre interligne est line-height.

Exemple Reprenons notre style de paragraphe. En plus des marges en dbut et en fin de paragraphe, vous vous dites quun lger interligne pourrait tre une bonne chose. Il nest pas ncessaire que celui-ci soit lev aussi vous dcidez-vous pour un interligne de 1.05em. Cela signifie que votre texte prendra 1em de hauteur mais quil y aura un blanc de 0.05em en plus pour chaque ligne. Le code pour vos paragraphes sera le suivant :

Remarque : Si vous jouez avec les interlignes, assurez-vous que votre lineheight soit suprieur ou gal votre taille de police. Sans quoi en fonction de votre police de caractres, vos lignes de texte risqueront de se chevaucher les unes avec les autres.

Les sauts de page

Sur certains textes mal maquetts, il peut arriver quun titre se retrouve en bas

de page tout seul, sans texte courant pour le suivre. Cela donne une impression bizarre car le lecteur a le sentiment que le titre en question aurait d apparatre sur lcran suivant pour faire bloc avec son texte. Pour viter ce genre de dsagrment, il faut donc lier les deux blocs texte (ici le titre et son paragraphe qui le suit) pour quils ne soient pas spars. Pour cela, vous aurez besoin des proprits CSS page-break-before (saut de page avant) et page-break-after (saut de page aprs). Les valeurs de ces deux proprits sont les suivantes : avoid vitera autant que possible de sparer les blocs. Mais lorsque ce ne sera pas possible, les deux

blocs seront spars. always indique de toujours insrer un saut de page. On utilise par exemple cette valeur si on veut quun titre dbute toujours sur un nouvel cran. auto laisse le navigateur afficher la page comme il lentend, sans contraintes particulires. Cette valeur est peu utilise. inherit applique au saut de page les mmes paramtres que la feuille de style parente dont elle dcoule (gnralement body, p ou h). Cette valeur est peu utilise. Comme on le voit, ce sont surtout les valeurs avoid et always qui seront utilises pour grer les sauts de pages.

Remarque : Les titres qui sont au dbut dune nouvelle page html commencent par dfaut sur un nouvel cran. Vous ntes donc pas oblig de crer un style rien que pour eux pour grer les sauts de page. Exemple Vous souhaitez que votre titre de niveau 2 soit toujours sur un nouvel cran. Le style sera donc le suivant :

Lalignement de votre texte

Note : Les deux proprits qui suivent (text-align et text-indent) sappliquent des lments de votre texte mais, comme leur utilisation rsulte principalement de la mise en page, nous avons prfr les mentionner dans cette partie. Un texte peut se prsenter de diffrentes formes au sein dune page. Il peut tre align gauche (le mode par dfaut des traitements de texte), align droite (comme pour une signature), centr ou justifi (i.e. que votre texte remplit harmonieusement lespace en une sorte de gros rectangle). Tous ces lments de justification peuvent tre dfinis en CSS. On utilise pour cela la proprit textalign, en lui prcisant la valeur que lon souhaite (left pour un alignement gauche,

right pour un alignement droite, center pour un alignement au centre et justify pour un texte justifi). Remarque : Il est prfrable de dfinir lalignement pour les diffrentes balises de votre texte, en particulier les titres. En effet, mme si on peut considrer quun titre, par nature court, sera align gauche mme si le texte est justifi, lexprience prouve que le rsultat peut tre dsastreux, en particulier sur les petits crans. Donc, mme si cela vous semble inutile, dfinissez bien un text-align:left pour vos titres.

Exemple Reprenons le cas de notre corps de texte. Nous souhaitons que, par dfaut, en plus des 5 % et 3 % de marge, le texte soit

justifi. Le code sera alors le suivant :

Les retraits de premire ligne

En littrature notamment, chaque paragraphe commence par un alina, i.e. une premire ligne lgrement en retrait du reste du texte. En typographie, on appelle cela une indentation et si vous souhaitez appliquer une telle indentation, vous devrez utiliser la proprit textindent.

Exemple Reprenons notre style de paragraphe dfini plus haut. En plus des marges en dbut et en fin de paragraphe et de linterligne, vous souhaitez un retrait de premire ligne quivalant une lettre. Le code sera alors le suivant :

Les proprits CSS

appliquer au texte
La taille de texte
Pour dfinir la taille de votre police, vous utiliserez la proprit font-size. Pour rappel, il vaut mieux dfinir la taille par dfaut de vos paragraphes avec une valeur de 1em et dfinir les valeurs des autres styles en fonction de celle-ci.

Exemple Sachant que vos paragraphes auront une taille de 1em, vous dcidez de dfinir les styles de vos titres de niveau 1. Aprs plusieurs essais, vous estimez quune taille de 1.7em serait une bonne chose et quil faudrait que le texte soit centr. Le

code sera alors le suivant :

Remarque : Nous prcisons une indentation de 0em (text-indent) pour le cas o les styles prcdents (comme body) aient prvu une indentation par dfaut.

Litalique
Si vous dsirez utiliser litalique (ou

indiquer au CSS que vous ne voulez PAS ditalique), il vous faudra utiliser la proprit font-style. Cette dernire a deux valeurs : normal (i.e. non italique) et italic.

Exemple Vous dsirez que votre titre de niveau 1 soit galement en italique pour mieux ressortir. Si lon reprend le style cidessus, le code serait alors :

Remarque : Si vous utilisez une police par dfaut (i.e. vous nincorporez pas de police votre ePub), vous navez pas besoin de dfinir un style uniquement pour litalique. Si vous utilisez des polices spcifiques (cf. plus bas sur la manire de procder), il vous faudra crer le style i {font-style:italic;}.

Le gras
De la mme manire que pour litalique, la proprit font-weight dterminera la graisse de votre texte. Ce dernier sera soit normal (si vous ne voulez PAS de gras) soit bold (gras).

Exemple

Pour donner encore plus dimpact votre titre, vous souhaitez quen plus de litalique, le texte en question soit en gras. Le style aura donc le code suivant :

Remarque : linstar de litalique, vous navez pas besoin de dfinir un style pour le gras si vous nincorporez pas de polices votre ePub. Dans le cas contraire, vous devrez dfinir le style b

{font-weight:bold;}.

Grer les majuscules et les minuscules

Vous pourrez vouloir, indpendamment de la saisie de votre texte, lui appliquer une mise en forme particulire au niveau des majuscules. Peut-tre voulez-vous que votre titre soit totalement en majuscules, ou que la premire lettre de chaque mot soit en majuscules. Dans ce cas-l, la proprit utiliser est text-transform. Cette proprit peut prendre quatre valeurs : uppercase, qui met tout le texte en majuscules

capitalize, qui met une majuscule au dbut de chaque mot (le rsultat est en gnral assez disgracieux mais sachez que cette option existe) lowercase, qui met tout en minuscules none, qui indique juste de ne rien changer au texte

Exemple Finalement, vous dcidez que votre titre de niveau 1 ne doit pas tre en italique mais totalement en majuscules. Vous allez donc supprimer litalique du style et y ajouter les majuscules. Le style sera alors le suivant :

Remarque : La proprit texttransform tant assez particulire, elle nest pas comprise par tous les moteurs de lecture. Ne vous tonnez donc pas si elle ne fonctionne pas sur votre liseuse, mme si iBooks laffiche correctement. Le plus simple est encore dcrire directement votre titre en majuscules.

Les petites capitales

En plus des majuscules et des minuscules, il existe ce que lon appelle des petites capitales. Elles ont la forme des lettres majuscules mais la hauteur des lettres minuscules. On sen sert relativement peu mais il faut savoir que, typographiquement parlant, les noms de sicles se composent en petites majuscules. Il est donc toujours utile de prvoir son utilisation, en particulier si vous utilisez les noms de sicles. Si vous souhaitez utiliser ce genre de mise en forme, vous devrez recourir la proprit font-variant. Cette proprit vous permet dutiliser la variante Small caps dune police, si cette variante existe au sein de la police. Si cette variante

Small caps nexiste pas dans la police, la proprit sera la plupart du temps ignore sur les supports de lecture. Font-variant peut prendre deux valeurs : normal et small-caps. Remarque : Il est assez peu probable que vous ayez besoin de la valeur normal, moins que votre texte ait t tap en petite capitales et que vous souhaitiez le remettre dans une mise en forme normale.

Exemple Vous avez dfini les proprits de votre titre de niveau 1 plus haut. Il est temps de vous charger de celles de niveau 2. Pour ceux-ci, vous ne souhaitez pas de mise en avant particulire mais vous dites quune diffrenciation du corps de texte serait une bonne chose. Vous optez donc

pour les petites capitales. Vous reprenez donc votre style h2 dfini plus haut et le modifiez comme suit :

Les proprits CSS complexes

Les proprits que nous allons aborder ici ne sont en ralit pas trop compliques. Toutefois, comme leur usage est assez particulier (puisquil traite des

images et des ajouts de polices), nous avons prfr les traiter dans une section part.

Largeur et hauteur dune image

Si vous insrez une image, vous souhaiterez probablement quelle ne dpasse pas de votre cran ou quelle soit mme plus petite. Pour cela, vous pourrez jouer sur la hauteur et la largeur de laffichage de limage. Il existe quatre proprits que vous pouvez utiliser : width, height, max-width et max-height. Width et height vous permettent, respectivement, de dfinir la largeur et la hauteur de votre image, tandis

que max-width et max-height vous permettent de dfinir la largeur et la hauteur maximales de votre image. La nuance entre les deux types de proprits est assez fine et cest surtout le rendu final qui vous fera choisir celle que vous prfrez. Nous avons cependant constat que les proprits max-width et maxheight taient plus facilement interprtes par les logiciels que width et height. linstar des polices, la valeur que vous allez donner votre image sera une valeur chiffre, gnralement en pixels (px) ou en pourcentage (%). moins de vouloir un rendu dform, vous naurez besoin de dfinir quune seule proprit pour votre image. En effet, si vous modifiez une seule caractristique sans

forcer les autres, lensemble de limage sera modifi de faon proportionnelle. Il vous faut donc agir sur le critre le plus encombrant (la hauteur ou la largeur) pour que, par ricochet, le second soit correctement proportionn. Dernier point : il est plus que prfrable que limage qui vous servira de page de titre prenne toute la taille de lcran. Nous vous conseillons donc de lui mettre un height de 100%. Remarque : Si votre image fait plus de 600 pixels de large, il est primordial de spcifier un width de 600 px ou moins (dans le cadre d'une CSS valeur fixe). En effet, toute image dpassant les 600 pixels de large n'est tout simplement pas affiche par Adobe Digital Editions. Or,

ADE est le lecteur principal d'ebooks sur PC.

Exemple Vous disposez dune image plutt verticale (en mode portrait, si on suit la terminologie des traitements de texte) intitule couverture.jpg, qui se trouve dans le dossier Images de lePub. Vous souhaitez la mettre en premire page de votre fichier mais, comme cette image est trop grosse, vous allez devoir ladapter la taille de lcran. De plus, pour viter que limage ne prenne tout lcran (question de got), vous dcidez que cette dernire ne prendra que 90 % de lcran. La feuille de style CSS prendra la forme suivante :

Dans votre page xhtml, vous appliquerez ensuite la classe img90 de la faon suivante :

Centrer une image

Il nexiste pas de proprit CSS pour centrer spcifiquement une image. Nanmoins, cela est tout fait possible, et de deux manires diffrentes : en utilisant les div ou en jouant avec les marges. Les

deux mthodes tant interprtes de la mme manire par les lecteurs, leur utilisation est plus une question de prfrence de votre part quautre chose.

Centrer une image avec les div Nous avons vu plus haut que les balises <div></div> permettaient de regrouper des lments ensemble pour leur appliquer une mise en forme commune. Ici, lastuce consiste insrer limage au sein dun div et ensuite justifier ce div. On utilisera pour cela la proprit text-align:center. Le code sera alors le suivant : Dans la page xhtml :

Et dans la feuille de style :

Remarque : Nous prcisons une indentation de 0em (text-indent) pour le cas o les styles prcdents (comme body) aient prvu une indentation par dfaut. Centrer une image avec les marges

Si vous ntes pas laise avec les div, vous pouvez utiliser des valeurs relatives. Le processus est assez simple. Supposons que notre image occupe 90 % de lcran. Cela signifie quil reste 10 % pour les marges. Si vous souhaitez centrer votre image en hauteur, il vous suffit donc de prciser que vos marges haute et basse font chacune 5 % (puisque 90 % de limage + 5 % de marge basse + 5 % de marge haute = 100 %, soit la taille de lcran). Le code de votre style sera alors le suivant : Dans la page xhtml :

Et dans la feuille de style :

Remarque : linstar de <br/>, la balise <img /> na pas besoin de balise fermante. Et, tout comme <br/>, elle ne peut se trouver directement dans le code html. Elle doit donc tre encadre avec des balises tels <p></p> ou <div></div>.
Si vous souhaitez centrer votre image horizontalement, le processus est le mme, mais en dfinissant max-width, margin-left

et margin-right. Terminons enfin par une petite astuce si vous tes amen utiliser plusieurs images dans votre ePub. Comme ces dernires nauront probablement pas la mme taille initiale et que vous ne voudrez pas leur appliquer la mme augmentation ou diminution en fonction de leur utilisation, nous vous conseillons de crer plusieurs classes dimage. Vous pouvez par exemple crer horizontal90 (avec maxwidth:90%;margin-left:5%;marginright:5%;) et le dcliner en horizontal80 (max-width:80%;margin-left:10%;marginright:10%;), horizontal70 (maxwidth:70%;margin-left:15%;marginright:15%;) et ainsi de suite.

De la sorte, vous aurez toute une grille de classes utiliser en fonction de vos images. Ainsi, si jamais vous devez changer la taille dune image qui ne vous convient pas, vous avez juste modifier la rfrence la classe de votre image (en remplaant par exemple class="horizontal90" par class="horizontal70").

Insrer et utiliser des polices spcifiques

Vous pourrez vouloir utiliser des polices particulires pour donner un certain cachet votre texte (comme par exemple une police futuriste pour vos titres, sil sagit dune histoire de science-

fiction). Vous trouverez ci-dessous la marche suivre pour incorporer de telles polices.

Quelles polices utiliser Vous pouvez utiliser des fonts au format OTF ou TTF, en sachant que les typos TTF peuvent parfois poser quelques problmes. Si besoin, des logiciels comme FontForge (http://fontforge.sourceforge.net/) permettent de convertir des TTF en OTF. Noubliez pas non plus que, comme les polices sont des crations, elles sont lgalement protges et que leur auteur a dfini quel usage tait possible ou non (par exemple, une typo peut tre gratuite pour un usage non commercial). Vrifiez donc bien que lusage que vous allez faire

de la police correspond lautorisation de lauteur. Au besoin, nhsitez pas contacter lauteur de la police. Ces derniers ne rechignent gnralement pas ce que vous sortiez du cadre dfini pour peu quils en soient informs et soient crdits quelque part dans le fichier.

Importer les fontes En premier lieu, vous devez faire en sorte que votre ePub contienne les polices que vous utiliserez. Il faut donc les importer dans le fichier. Pour cela :
1. Slectionnez le dossier Polices (ou Fonts si vous avez une version anglaise de Sigil), situ sous le dossier Images.

2. Faites un clic droit et choisissez Ajouter des fichiers. 3. Slectionnez les polices insrer. 4. Validez. Voil, vos typos font dsormais partie de lePub. Il reste maintenant prciser leur utilisation dans votre feuille de style.

Importer les polices dans la feuille de style Pour exploiter correctement vos polices, nous allons utiliser une proprit particulire :

Remarque : Le premier Remarque : Comme vous appliquez la police de sorte ce quelle soit utilise par tous les lments du livre, noubliez pas de dfinir les styles i {fontstyle:italic;} (ou em {fontstyle:italic;} si vous utilisez la balise <em></em> pour litalique) et b {fontweight:bold;} (ou strong {fontweight:bold;} si vous utilisez la balise <strong></strong> pour le gras) pour exploiter correctement le gras et litalique de cette typo.

Retour au Sommaire

Petit rsum pour bien exploiter les CSS

Nous venons de voir comment fonctionnaient les CSS et comment les appliquer votre ePub. Histoire de bien fixer les choses, voici un rapide rsum des lments prendre en compte.

1. Crez votre feuille de style 2. Insrez le lien vers cette feuille de style dans toutes les balises <head> </head> de vos pages xhtml 3. Dans votre feuille de style, dclarez en priorit les polices que vous allez utiliser (pour lusage normal, gras, italique, gras+italique). 4. Dfinissez vos styles propres aux balises classiques (body, h1, h2, h3, p, etc.) 5. Dfinissez les styles spciaux comme les appels

de note laide des classes (.XXX) 6. Dans vos pages xhtml, attribuez les mises en forme lies vos classes grce la balise neutre <span class="XXX"> Enfin, petit rappel des rgles respecter pour la saisie des CSS dans la feuille de style : 1. Toutes les proprits dun style sont enfermes au sein daccolades ({ et }) 2. Toutes les proprits dun style se terminent par un point-virgule (;) 3. Nutilisez ni lettres accentues ni caractres

spciaux. 4. Quand vous utilisez des units, conservez les mmes pour tout le style afin dviter toute erreur d'interprtation. 5. La virgule nexiste pas pour les units. Il faut utiliser le point la place. 6. Vous pouvez utiliser les espaces et les retours la ligne pour rendre vos CSS moins touffues.

Retour au Sommaire

Quelques considrations pour finir

Astuces typographiques
Lorsque vous aurez fini de dfinir et dappliquer vos styles, il reste encore quelques petites

manipulations typographiques effectuer, pour tre sr que votre fichier soit bien propre. Ces changements seffectuent assez rapidement grce la fonction Rechercher/Remplacer. Nous les faisons intervenir en toute fin de cration dePub pour que toutes les modifications sappliquent dun coup. Si vous effectuez ces changements au dbut et quensuite vous modifiez votre fichier, il vous faudra nouveau rpter lopration en fin de course. Donc autant ne la faire quune seule fois.

Espaces inscables

Il vous est peut-tre arriv de voir des points dexclamation ou des points-virgules en dbut de ligne et de vous dire quils navaient rien faire l. En typographie, ces signes sont prcds dun espace mais, pour viter les renvois la ligne malheureux, il sagit en ralit dun espace inscable (i.e. quon ne peut pas couper). Malheureusement, ces espaces inscables sont rarement conservs quand vous importez votre texte dans Sigil et ils sont encore moins insrables via un raccourci clavier. Mais, il existe un moyen relativement facile de

les intgrer sans devoir vous relire tout votre texte : avec la fonction Rechercher/Remplacer. Voici la mthode suivre (nous indiquons entre balises le texte mettre dans la bote de dialogue). 1. Slectionnez votre page et basculez en vue html (via la barre doutils ou en apppuyant sur F11) 2. Lancez le Rechercher/Remplacer (menu dition/Rechercher ou ctrl + h) 3. Remplacez <espace> <espace> par <espace> [Cela vous permet dliminer les espaces

superflus] 4. Remplacez <espace><!> par <&nbsp;><!> [&nbsp; est le sigle pour lespace inscable et signifie nonbreakable space] 5. Remplacez <espace><?> par <&nbsp;><?> 6. Remplacez <espace><;> par <&nbsp;><;> 7. Remplacez <espace><:> par <&nbsp;><:> 8. Si besoin, slectionnez une nouvelle page et ritrez les tapes 2 7. De la sorte, vous ne devriez plus avoir de soucis avec des sigles typo malheureux en dbut

de ligne.

Guillemets
Il existe deux types de guillemets : les guillemets franais, qui ressemblent des << et des >> ; et les guillemets anglais qui ressemblent des doubles apostrophes ouvrantes et fermantes ( et ). Vous pouvez utiliser ceux que vous souhaitez mais, outre le fait quil est prfrable de navoir quun seul type de guillemets dans votre fichier (question de rendu professionnel), il faut savoir que les espaces ne sont pas grs de la

mme faon.

Les guillemets franais Si vous utilisez les guillemets franais, vous aurez utiliser des espaces inscables. En effet, un guillemet franais ouvrant () est suivi dun espace inscable et un guillemet franais fermant est prcd dun espace inscable. Lexprience prouve quen utilisant le Rechercher/Remplacer et en faisant un Remplacer tout, le rsultat nest pas correct : il nest pas rare que vous vous retrouviez avec plus de guillemets ouvrants que fermants, ce qui nest normalement pas le cas. Pour purger votre texte, il ny

a donc pas trente-six solutions : effectuez une recherche manuelle. Voici comment procder : 1. Slectionnez votre page et basculez en vue html (via la barre doutils ou en apppuyant sur F11) 2. Lancez la recherche (menu dition/Rechercher ou ctrl + h) sur le guillemet 3. Lorsque vous en trouvez un, quittez la recherche et vrifiez si le guillemet en question a la bonne mise en forme (sagit-il bien dun guillemet franais ?) 4. Si lespace nest pas un espace inscable,

remplacez-le par &nbsp; 5. Relancez la recherche pour un autre guillemet et ritrez les tapes 3 5 Remarque : Lorsque vous tombez sur un guillemet franais ouvrant, vous pouvez aussi, visuellement, rechercher son guillemet fermant correspondant pour vrifier sa mise en forme et son espace. En effet, les dialogues ne sont gnralement pas trs longs dans un texte donc un coup dil permet souvent de sauter une recherche. videmment, cette manire de procder est un peu artisanale mais de la sorte, vous serez assur

davoir autant de guillemets ouvrants que de guillemets fermants et quils ont tous leur espace inscable proximit.

Les guillemets anglais Les guillemets anglais obissent une autre problmatique. En effet, il est assez frquent, lorsque vous tapez votre texte, que ces guillemets soient remplacs par des faux guillemets anglais, i.e. des guillemets ouvrants et fermants identiques (" au lieu de et ), similaires ceux qui sont utiliss en code CSS. Votre tche ici sera donc de remplacer ces guillemets pour quils soient tous corrects.

Attention cependant ! Les guillemets que vous devez remplacer sont ceux de votre texte et non ceux du code html. Assurezvous donc, quand vous remplacez vos guillemets, quils ne se trouvent pas au sein dune balise html mais bel et bien dans le corps de votre texte. Concernant les espaces, les guillemets anglais ne sont pas suivis/prcds dun espace donc il faudra supprimer ceux en trop. Pour cela, nous allons une fois encore utiliser le Rechercher manuel. Voici la marche suivre : 1. Copiez au pralable dans le presse-papier le doublet

 2. Slectionnez votre page et basculez en vue html (via la barre doutils ou en apppuyant sur F11) 3. Lancez la recherche (menu dition/Rechercher ou ctrl + h) sur le guillemet 4. Lorsque vous en trouvez un, quittez la recherche et vrifiez si le guillemet en question a la bonne mise en forme (sagit-il bien dun guillemet anglais ?). Sil nest pas correct, remplacez-le par le doublet () et supprimez du doublet le guillemet

superflu 5. Si besoin, supprimez lespace li au guillemet 6. Relancez la recherche pour un autre guillemet et ritrez les tapes 4 6 Remarque : Une autre mthode consiste remplacer correctement tous les guillemets puis remplacer <><espace> par <> et <espace><> par <>.

Points de suspension et apostrophes

Il existe enfin des sigles qui ont

la fcheuse tendance de ne pas tre corrects lorsque vous les saisissez manuellement. Cest le cas des points de suspension et des apostrophes. En effet, les points de suspension peuvent ntre quune succession de trois points (et non un seul signe de points de suspension). Quant aux apostrophes, elles peuvent tre victimes de fausses apostrophes, un peu la manire des faux guillemets : lapostrophe en question est juste un trait vertical suspendu en hauteur, et non lquivalent dune virgule. La bonne nouvelle pour ces deux sigles est que, en utilisant le

Remplacer tout du Rechercher/Remplacer, vous purgez dun coup toutes les mauvaises occurrences. Vous devez donc prendre soin de Remplacer tous les <...> par <> et <'> par <>.

Les tirets dincise

Parfois dans votre texte, vous aurez des tirets dincise. Ces tirets, assez proches du trait dunion, sont un peu lquivalent de parenthses, permettant lauteur de glisser des informations supplmentaires sans bouleverser la structure de

sa phrase. Seulement, en termes typographiques, les tirets dincise ne sont pas des traits dunion. Ils sont lgrement plus longs et sappellent en ralit des tirets demi-cadratins. Ces tirets demicadratins ont la particularit dtre prcds et suivis dun espace. Ils ne collent donc pas les mots de votre texte. linstar des guillemets anglais, le mieux est de coller dans le presse papier le tiret demi-cadratin () puis deffectuer une recherche manuelle et de remplacer les <-> par des <espace><><espace>.

Note : Il existe galement un autre type de tiret, plus long, appel tiret cadratin. Ces tirets sont gnralement utiliss pour les dialogues, soit lorsque vous utilisez les guillemets anglais soit lorsque vous nutilisez que des tirets. Il faudra alors galement veiller remplacer les tirets dans vos dialogues.

Le balisage des pages de lePub

Nous avons vu plus haut comment dfinir les mtadonnes

(auteur, titre, traducteur, etc.) de votre fichier. Il existe cependant des donnes internes lePub qui permettent aux logiciels de mieux sy retrouver. Ces donnes internes sappellent notions (ou semantics en anglais) et indiquent si une page html est votre texte proprement parler, la page de couverture, la page de crdits, de remerciements, etc. La notion de couverture est primordiale pour votre ePub car cest limage de cette page qui apparatra en miniature pour reprsenter le fichier. Il vous faut donc imprativement dfinir cette notion. Les autres sont laisses

votre discrtion : linstar du code xml:lang="fr" dans votre balise html, les mettre sera une belle cerise sur le gteau mais nest pas ncessaire au bon fonctionnement de lePub. La procdure pour dfinir ces notions est extrmement simple : 1. Slectionnez la page xhtml de votre ePub laquelle vous souhaitez appliquer une notion 2. Faites un clic droit et slectionnez Ajouter notions (ou Add semantics) 3. Slectionnez la notion correspondant votre page 4. Au besoin, ritrez les

tapes 1 3 avec les autres pages xhtml.

La couverture
Comme indiqu plus haut, la couverture constitue un lment trs important pour la visibilit de votre ePub. Cest en effet cette page qui intervient en miniature pour reprsenter votre texte. Elle est utilise la fois dans les tagres virtuelles des bibliothques (comme pour iBooks par exemple) et comme visuel chez les libraires en ligne. Elle constitue le premier accs du lecteur votre titre et, ce titre,

il est important de connatre quelques grands principes pour optimiser son utilisation.

Le design En tant que premier accs du lecteur votre titre, il est important de soigner la maquette de votre couverture. Si cette dernire est hideuse, le lecteur potentiel sera rebut et ne fera pas leffort den savoir plus. linverse, une couverture harmonieuse tmoigne dun travail professionnel soign qui met davantage le lecteur en confiance. En librairie, une belle couverture compte pour plus de 50 % dans lacte dachat du

lecteur. Cest importance.

dire

son

La lisibilit Nous avons vu que votre couverture apparaissait en miniature dans les librairies en ligne et sur les tagres des bibliothques. Cela signifie donc que la premire taille quelle aura (celle de la miniature) ne sera pas sa taille normale mais une taille rduite. Par consquent, tous les lments qui figurent dessus seront plus petits que leur taille relle. Comme cette miniature est le premier contact du lecteur avec votre uvre, il est important que

votre couverture soit lisible, mme une taille rduite. Sans quoi, son design global risque de passer pour de lamateurisme avec les consquences dcrites cidessus. Pour rgler ce problme de lisibilit, tchez dappliquer trois grandes rgles : tout dabord, ne surchargez pas votre couverture dinformations (le titre et le nom de lauteur suffisent). Ensuite, optez pour des polices qui, mme rduites, restent lisibles. Enfin, mettez votre texte en lgrement plus gros que ce que vous avez prvu, de sorte que, mme rduit, il soit bien lisible.

Et, bien entendu, nhsitez pas faire plusieurs essais et demander lavis de votre entourage.

Dun point de vue technique Maintenant que nous avons abord les questions thoriques de maquette et de lisibilit, il est temps de nous pencher sur cette couverture dun point de vue technique. Ici, limpratif est simple : votre couverture complte doit tre une image, un point cest tout. En effet, si votre couverture est, par exemple, un texte suivi dune image, seule limage apparatra en miniature. Il vous faut donc raliser votre

couverture comme sil sagissait dune image. Pour cela, vous pourrez encore recourir Gimp [http://www.gimp.org]. Nous ne nous tendrons cependant pas ici sur les diffrentes possibilits de Gimp tant elles peuvent varier en fonction des utilisateurs. Une fois que vous aurez dfini votre couverture, il reste quelques points vrifier, justement au niveau technique. Commenons par un rappel sur le format de votre image. Il existe de multiples formats daffichage pour les images mais lePub nen accepte que trois : gif, png et jpg.

Assurez-vous donc que votre image de couverture est bien dans ce format-l. Vient ensuite la taille de votre image. Celle-ci sexprime en nombre de pixels. Plus prcisment, une image dispose dune hauteur et dune largeur et la multiplication de lun par lautre (oui, oui, comme vos cours de gomtrie o, pour calculer laire dun rectangle, vous multipliiez la largeur par la hauteur) donne la taille de votre image. Si par exemple, vous avez une image qui fait 800 pixels de haut pour 600 pixels de large, elle aura une taille de 480 000 pixels.

Cela peut paratre beaucoup mais est en ralit assez peu : il nest pas rare que les images aient des tailles de plusieurs millions de pixels. On parlera alors de megapixels. Si, par exemple, votre image fait 1200 pixels de haut par 1000 pixels de large, elle fera 1 200 000 pixels, soit 1,2 megapixels. Vous trouverez gnralement les informations relatives la taille de votre image dans votre logiciel de retouche, dans un menu type dition\Taille de limage. Bien, maintenant que vous connaissez la taille de votre

image, voyons quels sont les impratifs respecter. Ils sont au nombre de deux : tout dabord, votre image ne doit pas faire plus de 2 megapixels en tout et ensuite, sa hauteur doit tre suprieure ou gale 1400 pixels. Pourquoi ces valeurs si prcises ? Simplement parce quil sagit des critres dApple pour apparatre dans iBooks. Or, iBooks est lun des fournisseurs principaux en ePub donc autant se conformer ses directives si vous souhaitez toucher le plus de lecteurs possible. Remarque : La taille de limage aborde ici na rien

voir avec laffichage que vous aurez dfini dans les CSS. Une image peut tout fait tre trs lourde et apparatre en tout petit dans votre ePub ou, linverse, trs lgre, et tre agrandie (mais dans ce cas-l, le rsultat sera souvent dsastreux). Cest un peu comme si, pour une recette, vous aviez une quantit donne de farine. Quelle que soit la quantit deau ou de lait que vous rajouterez, vous aurez toujours la mme dose de farine. Et seul le fait den ajouter ou den retirer permettra de modifier la quantit prsente dans votre recette.

Et en cas de problme ?
Jusqu prsent, nous vous avons expliqu comment raliser un ePub correctement. Si vous suivez nos conseils et nos instructions, il ny a pas de raisons que la validation de votre ePub renvoie des erreurs. Nanmoins, comme tout ne se passe pas toujours comme on le souhaite, nous allons aborder ici les cas derreurs les plus frquents.

lment manquant
Le texte : This resource is reachable but not present in the OPF <manifest>. "Reachable" means that a reference of some kind that points to this resource exists in the epub. Lexplication : Votre ePub utilise un lment qui nest plus prsent dans le fichier (gnralement une image ou une police). Vous avez sans doute supprim llment de son dossier en pensant ne plus vous en servir. Sauf que vous navez pas supprim la rfrence cet lment dans vos pages xhtml.

Dans la mesure o Sigil vous indique le nom de la rfrence manquante, vous devriez savoir quelle(s) page(s) sont concernes. Ouvrez-les en vue html (f11) et cherchez le code qui se rfre llment supprim. Puis, effacezle.

lment inutilis
Le texte : This resource is present in the OPF <manifest>, but its not reachable (its unused). Lexplication : Cest linverse du cas ci-dessus. Vous avez laiss des lments dans votre ePub

alors quils ne sont plus utiliss. Cest par exemple le cas si vous avez import de nombreuses images et ne les avez pas toutes intgres vos pages xhtml. Ou alors si vous avez cr plusieurs feuilles de styles (celles qui se terminent en .css) et ne les avez pas toutes utilises. L encore, comme Sigil vous indique la rfrence manquante, allez jusqu llment en question et supprimez-le (ou bien faites-y appel sil savre que vous lavez intgr votre ePub pour une raison bien prcise).

Problme de titre

Le texte : The <title> element is missing. Lexplication : Vous navez pas rempli le titre de votre ePub dans les mtadonnes et ce titre vous est indiqu comme manquant. Renseignez-le donc dans les mtadonnes. Remarque : Labsence de nom dauteur ne renvoie pas de code derreur de la part de Sigil. Il est cependant vital que cette mtadonne soit renseigne. Faute de quoi les lecteurs ne pourront pas effectuer de recherche sur votre nom dans les diffrents moteurs de recherche.

Autres problmes
Dautres problmes peuvent intervenir dans votre ePub mais, comme ces cas sont trs spcifiques et dpendent de votre fichier, nous nallons pas les aborder ici. Gardez juste lesprit que, si lexplication de Sigil peut paratre absconse, elle contient cependant tous les lments pour vous aider rsoudre le problme : nature de lincident, endroit o celui-ci apparat et ventuelle piste pour le rsoudre. Le logiciel se rfrera galement aux diffrents fichiers qui constituent lePub (le

manifest, toc.ncx, etc.). Nhsitez donc pas vous replonger dans les explications au dbut de cet ebook pour y voir plus clair. Enfin, si vous ne parvenez toujours pas rgler votre problme, nhsitez pas arpenter le net, poser vos questions sur des forums voire des blogueurs spcialiss. Les gens seront gnralement ravis de vous apporter leur aide et de vous aider progresser.

Retour au Sommaire

Le mot de la fin
Voil, vous savez dsormais ce quil faut faire pour crer votre ePub optimis. Nous avons tch de vous prsenter les principales fonctions dont vous pourriez avoir besoin mais il en existe encore de nombreuses. Nous navons pas voulu ici trop vous surcharger dinformations sur les CSS : celles-ci feront lobjet dun guide Walrus ddi. Vous devez cependant garder

quelques lments lesprit. En premier lieu, un ePub classique, sil reprend de nombreuses particularits des pages web, nest pas un site internet. Vous ne pourrez donc reprendre tels quels tous les effets ou particularits graphiques qui vous plaisent. Certaines proprits seront mal interprtes ou ne seront tout simplement pas reconnues. En second lieu, les diffrents supports ne grent pas tous les proprits CSS de la mme manire. Sur iPad et iPhone, limmense majorit des lments sont correctement interprts

mais ce nest pas forcment le cas des liseuses et de certaines applis. Ne vous tonnez donc pas quun rendu que vous pensiez gnial ne soit pas correctement retranscrit dun support lautre. Pour rsumer, la simplicit et lefficacit devront tre vos guides dans votre dfrichage. Avec lePub, vous pourrez faire beaucoup, mais vous ne pourrez de toute faon pas en faire trop.

Retour au Sommaire

Quelques sites pour aller plus loin

Si vous dsirez approfondir votre connaissance de lePub, des CSS et du HTML, vous trouverez ci-dessous quelques sites par lesquels commencer. Il ne sagit ici que dune poigne parmi une myriade mais ce sont ceux qui mont permis de me forger sur la cration des ePub. Vous pouvez donc commencer vos recherches par l si vous le dsirez.

html.net

http://fr.html.net/ Voil une adresse parfaite pour dbuter. Ses tutoriels sur le html et les CSS constituent une excellente base et une grande partie des lments mentionns dans ce tutoriel provient de leur site et de mes expriences.

Zonecss http://www.zonecss.fr/index.php Zonecss est un trs bon complment si vous souhaitez une explication claire des diffrentes proprits CSS.

Dans la mme collection

Crdits
Un livre numrique ralis par

www.walrus-books.com

Walrus est un studio de cration et d'dition de livres numriques d'exception. Sa vocation est de proposer des ebooks innovants et immersifs, l'aspect typographique soign, o le texte s'enrichit de contenus multimdia et interactifs. En crant de nouvelles expriences de lecture, plus en adquation avec les pratiques numriques d'aujourd'hui, Walrus lance l'dition sur des pistes indites.