Creer Des eBooks Avec Sigil - Benoit Huot

Embed Size (px)

Citation preview

  • CREEZ DES EBOOKS AVEC

    SIGIL

  • BENOIT HUOT

  • Table des matires

    1/ Quelques dfinitions2/ Par o commencer3/ Crer mon premier ePub4/ Pages, titres et tables des

    matiresa. Insrer des pages dans

    Sigilb. Titresc. Table des matires

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

    a. Les principes de saisieb. Les balises HTML

  • 8/ Les CSSa. O se cachent les feuilles

    de style ?b. La syntaxe CSSc. Les proprits CSS

    9/ Quelques considrations pourfinir

    10/ Le mot de la fin

    Crdits

  • Bonjour tous,Vous avez sous les yeux un

    tutoriel qui vous expliquera pas pas comment raliser un fichierePub, partir doutils gratuits et,nous lesprons, simples. Dans leslignes qui suivent, nous allons tcherde vous prsenter les fonctionsprincipales ncessaires laralisation de la majorit des ePub.Si daventure vous souhaitiez essayerquelque chose qui ne figure pas dansce livre, nhsitez pas me contacter

  • (esteriane626ATgmail.com) ou voustourner vers les tutoriels prsentsen fin douvrage.

    Sur ce, bienvenue bord !

    Benoit Huot

  • Avertissement de rigueurIl existe de nombreux logiciels vous

    permettant de crer des ePub rapidement,soit en enregistrant directement votrefichier dans ce format-l soit enconvertissant un fichier dj existant. Silsfont gnralement correctement leurtravail, ces outils automatiques onttendance surcharger le fichierdinstructions inutiles et donc le rendremoins efficace (le texte pourrait parexemple tre plus lent afficher). Le buttant de vous montrer comment optimiservotre fichier ePub, ce tutoriel abordera delgres notions de programmation et vous

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

  • Retour au Sommaire

    Quelques dfinitions

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

    EPub

  • EPub (abrviation delectronicpublication) est un format de fichiersutilis pour les livres numriques. Lesfichiers au format ePub portent donclextension .epub la fin de leur nom. Dela mme manire quun .html indique lordinateur dutiliser un navigateurInternet et un .doc dutiliser un traitementde texte (gnralement Word), un .ePubindique lordinateur dutiliser unlogiciel conu pour lire les .epub. Parmices logiciels, on peut citer :

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

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

    La particularit du format ePub estdtre un format ouvert, i.e. utilisable partous ceux qui le souhaitent, et non li unemachine en particulier. Pour lespossesseurs de liseuse, assurez-vous quevotre machine peut le lire car, si le formatePub est bien ouvert, certains fabricants(dont Amazon et son Kindle) ont opt pourdes formats propritaires et ne peuventdonc pas les exploiter (il existenanmoins 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 estlePub 2. Cest ce format que nousabordons dans ce tutoriel.

    LePub3 est en cours dedveloppement et sera davantage tournvers des fonctions multimdias. Ilnempche donc pas la publication dePub2 et ne nous concerne pas dans le cadre dulivre numrique non enrichi.

  • Les deux types dePubIl existe deux grandes catgories

    dePub : les fixed layout et lesreflowable.

    Les fixed layout imposent que lalecture du fichier, quel que soit le support,conservera la maquette dfinie par lecrateur du fichier. Cest un peu comme sivous transposiez directement la maquettecomplte dun livre sans vous proccuperdu support sur lequel le fichier sera lu. Ceformat est privilgier pour les ebooksartistiques et/ou graphiques (comme de laBD) mais cest tout. En effet, en figeant lamaquette, ce type de fichier ne permet pasde sadapter correctement la diversitdes supports (ordinateurs, portables,

  • tablettes, smartphones, liseuses) et descrans. Imaginez par exemple que voussouhaitiez lire une BD sur votresmartphone. Si les pages sont en fixedlayout, votre tlphone affichera la pageentire sur lcran, et les textes, devenustrop petits, seront illisibles. Il vous faudraalors zoomer et vous dplacer la maindans chaque page pour pouvoir suivrevotre histoire. Pas vraiment agrable entermes dexprience de lecture.

    linverse, les reflowablesadaptent au support sur lequel ilssouvrent. linstar dune page internet,le logiciel de lecture fait correspondre lefichier au format de lobjet. Le texte estdonc lisible sur nimporte quel cran, sansavoir besoin de zoomer ou doprer des

  • changements rbarbatifs. Le seul lmentqui change dans un reflowable est lapagination : comme cette derniresadapte la taille de lcran, vousnaurez pas la mme pagination sur uncran de smartphone ou une liseuse. Parexemple, lebook LIncroyable Guide delautopublication en numrique compte141 pages sur liseuse alors quil en fautprs de 594 sur iPhone. Le texte est lemme mais, pour tout lire il faut justeparcourir beaucoup plus dcrans.

    Comme vous le voyez, les ePubreflowable sont les plus pertinents car mme de convenir tous les supports.Cest donc de ce type dePub que nousallons parler ci-dessous.

    Note : Si vous souhaitez plus

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

    Quy a-t-il dans unePub ?Sans rentrer dans les dtails, sachez

    quun fichier ePub est une sorte de fichiercompress type .zip, dans lequel sontregroups tous les lments ncessaires aufichier (polices, textes, images,indications pour les logiciels de lecture).Si vous tes curieux, vous pouvez

  • regarder ce quil y a lintrieursimplement : il vous suffit de renommer le.epub en .zip puis de dcompresser lefichier, comme vous le feriez avecnimporte quel fichier compress.

    Un ePub contient trois lments :

    un fichier nomm mimetype, quiindique au logiciel que le fichierest un ePubun rpertoire nomm meta-inf,disposant du fichier container.xml.Ce fichier indique au logiciel oaller chercher les diffrentes infosdont il a besoin (texte, polices,nom dauteur). Vous naureznormalement pas besoindintervenir sur ce fichier.un rpertoire nomm OEBPS qui

  • contient tous les lmentsncessaires au contenu de lePub.Ce dernier dispose gnralementde trois rpertoires (Images pourles images, Style pour lesfeuilles de style, Text pour lestextes) et de deux fichiers. Lefichier content.opf recense toutesles mtadonnes du fichier (nom delauteur, titre de luvre, date depublication) et le fichier toc.ncxest utilis pour la table desmatires (toc tant labrviation detable of contents, soit table desmatires en anglais).

    Sauf grosse exception, vous naureznormalement pas intervenir directementdans ces fichiers. Les programmes que

  • nous allons utiliser le font notre place etdune manire plus intuitive.

    Remarque : Si vous vous amusez recompresser le dossier en .zip et lerenommer en .epub, vous constaterez quilne sera pas reconnu lors de son ouverture.En ralit, un ePub na pas lensemble deses fichiers compresss car, pour quelePub soit lu, le fichier mimetype ne doitpas tre compress. Si vous souhaitez lelire, il vous faut donc compresser ledossier en prcisant que mimetype ne doitpas ltre, ou plus simplement utiliser deslogiciels ddis la recompressiondePubs tels que ePub Packager.

    CSS

  • Lorsque vous lisez un texte, vousapprciez quil soit correctement mis enpage. Par exemple, les penses peuventtre en italiques, le titre de chapitrecentr, et le paragraphe commencer par unalina. Toutes ces mises en formes sontprcises au sein des CSS (Cascade StyleSheet, soit feuille de style en cascade enanglais). Les feuilles CSS sont incluesdans lePub et rpertorient toutes lesmises en forme utilises.

    Vous ntes pas oblig de dfinir desCSS pour votre ePub, chaque supportpouvant appliquer sa mise en forme pardfaut. Nanmoins, lutilisation des CSSvous permettra de personnaliser votrelivre, de rendre sa mise en page plusprofessionnelle, et donc plus lisible. Nous

  • aborderons donc dans ce tutoriel lamanire dutiliser les CSS. Commesouvent, vous ne trouverez rien de biensorcier ici et devriez vous en sortir avecun minimum dorganisation.

    HTMLSi vous regardez lintrieur dun

    fichier ePub, en particulier dans le dossierOEBPS/Text, vous constaterez que lestextes sont en ralit des pages xhtml (oui,les mmes que celles utilises surInternet). Un ePub utilise donc lagrammaire du html (le xhtml est juste untype un peu plus abouti que le html

  • classique) pour ses textes et un minimumde connaissance de ce langage peut trencessaire. Nanmoins, comme le html estextrmement simple utiliser pour dutexte, vous ne devriez pas avoir dedifficults.

    linstar des CSS ci-dessus, nousaborderons les notions de htmlncessaires lePub plus loin dans cetutoriel.

    Remarque : En ralit, Sigil peut tout fait grer les pages html et xml.Nanmoins, dans le cadre de ce tutoriel,nous considrerons que vous manipulezdes pages xhtml. Ce langage est en effetidal pour l'ePub : il est plus carr etlogique que le html pur, sans pour autantse rvler aussi tendu que le xml.

  • Retour au Sommaire

    Par ocommencer

    Pour raliser votre fichier ePub, vousallez avoir besoin de quatre lments :

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

    Remarque : Normalement, Notepad++

  • nest mme pas ncessaire. Je lementionne pour mmoire car je lai utilislors de la cration de mon premier ePubde dmo[http://ptgptb.free.fr/ebooks/Ebook_PTGPTB_1-le_plaisir_de_jouer.epub] dans la mesureo je travaillais la fois sous Linux etsous Windows et o il me fallait un outilpour faire le passe-plat. Notepad++constitue en effet une sorte de super bloc-notes, bien pratique pour ouvrir lesfichiers crs et modifier directement lecode (pour les CSS et le html donc).Nanmoins, Sigil se charge trs bien de lamajorit des tches.

  • Retour au Sommaire

    Votre texteNous nallons pas vous expliquercomment crire votre texte, vous pouveztrs probablement le faire vous-mme.Nanmoins, sachez que, avant de vouslancer dans votre ePub, il vaut mieux quevotre texte soit finalis. Ainsi, vous nevous concentrerez que sur une seulechose : la manire de crer votre ePub.

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

  • manire gnrale, vous pourrez importersans problme un fichier html (dans votretraitement de texte, vous devezlenregistrer au format Page web, filtre)ou un fichier txt (dans votre traitement detexte, vous devez lenregistrer au formattexte). Nous vous recommandons toutefoisle format txt car, mme si ce format neconserve pas la mise en forme, il fournitun fichier trs propre. linverse, lespages html enregistres depuis untraitement de texte rajoutent tout un tasdinformations superflues qui surchargentvotre document et ralentissent sonexploitation.

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

    apprcierez sans doute modrment dedevoir relire tout votre texte attentivementpour le baliser dans Sigil (mettrelitalique, le gras, les titres au bonformat). Pour cela, nous avons un petittruc qui vous fera probablement gagner dutemps : dtourner la fonctionRechercher/Remplacer pour atteindredirectement les lments qui doivent tremodifis.

    Il faut au pralable que vous balisiez

  • quelque peu votre document avant delenregistrer au format texte. Ici, rien debien compliqu : il suffit de mettre devantchaque groupe de mots ncessitant unemise en forme particulire une balise quevous tes sr de ne pas retrouver dans lecorps du texte. Par exemple, pour chaqueensemble de mots devant tre en italique,vous pouvez mettre au dbut du groupe letexte xxxi. Vous pouvez mettre xxxg pourtout ce qui concerne le gras. Pour lestitres, vous pouvez mettre du t1, t2, etc. ouxxxt1, xxxt2, etc. Lessentiel est que lesbalises retenues ne se retrouvent dansvotre texte que pour les balises et non aucur du texte (si par exemple, vous avezdcid de baliser un texte avec le termetitre, il y a des chances que, quand vous

  • recherchiez le mot titre dans votrefichier texte, il ne vous renvoie pas quevos balises mais galement tous les motstitre prsents dans votre texte).

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

  • par exemple, de rechercher tous les xxxi.Il vous suffira alors, la main (oui, il fautquand mme un peu de manipulation lancienne), de mettre le textecorrespondant en italique, puis desupprimer le xxxi. Vous ferez la mmemanipulation pour les autres xxxi, puispour les autres balises que vous avezprcises.

    Certes, ce processus nest pas aussirapide que le simple import dune pagehtml cre avec votre traitement de textemais il prsente lavantage de fournir unfichier propre et donc plus efficace. Et,croyez-nous, en procdant de la sorte,vous gagnerez plus de temps que si vousprfrez enregistrer la page au format htmlpuis effacer toutes les scories superflues

  • dans Sigil.

    SigilSigil est un logiciel open source (i.e.

    enrichi par les utilisateurs qui lesouhaitent et gratuit) pour crer et diterdes ePub. Il a la particularit dtre enWYSIWYG (what you see is what youget). En dautres termes, ce que vousvoyez dans Sigil apparatra de la mmemanire 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. Vousnen aurez normalement pas besoin mais,si jamais vous souhaitez travailler sur lecode de lePub en dehors de Sigil, il voussera trs certainement utile.

    GimpGimp est un logiciel de retouche

    dimages trs puissant qui vous permetdappliquer des effets vos fichiersimages. Nous ne nous appesantirons pas

  • ici sur son utilisation mais sachez quilvous sera trs utile pour convertir vosimages (Enregistrer sous), modifier leurtaille et raliser votre couverture.

    Vous pouvez tlcharger Gimp ici[http://www.gimp.org].

  • Retour au Sommaire

    Crer monpremier ePub

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

    Le texte

  • 1. Ouvrez Sigil2. Au besoin, crez un nouveau

    document (Fichier>Nouveau)3. Dans la fentre de droite, tapez

    votre texte.

    Sigil est rparti en trois grandesfentres :

    la fentre suprieure (1) contientles menus et les raccourcis pour lesfonctions principales,

    la fentre de gauche (2) liste lecontenu de l'ePub. Nous avons vuplus haut qu'un ePub tait une sortede gros zip. Les diffrents lments

  • prsents dans ce zip se trouventdans cette fentre de gauche.

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

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

    Les mtadonnesPour quun fichier ePub soit valide, il

    doit contenir au minimum trois lments :

    le texte proprement ditle nom de lauteurle titre de luvre

    Ces deux derniers lments font partiede ce que lon appelle des mtadonnes,i.e. un ensemble dinformations quigravitent autour du texte mais qui ne luisont pas lies directement. On peut

  • notamment faire figurer dans lesmtadonnes le nom du traducteur, delillustrateur, la date de publication, lenumro ISBN (identifiant propre au livreet quivalant au code barre) Seuls lesnoms dauteur et duvre sont ncessaires la validation de lePub mais de bonnesmtadonnes, prcises et exhaustives,faciliteront le travail des moteurs derecherche et auront un impact sur lestlchargements de votre ebook. Nousallons voir ci-dessous commentrenseigner facilement ces lments sousSigil.

    1. Dans le menu dition, slectionnezditeur 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, aussislectionnez French (ou toute autrelangue correspondant la languede votre texte).

    Remarque : Stricto sensu, la prcisionde la langue nest pas obligatoire pour lebon fonctionnement de lePub.Nanmoins, elle permettra aux appareilsde lecture de mieux se conformer lalangue dfinie, en termes de csure et dedictionnaire notamment.

    Vrification de routineNormalement, 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 surlicne Valider lePub tout droite(la coche verte). Normalement, unmessage saffiche vous indiquantque tout est ok. Si Sigil relve deserreurs, il vous lindique.

    2. Enregistrez votre fichier viaFichier\Enregistrer sous.

    Voil, vous venez de raliser votrepremier ePub. Certes, celui-ci est un peubrut de dcoffrage, sans textes ni images,sans mme une mise en forme particulire.Vous pouvez nanmoins le lire sansproblme sur les diffrents supports

  • concerns.Nous allons dsormais aborder la

    manire de mieux organiser votre ePub.

  • Retour au Sommaire

    Pages, titres ettable des matires

    La logique despages dans un ePub

    Comme nous lavons vu plus haut, lefichier ePub adopte une mise en pagereflowable, i.e. o la pagination lie autexte sadapte lcran qui laffiche.

  • Nanmoins, il est important de savoirquun ePub contient lui aussi des pagesmme si celles-ci ne sont pas tout faitles mmes que celles auxquelles vous teshabitu.

    Si vous explorez un fichier ePub dansSigil, vous constaterez que, dans ledossier Textes, il y a parfois plusieursfichiers xhtml. Ce sont ces fichiers xhtmlqui constituent les pages de lePub. Cene sont donc pas des pages au sens o onlentend habituellement, mais lquivalentde pages web.

    Schmatiquement, considrez quunepage xhtml correspond une section biendfinie de votre texte (chapitre, partie,sous-partie, lexique, remerciements).Supposons par exemple que vous ayez

  • crit une nouvelle qui se compose de troischapitres. Vous pouvez tout fait mettreles trois chapitres au sein dune mmepage xhtml. Nanmoins, cela impliqueraque la machine (liseuse, smartphone,tablette, ordinateur) chargera dans sammoire lensemble du texte en une seulefois alors que vous navez pas besoin detout. linverse, si vous dcidez de faireun fichier xhtml par chapitre, votresupport ne chargera que la page xhtml encours de lecture, ce qui sera plus rapide etmoins gourmand en nergie.

    Qui plus est, le fait de travailler surplusieurs pages xhtml clairement dfiniesvous aidera vous organiser et mieuxvous reprer dans lePub. Supposons parexemple que votre texte soit une slection

  • darticles de votre blog et que, pour uneraison quelconque, vous dcidiez demodifier lun des billets. Vous pouvezfaire un rechercher/remplacer dans votregrosse page xhtml qui contient tous vostextes ou bien vous rendre directement surla page incrimine si vous avez eu labonne ide de raliser plusieurs pagesdistinctes dans votre ePub.

    Comme vous le voyez, le fait deraliser plusieurs pages dans un ePub estprfrable car cela facilite le chargementdes pages (et les logiciels de lecture desliseuses ne sont pas des foudres de guerrecomme les ordinateurs) et permet demieux organiser son travail. Celaconstitue en quelque sorte la preuve duntravail soign et professionnel.

  • Retour au Sommaire

    Comment insrer despages dans Sigil

    La procdure est relativement simple, partir du moment o vous vous trouvezdans Sigil. Vous avez, au choix, deuxmthodes : linsertion de pages proprement parler et linsertion de sautsde chapitres.

    Insrer des pages proprement parler

  • 1. Dans le navigateur du livre (lafentre de gauche), positionnez-vous sur Textes

    2. Faites un clic droit et slectionnezAjouter section vierge.

    3. Ritrez lopration autant de foisque ncessaire.

    Voil, vous avez dsormais vos pagessupplmentaires.

    Insrer des pages grceaux sauts de chapitre

    Lorsque vous lisez un livre, moinsquil ne sagisse dun trs vieux livre depoche, lorsque vous attaquez un nouveauchapitre, vous commencez votre lecture

  • sur une nouvelle page. Ce changement depage facilite votre lecture en marquant unenette diffrence entre la fin dun texte (lechapitre prcdent) et le dbut dun autre(le chapitre suivant).

    Sigil conserve cette logique lie auchangement de page de sorte que, pourchaque changement de chapitre que voussouhaitez, il cre une nouvelle page. Voicila procdure suivre :

    1. Slectionnez la pageSection0001.xhtml

    2. Si jamais cette page dispose djdun texte, assurez-vous de placerle curseur lendroit prcis ovous souhaitez effectuer lechangement de chapitre. Sigilgnrera en effet le saut de page

  • lendroit o se situe votre curseur.3. Appuyez sur licne Chapter Break

    situe dans le menu suprieur (ouutilisez le raccourci clavier ctrl +Entre ou encore dition\Saut dechapitre)

    4. Si besoin, replacez le curseur lendroit de votre texte o voussouhaitez insrer un saut dechapitre

    5. Ritrez les tapes 3 et 4 jusquobtenir le nombre de pagesdsires.

    Remarque : Vous pouvez aussi insrer

  • des sauts de chapitre en utilisant leraccourci ctrl+ Entre ou en passant par lemenu dition\Saut de chapitre.

    Tout lintrt de cette mthode est que

    chaque page cre est une sorte de clonede la page rfrente. Ainsi, si vous avezdcid dappliquer des styles particuliers votre texte, ceux-ci pourront galementtre directement appliqus aux autrespages, sans que vous ayez besoin deprciser chaque fois o aller chercherles styles utiliser (voir la partie sur lesCSS plus bas).

    Renommer les pagesxhtml

  • Si vous le souhaitez, vous pouvezrenommer les pages xhtml de votre ePubpour mieux vous y retrouver. Par exemple,plutt que davoir quatre fichiersclassiques (Section1.xhtml,Section2.xhtml, Section3.xhtml,Section4.html), vous pouvez les renommerpour quils sappellent Chapitre1.xhtml,Chapitre2.xhtml, Chapitre3.xhtml etRemerciements.xhtml.

    L encore, la procdure est simple :

    1. Slectionnez la page que voussouhaitez renommer

    2. Faites un clic droit et slectionnezRenommer.

    3. Renommez votre page, ennoubliant pas de bien mettrelextension .xhtml

  • Pour un traitement correct de votrefichier, quelques prcautions dusage sont respecter dans le nom de votre fichier.Ainsi, nutilisez pas de lettres accentues,de caractres spciaux (comme les pointsdinterrogation ou dexclamation) et nemettez pas despace.

    Remarque : Vous pouvez galementrenommer votre page en la slectionnantet en appuyant sur F2.

  • Retour au Sommaire

    TitresBien. Nous avons donc vu commentorganiser votre ePub en plusieurs pagesxhtml pour lui donner une prsentationcohrente. Il est temps dsormais desintresser aux titres et lahirarchisation de votre texte.

    Si votre texte est long, il seracertainement divis en plusieurs parties,voire en sous-parties. Sil sagit duneuvre de fiction, vous aurez sans doutedes chapitres. Si votre ouvrage est unessai, vous aurez vraisemblablement des

  • chapitres, des sous-chapitres, voire dessous-sous-parties. Et, si vous vous tesdonn la peine dorganiser vos propos,vous aimeriez galement que votre lecteurpuisse sy retrouver facilement.

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

    deux manires. Dune part, en tant quetitres, ils disposent dune mise en formespcifique qui les met en avant. Celapermet de rythmer la lecture et de sereprer plus facilement dans le texte.Dautre part, comme ils sont dfiniscomme titres dans Sigil, vous allezpouvoir crer une table des matiresautomatique rapidement et sans problme.Vos lecteurs pourront ainsi naviguer danslePub directement partir de cette table

  • des matires.Remarque : Dans un ePub, la table des

    matires est automatise et se trouve endehors du texte proprement dit (voussavez, cest le fichier toc.ncx auquel onna pas besoin de toucher). Il nest doncpas forcment ncessaire de faire figurer,en dbut ou en fin douvrage, une tabledes matires ou un sommaire similaire celui que vous trouvez dans les versionspapier. Seule exception notable largle : si vous destinez votre fichier auformat Kindle. Le format de fichier propreau Kindle implique en effet la prsencedune table des matires physique. Si vousenvisagez ce support, il vous faudra doncrajouter votre table des matiresmanuellement dans votre ePub, liant

  • chaque section de votre livre au fichierxhtml concern en lien hypertexte. Ellefera doublon avec le toc.ncx mais cestune contrainte avec laquelle il fautmalheureusement composer

    La hirarchie destitresLintrt de mettre des titres est de

    hirarchiser linformation. Les titresseront donc des titres de niveau 1, 2, 3

    Un titre de niveau 1 correspondgnralement un titre de chapitre ou degrande partie.

    Un titre de niveau 2 est une sous-partie

  • dun titre de niveau 1. Il spare le contenude votre texte en plusieurs grandsensembles clairement identifiables. Parexemple, si vous avez un texte qui a pourtitre de niveau 1 Les tres vivants, vousaurez probablement, en titres de niveau 2,Les vertbrs et Les invertbrs.

    Un titre de niveau 3 constitue lui-mmeune sous-partie dun titre de niveau 2.Pour reprendre lexemple ci-dessus, vouspourriez avoir, en titre de niveau 3 Lesanimaux marins, Les animaux volantset Les animaux terrestes.

    Un titre de niveau 4 est une sous-partiedun 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, cetutoriel dispose de 5 niveaux de titres etcela fait dj une arborescence biendveloppe.

    Le balisage des titresNormalement, si vous avez bien

    prpar votre texte au pralable, voussavez dj quel texte constitue un titre,quel texte constitue un sous-titre, queltexte constitue un sous-sous-titre et ainside suite. Le balisage est alorsextrmement simple.

    1. Slectionnez la portion de texte laquelle vous voulez appliquer une

  • mise en forme de titre

    2. Cliquez sur la bote de dialogueNormal et slectionnez le niveaude titre que vous souhaitez(Heading 1 pour titre de niveau 1,Heading 2 pour titre de niveau2). Sigil appliquera une mise enforme spcifique pour chaqueniveau de titre. Nous verrons plusloin comment modifier (ou crer !)ces mises en forme pour lespersonnaliser lenvi.

  • 3. Rptez lopration pour tous lestitres de votre document

  • Retour au Sommaire

    Table des matiresNous avons vu plus haut que lintrtdune table des matires au sein dun ePubtait son automatisation. Pour fairesimple, votre table des matires est unesorte de grosse page web qui reprend vostitres et qui, lorsque vous cliquez sur lundeux, vous amne directement la pageconcerne. Donc, si vous avezcorrectement balis votre fichier, vouspourrez gnrer automatiquement unetable des matires propre et efficace.

  • Comment gnrer unetable des matiresComme cette cration est totalement

    gre par Sigil, vous navez qu suivreles quelques tapes ci-dessous.Maintenant que vous avez cr les titres,il ny a presque plus rien faire.

  • 1. Tout dabord, affichez la fentre deTable des matires via Vue\Tabledes matires ou en appuyant sur alt+ F3

    2. Cliquez sur le bouton GnrerTDM depuis les titres

    3. Une nouvelle fentre intituleSlecteur de titres apparat, vousprsentant la table des matires. Sicertains titres napparaissent pas ce stade, cest parce quils nontpas t correctement baliss.Refermez donc ce slecteur etvrifiez le balisage. Puis reprenez ltape 2.

  • 4. Le slecteur vous permet de choisirles titres que vous souhaitez voirapparatre dans votre table desmatires. Si vous voulez en fairedisparatre certains (par exemple,si vous souhaitez vous cantonneraux titres de niveau 1 et 2), il suffitde retirer la coche des casescorrespondantes.

    5. Cliquez sur OK. Votre nouvelle

  • table des matires estoprationnelle et apparat dans safentre.

    6. Par acquis de conscience, cliquezsur licne Valider lePub tout droite (la coche verte).Normalement, un message saffichevous indiquant que tout est ok. SiSigil relve des erreurs, il vouslindique.

    Remarque : Pour gnrer la table desmatires, Sigil balise votre texte avec desid, des marqueurs didentit qui luipermettent de sy retrouver. Par dfaut, illeur donne des noms abscons (commeid_heading_1) mais vous pourrez lesmodifier si besoin dans le code html. Sigilremettra automatiquement jour la table

  • des matires.Comme vous le voyez, le fait de bien

    structurer son texte en amont permetensuite de gagner en efficacit.

  • Retour au Sommaire

    Avant depoursuivre

    Nous venons de voir comment raliser unePub trs facilement. Histoire de bienfixer les lments, voici un rapide rsumdes lments prendre en compte.

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

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

    3. Balisez correctement votre texte en

  • termes de titres et de sous-titres.4. Gnrez votre table des matires.5. Renseignez les mtadonnes Auteur

    et Titre, ainsi que celles que vousestimez utiles.

    6. Lancez la vrification de lePub.7. Si tout est ok, enregistrez le fichier

    en noubliant pas de prciserlextension .epub. Vous pourrezds lors le lire sur tous lessupports mme douvrir ce typede fichier.

    Nous allons maintenant nous penchersur la manire de personnaliser etdoptimiser votre fichier. Pour cela, nousvous prsenterons dabord les diffrentesicnes de Sigil, pour que vous soyez enterrain de connaissance. Puis nous

  • aborderons les feuilles de style CSS.

  • Retour au Sommaire

    Linterfacede Sigil

    Vous tes dj familiaris avec certainslments de linterface de Sigil. Voyonsmaintenant quoi correspondent lesdiffrentes barres doutils.

    Remarque : La prsentation ci-dessous est extraite de L'Autopublicationby Walrus de Jiminy Panoz. Sil aborde lacration dun ePub, sa lecture se rvlesurtout instructive concernant lesdiffrentes plates-formes dauto-dition et

  • la manire de promouvoir son titre (unlment ne surtout pas ngliger si onveut sortir du lot !)

  • Retour au Sommaire

    La rangesuprieure

    Le premier bloc vous sert Crer unnouveau fichier, Ouvrir un fichier,Enregistrer et Enregistrer sous.

    Le deuxime bloc est constitu deslments Annuler et Refaire.

  • Le troisime fournit les outilscouper/copier/coller.

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

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

  • utiliserez ces icnes lorsque nousattaquerons loptimisation du code et lesCSS.

    Le sixime et dernier bloc vous permetdinsrer un nouveau chapitre (doncinsre un saut de page numrique) ou uneimage. Cette dernire doit tre au formatjpg, gif ou png.

  • La range infrieureLe premier bloc est un slecteur qui

    vous permet dorganiser votre table desmatires par arborescence (headings).Vous lavez dj utilis pour faire votretable des matires automatique.

  • Le deuxime bloc vous permet demettre en gras, italique, souligner ou rayerla partie de texte que vous avezslectionne.

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

  • normalement pas besoin de ces outils sivous utilisez les CSS.

    Le quatrime permet dinsrer deslistes puces ou numrotes.

    Le cinquime bloc vous permet defaire un don pour aider au dveloppementde lapplication.

    Le sixime vous permet de rgler

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

    Le septime et dernier bloc vouspermet de nettoyer le code HTML devotre e-book et de valider votre fichierpour vous assurer quil est correct. Vousavez dj utilis la coche verte pour vousassurer que votre premier ePubfonctionnait convenablement.

  • Pourquoi des outilsqui ne servent rien ?

    Vous avez probablement remarququune bonne partie des outils proposspar Sigil ne nous serviront pas dans lecadre de ce tutoriel. Les utilisernempchera certes pas votre ePub defonctionner mais, comme le but de cetutoriel est de vous apprendre raliserun fichier optimis, utiliser ces outilsrisque de plus vous gner quautre chose :vous appliqueriez un effet quil vousfaudrait ensuite retravailler proprement

  • dans le code du fichier. Nous prfrons deloin passer directement par le code pourconfigurer ds le dpart les bonslments, sans passer par ltapeutilisation doutil + retouche. Cela serapeut-tre un peu plus laborieux (et encore,vous verrez que le html et les CSS sontglobalement simples pour les ePub) mais,au final, vous aurez la satisfaction davoirralis un ePub dont vous naurezabsolument pas rougir auprs desprofessionnels. Un ePub qui, en outre,sera calibr pour viter les bugs etfaciliter sa lecture.

  • Retour au Sommaire

    Les bases du HTML

    Bien. Nous entrons dsormais dans lapartie cambouis de lePub. Pour pouvoirraliser ce que vous souhaitezproprement, il va vous falloir patauger unpeu dans le code html et les CSS. Pas depanique ! Le html est un langage simple,surtout lorsquil sapplique du texte.Nous allons donc voir dans un premiertemps comment se compose un fichierhtml (ou xhtml), histoire de comprendre lalogique de prsentation, puis nous

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

    informations qui suivent ont pour but devous familiariser avec le langage html.Mais vous naurez nullement tout saisir la main, Sigil sen charge trs bien.Seulement, le html, cest comme lamcanique : si vous voulez commencer bidouiller dans le moteur, il vaut mieuxque vous compreniez comment afonctionne pour viter les erreurs.

    Les principes desaisie

  • Le html est un langage deprogrammation driv de langlais. Parconsquent, pour tout ce qui concerne seslments, nutilisez PAS de termes avecaccent.

    De mme, ce langage informatique gremal les espaces au sein de ses propresbalises. Si vous devez crer des identitsou des classes (nous verrons plus loin dequoi il sagit), les noms que vouschoisissez devront tre attachs et sanscaractre spcifique. Dune maniregnrale, cantonnez-vous lalphabet, auxchiffres et aux tirets, vous serez sr de nepas vous tromper.

    Le code dune page

  • webUne page web telle quaffiche par

    votre navigateur Internet est en ralit unepage de texte pur, contenant tout un tasdinstructions daffichage (tel lment enhaut, tel bloc gauche) et de liens versles objets prsents sur la page (une image,une vido, une adresse mail). Cestvotre navigateur qui interprte lesdiffrentes instructions pour affichercorrectement la page.

    Sous Sigil, imaginons une bte pagexhtml 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 troisparagraphes dans une page vierge de Sigilet que vous basculez ensuite en vue html(via la barre doutils ou en apppuyant surF11), vous aurez le texte suivant :

  • Prsent comme cela, lensembleparat trs abscons mais ne lest en ralitpas tant que cela. Nous allons dcortiquerensemble les diffrentes parties de ce

  • code pour que vous en compreniez bien lalogique.

    Le bloc de dclaration

    Ce premier paragraphe indique aunavigateur de quoi est compos le fichierquil est en train de lire. Il rpond unesyntaxe trs prcise dont il ne faut pasdvier. Fort heureusement, Sigil gnre

  • tout seul ce bloc de dclaration.

    Le bloc html

    Cette ligne indique au navigateur que lereste du texte quil va lire utilise lelangage html. Cest dans ce bloc que vousprciserez la langue de votre page, pouraider le logiciel effectuer les bonnescsures. Il vous faudra pour cela rajouterle texte xml:lang="fr", pour avoir :

  • Remarque : Il vous parat sans doutetrange de devoir ajouter cette mentionalors que, dans les mtadonnes de votrefichier, vous avez dj prcis la langue.Sachez que ce rajout permet surtout auxmachines de grer correctement lescsures et les dictionnaires intgrs. Ilnest donc pas ncessaire au bonfonctionnement de lePub mais constitueune jolie cerise sur le gteau.

    Le bloc en-tte

  • Cest dans ce bloc que vous dclarezcertains informations propres au fichiertel le titre de la page (vous savez, ce quiapparat en haut de votre navigateurInternet) ou lendroit o aller chercher lesfeuilles de style.

    Le bloc body

  • Cest dans ce bloc que vous allez avoirtout votre texte. Ce bloc peut donc servler trs long mais il ne prsente gurede difficults.

    Le bloc html, retour

  • Cette balise clt le fichier html et nouspermet daborder llment le plusimportant du html : lutilisation desbalises.

  • Retour au Sommaire

    Les balises htmlIl faut savoir que le langage html utilisedes balises, qui agissent comme desmarqueurs dans le fichier. Ainsi, il existedes balises pour les titres, lesparagraphes, les images Pour fairesimple, imaginez les balises comme desguillemets de dialogue. Quand vous lisezun texte, un guillemet au dbut vousprcise que le dialogue commence. Et, enfin de dialogue, un second guillemet,lgrement diffrent du premier, vousindique que le dialogue est termin. Si

  • vous navez que le guillemet de dpart, lalecture vous gne car vous sentez quilmanque quelque chose en fin de texte.

    Eh bien, pour les balises, cest pareil :si vous voulez que tout fonctionne, il fautune balise au dbut et une autre balise,lgrement diffrente, la fin. Et aumilieu, le texte auquel sappliquent lesbalises.

    Toutes les balises html prennent laforme et . La balise figure au dbut, et la figure en fin.

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

  • Certaines balises sont galement pluslongues que dautres. Par exemple, est lgrement plus complexe quunsimple . Cest tout simplementparce que, pour certaines balises, vouspouvez rajouter des informationscomplmentaires lintrieur. Nousverrons plus bas les infoscomplmentaires quon peut rajouter,lessentiel tant ici de se souvenirquelles se mettent dans la premirebalise.

    La logique des cumulsde balise

  • Vous avez de la chance, le langagehtml est un langage relativement simple ettrs logique. Si vous labordezcalmement, vous verrez quil nest guresorcier pour peu que lon garde enmmoire quelques grands principes.

    Nous avons dj abord le premierprincipe, celui des balises ouvrantes etfermantes. Nous allons dsormais aborderla question des balises multiples.

    Imaginons que vous souhaitiez quunmot dun paragraphe se trouve en italiquealors que le reste du paragraphe ne lestpas. Votre paragraphe normal se trouveraencadr par les balises et (lesbalises pour les paragraphes) alors quevotre mot sera encadr par les balises et (les balises pour litalique).

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

    Comme vous le voyez, le code pourlitalique ( et ) se trouve imbriqudans le code du paragraphe ( et ).Limbrication des balises est aussi simpleque a : la dernire balise ouverte doittre la premire ferme. Comme dans unjeu de poupes russes, vous vous assurezque la plus petite (ici la plus imbrique)est complte (i.e. ouverte et ferme) puisvous passez la poupe russe un peu plus

  • grande puis celle encore plus grande etainsi de suite.

    Cela vous semble compliqu ? Labonne nouvelle, cest que Sigil est quipdun outil puissant pour nettoyer votrecode html (cest licne du pinceau ctde la coche verte) et quil peut rattrapervos erreurs dinattention. Lautre bonnenouvelle est que, pour un fichier texte,vous aurez relativement peu de balisesimbriques les uns dans les autres.

    Les balises dehirarchisationIl est maintenant temps de vous

  • prsenter les principales balises que vouspourrez utiliser. Plutt que de toutes vousles lister abruptement, nous avons prfrles regrouper par catgories. Cescatgories ne sont en rien officielles, ellesnous ont simplement paru plus pratiquespour la comprhension des diffrentesbalises.

    Nous allons commencer par les balisesde hirarchisation, i.e. celles qui vouspermettent dorganiser votre document.Elles sont de deux grands types : lesbalises de titre et les balises deparagraphe.

    Les balises de titreSelon le niveau que vous souhaitez

  • pour votre titre, ces balises prendront laforme dun h (heading en anglais, pourtitre) suivi dun numro. Ainsi vous avez :

    pour les titres deniveau 1 pour les titres deniveau 2 pour les titres deniveau 3 pour les titres deniveau 4 pour les titres deniveau 5Et pour les titres deniveau 6

    Remarquez quil nexiste pas debalises pour des titres de niveau 7 et

  • infrieurs. Six niveaux de titre sontlargement suffisants pour couvrir lahirarchisation de votre texte mais, sivous souhaitez aller au-del, vous pouvezencore ruser en ajoutant des listes puces,pour distinguer les diffrents lments.

    Lorsque vous avez appliqu les styles vos titres pour prparer la table desmatires, Sigil a attribu ces balises auxtextes concerns (vous pouvez le vrifieren basculant en vue html, via la barredoutils ou en appuyant sur F11).

    La balise de paragrapheElle est toute simple : et .

    Tout paragraphe de la page commencerapar et se terminera par .

  • Les balises de mise enformeAux commencements dInternet, les

    CSS et leur mise en forme nexistaientpas. Nanmoins, les concepteurs avaientpris soin de crer quelques balises demise en forme applicables directementdans le code html. Ces dernires sonttoujours utilises et vous permettentdallger le code de vos CSS (donc derendre vos fichiers plus efficaces).

    ItaliqueVous pouvez utiliser indiffremment

    et , interprts de la

  • mme manire par les logiciels.Nanmoins, si vous tenez tre le pluslogique par rapport au code html,privilgiez le .

    GrasVous pouvez utiliser indiffremment

    (b comme bold, soit gras enanglais) et interprtsde la mme manire par les logiciels.Nanmoins, si vous tenez tre le pluslogique par rapport au code html,privilgiez le .

    SoulignLe html utilise les balises (u

  • pour underlined, soit soulign en anglais)pour le soulignement. Nous ne lesmentionnons ici que par soucidexhaustivit car ces balises sont bannir dans un ePub : elles sont toutsimplement une source derreur. Qui plusest, le soulignement sert dj pour lesliens hypertextes. Lutiliser pour une autrefonction sera donc plus source deconfusion quautre chose.

    ExposantSi vous utilisez des abrviations, vous

    aurez peut-tre recours des 1er, 2e,3e et ainsi de suite (notez au passageque labrviation correcte utiliseseulement le e et non le me comme on le

  • voit trop souvent avec 2me, 3me, etc.). Lee de ces abrviations est en exposant, i.e.plus petit et surlev par rapport la lignede base de votre texte. Pour le mettre enexposant, il faudra utiliser les balises et .

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

    Remarque : Lutilisation de la balise permet effectivement de relevervotre texte par rapport la ligne de base.Nanmoins, elle ne diminue pas la taille

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

    Quelques balisessupplmentaires

    Retour la ligneParfois, vous voudrez que votre texte

    retourne la ligne sans forcment gnrerun nouveau paragraphe (par exemple,vous voulez faire une numration avecdes tirets et ne voulez pas dinterligne

  • accru entre chaque ligne). Dans ce cas-l,vous pouvez forcer le renvoi la ligne enutilisant . Notez que,exceptionnellement, cette balise na pasbesoin dune balise fermante.

    Exemple

    Liens hypertexteexternes

    Vous souhaiterez peut-tre insrer dans

  • votre fichier des liens vers des pagesweb. Dans ce cas-l, vous le ferez aveclinstruction (a estlabrviation de anchor, soit ancre enanglais), o vous remplacerez XXX parladresse web que vous dsirez.

    Il est prfrable que vos lienshypertextes soient clicables depuis untexte, et non une image. En effet, lesliseuses ne traitent pas les lienshypertextes sur les images. Donc, si vousles mettez, sachez quils ne seront pastoujours actifs et que tout dpendra dusupport de lecture.

    ExempleSupposons que, dans le texte Plus

    dinfos sur Google, vous souhaitiez queGoogle soit cliquable et vous amne

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

    Liens hypertexte au seinde lePub

    Parfois, notamment si votre texte estlong, vous aurez envie de permettre votre lecteur daller directement unesection de votre page xhtml ou de votredocument. Il ne sagit donc pas ici deliens externes qui renvoient vers uneadresse extrieure mais de liens internes

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

    Dans le premier cas, le code reste lemme que ci-dessus (soit ), ceci prs que, enlieu et place du XXX mentionn ci-dessus, vous indiquez le nom de la pagexhtml que vous souhaitez.

    Normalement, lensemble desdocuments xhtml se trouvent dans le mmesous-dossier de lePub (gnralementText). Vous navez donc pas besoin deprciser lemplacement du fichier.

  • Cependant, sil savre que, pour uneraison ou une autre, les textes lis ne setrouvent pas dans le mme sous-dossier, ilfaudra alors prciser le chemin suivre.

    ExempleVous avez un texte qui dit Vous

    pouvez en savoir plus sur lauteur ici, oici renvoie une notice bibliographiquede lauteur prsente en fin de fichier.Cette notice se trouve dans une page xhtmlintitule notice.xhtml. Le code est alors lesuivant :

  • Supposons maintenant que cette noticese trouve ailleurs, dans un rpertoireintitul Text. Le code serait alors :

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

    Liens hypertexte au seindune mme page

  • Si vous souhaitez quau sein dunemme page xhtml, un renvoi seffectue(comme pour un appel de note de bas depage, par exemple), vous allez avoirbesoin de deux lments supplmentaires :id et #.

    Id (pour identification) est un marqueurqui agit comme une sorte de drapeau.Vous lintgrez au sein dune balise djexistante, vous lui attribuez un nom et,lorsque vous vous rfrerez ce nom, lelogiciel le retrouvera automatiquement.Comme il sagit dun marqueur qui permetau logiciel de se reprer, les id de chaquepage doivent tre uniques pour empchertoute confusion. Le nom attribu une idne peut donc pas tre repris pour une autreid de la mme page.

  • Remarque : Vous pouvez en revancheattribuer le mme nom des id qui setrouvent dans des pages diffrentes. Eneffet, lorsque vous faites un lien vers uneautre page, vous prcisez le nom de lapage, ce qui empche la confusion avecune autre id.

    # est pour sa part un marqueur quiindique au logiciel de rester dans la mmepage xhtml. Lorsque vous saisissez le lien,en lieu et place du XXX, vous prcisez #suivi du nom de lid que vous aurezdfinie. Le logiciel se chargera de vousemmener directement au textecorrespondant.

    ExempleVous souhaitez que, dans votre texte, le

    terme Calembour soit cliquable et vous

  • amne en bas de fichier pour une noteexplicative mentionnant Dfinition deCalembour : jeu de mots. Pour cela, vousallez devoir indiquer, pour Calembour,quil y a un lien suivre et, pourDfinition de Calembour : jeu de mots,quil y a un drapeau auquel se rendre. Cedrapeau doit avoir un nom, que nousappellerons note1.

    Le code sera le suivant :

    Le #note1 indique au navigateur derechercher lid note1 dans la mme page

  • xhtml que le texte. Le navigateur se renddonc au paragraphe dfini par id="note1"et laffiche.

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

    Liens hypertexte versun point prcis delePub

    Vous aurez parfois besoin dinsrer unlien vers un endroit prcis dune autrepage xhtml. Supposons par exemple que,

  • dans un ePub de recettes de cuisine, unepage liste tous les ingrdients ncessaireset la manire de les prparer et que voussouhaitiez insrer un lien, non pas vers lapage des ingrdients mais vers uningrdient en particulier. Il va vous falloirindiquer au logiciel dans quelle page allerchercher, et quelle ancre sattacher.

    Le code est ici un mlange de deuxcodes que nous avons vus ci-dessus : lelien vers une autre page et le lien au seindune mme page. Il prendra la formesuivante :

  • Noubliez pas dans le nom de la page,de bien prciser le nom complet, aveclextension (xhtml ou html la plupart dutemps).

    ExempleReprenons lide de la recette de

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

    Dans la page o vous insrez le lien :

    Et dans votre page dingrdients, pour

  • le paragraphe pommes de terre :

    Renvois multiplesGardez enfin lesprit que votre texte

    est un texte vivant, dans lequel le lecteurdoit pouvoir naviguer facilement etreprendre sa lecture aprs avoir lu votrerenvoi. De la mme manire que vousavez dfini des liens du texte vers votrerenvoi, il vous faudra donc dfinir desliens de votre renvoi vers le texte,toujours avec .

  • ExempleReprenons le cas de la note relative

    aux calembours. Conformment nosrecommandations, vous avez dcid demettre un renvoi la fin de vos notes pourretourner au corps du texte. Vous avezdeux id dfinir : celle pour leparagraphe contenant lappel de note,pour pouvoir y revenir par la suite et cellepour la note. Nous appellerons ces deuxid Onote1 (o pour origine) et note1.Enfin, nous insrerons en fin de note letexte [Retour], cliquable pour revenirau texte.

    Le code sera alors le suivant :

  • Pour la note proprement parler :

    Liens mailVous pouvez galement vouloir que le

    lien nouvre pas une page Internet mais unmail dans lequel il soit possible dcrire.Dans ce cas-l, la balise est juste un peuplus prcise : ovous remplacerez XXX par une adressemail valide.

  • ExempleDans votre page de prsentation, vous

    souhaitez laisser la possibilit au lecteurde vous contacter et indiquez donc lamention suivante : Si vous avez desremarques ou des suggestions, nhsitezpas me contacter [email protected]..

    Le code html sera le suivant :

    Remarque : Dans le code html,

  • ladresse mail de cet exemple est rptedeux fois. La premire indique en ralitau navigateur le lien suivre pourenvoyer le message tandis que la secondeaffiche ladresse lcran. Mais vouspouvez tout fait avoir comme texte Sivous avez des remarques ou dessuggestions, nhsitez pas me contacterici avec un ici cliquable qui ouvre lamessagerie. Le code sera alors :

  • Insertion dimageLes critres pour insrer une image

    Vous souhaiterez trs probablementinsrer des images dans votre texte, quilsagisse dun logo ou de votre couverture.Sigil vous permet dinsrer trsfacilement de telles images viadition\Insrer une image ou le bouton dela barre doutils. Cependant, vous devezconnatre quelques lments pourprocder correctement.

    En premier lieu, le format de fichier. Ilexiste de multiples formats daffichagedimage mais les ePub nen grent quetrois : les .jpg, les .gif et les .png. Lechoix dun format ou dun autre pour votreePub a assez peu dincidence sur la

  • qualit daffichage donc il vous suffit devous assurer que vos images sont au bonformat.

    En deuxime lieu la taille de votrefichier image. Nous avons vu plus hautquun ePub tait un fichier compress typezip qui contenait diffrents lments, dontdes images. Donc, plus le fichier de votreimage sera lourd et plus lePub le sera. Sivous avez peu dimages, ce nest pasforcment gnant. Nanmoins, si votreePub contient beaucoup dimages, il peuttre intressant que vous rduisiez enamont le poids de vos fichiers pour viterde vous retrouver avec un ebook deplusieurs megaoctets.

    Pour rduire le poids de vos fichiers,vous avez deux solutions (que vous

  • pouvez combiner) : rduire le nombre depixels qui composent votre image etprivilgier le format jpg. En effet, leformat jpg inclut, la base, unecompression dimage si bien quuneimage en jpg ne fera pas le mme poidsquune image en .gif.

    Pour rduire le nombre de pixels devotre fichier, il va vous falloir passer parun logiciel de retouche dimage. Gimp[http://www.gimp.org] est gratuit etpermet trs bien cela :

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

    de limage3. Assurez-vous de voir le symbole

    dune chane relie, entre la largeuret la hauteur de votre image. Cela

  • signifie que votre image seramodifie de faon proportionnelle.Au besoin, cliquez sur la chanebrise pour quelle soit nouveaurelie.

    4. Modifiez la largeur ou la hauteurde votre image.

    5. Enregistrez votre image.6. Ritrez si besoin les tapes 1 5.

    La balise html pour linsertiondimage

    Si vous fouillez dans le code html devotre ePub, il est bon de savoir quoicorrespond la balise pour insrer desimages. Cette dernire prendra la formesuivante :

  • Le alt indique sommairement quoiressemble limage et est utilis pour lessites internet. Si limage vient manquer,vous passez la souris dessus et le textesaffiche. Bien videmment dans un ePub,votre image se trouve dans le fichier doncvous navez pas besoin de mettre un texteen cas dabsence.

    Le src indique le chemin et le nom delimage utiliser. Il prend gnralement laforme suivante : src="../Images/XXX" oXXX est le nom de votre image. Commevu plus haut, les .. indiquent quil fautremonter dun dossier danslarborescence (i.e. passer du dossier

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

    Enfin, noubliez pas de mettre le nomcomplet de votre image, avec sonextension (jpg, gif ou png dans le cadredun ePub) et en respectant bien lesmajuscules et les minuscules.

    Les balisesdorganisationNous entrons ici dans des balises un

    peu plus complexes et spcifiques, quivont vous permettre daffiner laprsentation de votre fichier. Elles seront

  • utilises conjointement avec les CSS.

    SpanNous avons vu quil existait des

    balises pour les paragraphes, les titres,etc. Curieusement, il ne semble pas enexister pour des mots ou des lettres seuls.En ralit, cest la balise qui remplit cet office.

    Utilise seule, najoute rien au code html, il sagitsimplement dun lment neutre.Nanmoins, tout lintrt de cette baliseest quelle peut tre renseigne (par un id,par exemple), ce qui lui permet depouvoir grandement interagir avec lesCSS.

  • ExempleVous rdigez un texte sur les films

    daction et faites rfrence Pige decristal, le premier film de la trilogie DieHard, avec Bruce Willis. Vous nesouhaitez pas surcharger votre texte avectrop dinformations filmiques et dcidezde 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 gnrerlexposant. Les prcisent le renvoi suivre. Enfin, les dfinissentle marqueur qui permettra au lecteur dereprendre 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 car nous avons besoin que le lecteurcommence la note au dbut du paragraphe.

    DivNous venons de voir que la balise

    sapplique des lmentstextuels. Si vous souhaitez pouvoirappliquer des CSS des blocs de texte etnon des lments disparates, vous aurezbesoin de la balise (divpour division en anglais). Lutilisation decette balise indique au navigateur deconsidrer lensemble du texte inclus danscette balise comme un gros bloc sur lequelagir.

    Nous verrons au chapitre CSS

  • comment lutiliser conjointement avec lesfeuilles de style.

  • Retour au Sommaire

    Les CSS

    Nous abordons prsent la manire deraliser des feuilles de style en cascade etde les appliquer aux pages xhtml de votreePub. Pour cela, nous allons procder enplusieurs temps. Tout dabord, nous vousindiquerons lendroit o mettre votrefeuille de style ainsi que le moyen dyfaire appel depuis vos pages xhtml. Nousaborderons ensuite la manire dont seprsente un style CSS avant de dtaillerles proprits les plus souvent utilises

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

    Comme souvent, il ny a rien devraiment sorcier dans les outils matriser, il suffit juste dun peu delogique et dorganisation.

  • Retour au Sommaire

    O se cachent lesfeuilles de style etles styles

    Quelques dfinitionsTout dabord, prcisons la diffrenceentre les styles et les feuilles de style.

    Un style est un ensemble de paramtresgraphiques (espacement, police, taille dutexte) qui sapplique une partie

  • donne du texte ou de limage.Une feuille de style est pour sa part le

    fichier dans lequel sont enregistrs tousles styles. Vous navez donc pas besoindune feuille de style par style. Nous vousrecommandons, pour des raisons desimplicit, de navoir quune seule feuillede style dans votre ePub.

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

    trouve dans le dossier Styles de lePub.Nanmoins, il faut savoir que les feuillesde style sont une coquetterie de

  • prsentation et ne sont nullementncessaires au bon fonctionnement delePub. Si aucun style nest dfini, lelogiciel utilise sa mise en page par dfaut,tout simplement. Donc, si vous ouvrez unePub que vous avez tlcharg, ne voustonnez pas si vous ne trouvez aucunefeuille de style.

    Insrer une feuille de style vierge dansvotre ePub est trs facile. Nous allonsvoir comment procder avec Sigil.

    1. Slectionnez le dossier Style.2. Faites un clic droit et slectionnez

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

    apparat. Vous pouvez si besoin lerenommer. Dans ce cas, nutilisezpas daccents et noubliez pas de

  • conserver lextension de fin .css.

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

    Indiquer Sigil quilfaut utiliser la feuillede styleMaintenant que vous avez cr votre

    feuille de style, il est ncessaire que Sigilsache quil doit lutiliser et pour quelles

  • pages. Pour cela, vous devez insrer unlien dans chaque fichier xhtml o voussouhaitez utiliser les CSS. Nous vousconseillons dinsrer ce lien dans tous vosfichiers xhtml, pour que votre ePub soithomogne en termes de mise en forme.

    Rappel : Ce lien peut treautomatiquement intgr dans vos pagesxhtml si vous utilisez le saut de chapitrepour insrer des pages (voir Insrer despages). Pour chaque page ainsi cre,vous devrez cependant nettoyer la balisebody, en remplaant par. Faute de quoi le lien vers votrefeuille de style ne sappliquera pas.

    Le lien se met dans le bloc en-tte devotre page xhtml, i.e. la partie du fichierqui commence par et se termine

  • par . Nous vous conseillons demettre le lien directement la suite desbalises .

    Le lien prendra la forme suivante :

    O XXX.css est le nom de votre feuillede style CSS. Si vous navez pas renommvotre feuille de style, le texte insrersera donc :

  • linstar des images, le texte../Styles/Style0001.css prcise lechemin suivre pour le logiciel, depuis lefichier xhtml jusqu la feuille de style.Les .. indiquent quil faut remonter dundossier dans larborescence (i.e. passerdu dossier Texte o se trouve le xhtml audossier racine) puis se rendre dans ledossier Styles pour y trouver la feuille destyle.

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

    Point important : les liens au sein delePub sont particulirement sensibles lusage des majuscules et des minusculesdans les noms de fichier. Si votre feuille

  • de style se nomme STYLE.css et que vousfaites appel, dans le lien, au fichierstyle.css, le logiciel ne trouvera pas lafeuille correspondante et Sigil renverraune erreur lors de la vrification. Veillezdonc bien respecter lusage desmajuscules et des minuscules. Pour unemeilleure facilit, nous vous conseillons,soit de tout mettre en minuscules(styles.css), soit de ne mettre la majusculequau premier caractre du nom de votrefichier (Styles.css).

    Rappel : Les noms de fichier et le textedes CSS ne doivent pas utiliser de lettreaccentue. Les accents sont autorissuniquement dans le texte de vos pagesxhtml.

  • ExempleVous avez un fichier ePub constitu de

    quatre pages xhtml, respectivementintitules couverture.xhtml,chapitre1.xhtml, chapitre2.xhtml etchapitre3.xhtml. Vous disposez dunefeuille de styles intitule StyleePub.css,qui se trouve dans le dossier Styles delePub.

    Les blocs en-tte des quatre pagesxhtml 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 foisrigoureusement le mme, vu que vousvous rfrerez chaque fois la mmefeuille. Nous lavons indiqu ici par soucidexhaustivit, pour que vous compreniezbien la ncessit de dclarer la feuille destyle dans toutes les pages de votre ePub.

  • Remarque : Gnralement, les balises et encadrent le titre de lapage html qui apparat au sommet de lapage lors de la lecture. Nous ne lavonspas indiqu ici pour ne pas surcharger lecode de lexemple. Nanmoins, vouspourriez tout fait avoirCouverture, Chapitre1, Chapitre 2 et

  • Chapitre 3

  • Retour au Sommaire

    La syntaxe CSS

    La structure desfeuilles CSS

    la diffrence des pages xhtml de votreePub, vous navez pas besoin de prcisertout un tas dlments au dbut de votrepage CSS. Le simple fait que le nom dufichier se termine par .css indique aulogiciel de quoi il sagit. Votre feuille destyle CSS sera donc une simple liste des

  • styles CSS utiliss et de leurs paramtres.

    Les classesNous avons vu que les principales

    balises lies au texte sont les titres (h1,h2, h3), le paragraphe (p) et la baliseneutre . Seulement, votre texterisque fort davoir des mises en formesupplmentaires, comme les appels denote, les notes de bas de page, les textesen exposant (1er, 2e, 3e), etc. Il peutmme y avoir des paragraphes o voussouhaitez appliquer un style autre quecelui normalement dfini pour lesparagraphes.

    Pour tous ces lments, on ne passe pas

  • par des balises mais par ce que lonappelle des classes. Une classe est unecatgorie pour laquelle vous dfinissez unstyle particulier. Vous pourrez donc avoirune classe notedebasdepage, une classeappeldenote, une classe signature, etc. Cesclasses peuvent, au choix, sappliquer toutes les balises ou un type prcis debalises.

    Faire appel une classe estrelativement simple : il suffit de leprciser dans la balise ouvranteconcerne en ajoutant class="XXX" oXXX est le nom que vous aurez attribu votre classe. Notez la syntaxe anglaise :class scrit sans le e en html. Et, commedhabitude, rappelez-vous de nutiliser nilettres accentues, ni caractres spciaux

  • dans vos noms de classes sous peine deproblme daffichage.

    ExempleVous disposez de remerciements que

    vous souhaitez mettre la fin de votretexte. Au sein de votre feuille de style,vous avez dfini une classeremerciements avec la mise en formeadquate (nous verrons comment un peuplus loin) et souhaitez lappliquer. Votreparagraphe aura alors la forme suivante :

  • La syntaxe CSSAu sein dune feuille CSS basique, un

    style CSS peut se prsenter de troismanires :

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

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

    Le deuxime sapplique aux classes etle XXX est remplac par le nom de laclasse prcd dun point.

    Le troisime sapplique aux classeslies une balise spcifique. AAA estremplac 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 dela proprit (espace de 2 points, couleurrouge, taille de 12 points, alignementjustifi). Pour cette dernire,lorsquelle est chiffre, il importe deprciser quelle unit utiliser (le point, lepixel, le pourcentage). Nousdtaillerons plus loin ces units.

    Lorsque vous tapez vos CSS, faitesbien attention la prsence de laponctuation : le point en dbut sil sagitdune classe, les accolades pour ouvrir etfermer les proprits du style, et le pointvirgule la fin de chaque proprit (ilnest pas obligatoire sur la dernire ligne

  • mais cela vitera des oublis fcheux !).

    ExempleNous souhaitons que tous les

    paragraphes soient justifis (i.e. aligns gauche et droite) et, en parallle, quecertains textes aient une taille decaractres un peu plus grande. Nousallons donc dfinir deux styles diffrents.Le premier sappliquera aux paragrapheset le second sera une classe qui nesappliquera que si on fait appel elle.Nous appellerons cette classe big. Laproprit pour le texte justifi est text-align et celle pour la taille de la police estfont-size. Les deux CSS auront donc laforme suivante :

  • Et le code de votre texte se prsenteracomme suit :

  • Ce qui, en version graphique, donnerala chose suivante :

    Ceci est un paragraphe

    qui, en plus du style p,utilise le style dfini par laclass big. Remarque : Vous pouvez attribuer

    plusieurs class en mme temps unebalise. Il suffit juste de les sparer par unespace. Par exemple, vous pourriez tout fait avoir un osappliqueraient la fois la class big et laclass textegras. Si jamais il y a desconflits entre les class, cest la dernirequi a prsance.

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

    Remarque : Les CSS tant des feuillesde style en cascade, elles dpendent lesunes des autres. Pour le style p.big, laclasse big dcoule du style p. Vous navezdonc pas besoin de reprciser toute lamise en forme du style p. En prcisantp.big, la CSS sait quelle doit appliquerdabord les styles du paragraphe puisceux de la classe. Comme pour ci-dessus,si jamais il y a des informations

  • contradictoires, cest la dernire indiquequi a prsance (big dans le cadre denotre exemple).

    Les CSS enrichiesLexemple ci-dessus est relativement

    simple car chaque style nutilise quuneproprit. Nanmoins, tout lintrt desCSS est de pouvoir combiner cesdernires en fonction de ses besoins. Pourcela, il suffit simplement de mettre lesproprits CSS et leurs valeurs les unes la suite des autres, spares par le pointvirgule. noter que vous pouvez tout fait, pour plus de lisibilit, insrer dessauts de ligne et/ou des espaces aprs

  • chaque point virgule. Les espaces et sautsde ligne nont en effet pas grandesignification en CSS, les lments les plusimportants tant les accolades, les pointsvirgules et le point pour la classe.

    ExempleNous souhaitons dsormais que notre

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

    Ou, si vous prfrez :

  • Les units de mesureNous avons vu plus haut quune

    proprit CSS tait suivie dune valeuraprs ses :. Avant de dtailler lesproprits les plus communes, il est utilede prciser quelles mesures peuvent treutilises et comment bien les employer.

    Les valeurs absoluesIl existe deux grands types de valeurs :

  • les absolues et les relatives. Les valeursabsolues ne changent pas quel que soit lesupport utilis. Par exemple, si vousdfinissez quune image fait 300 pixels delarge, elle fera toujours 300 pixels delarge, que ce soit sur un smartphone, uneliseuse, une tablette ou un crandordinateur. Dans ce cas-l, il y a deschances que limage soit trop grande surun smartphone et trop petite sur un crandordinateur. Cela ne signifie cependantpas que vous ne devez utiliser aucunevaleur absolue, simplement quil fautgarder en tte cette contrainte.

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

  • prcise combien de points de lcranutiliser. Par exemple, si votre crandordinateur a une rsolution de 1024 x768 pixels, cela signifie que, si vousdemandez votre image de faire 2000pixels de long, elle dbordera sur ladroite de lcran.

    Le point dfinit quant lui la hauteurde la police que vous utilisez(thoriquement, un point correspond 1/72e de pouce soit 0,352 mm) et sutilisedonc pour le texte. Si vous tes habitu autraitement de texte, vous utilisez dj lepoint comme unit de mesure pour la taillede votre police.

    Les valeurs relatives

  • linverse des valeurs absolues, lesvaleurs relatives sont dfinies par rapport dautres. Par exemple, elles prennent encompte la taille de lcran ou la hauteurde la ligne. Elles permettent donc desadapter aux diffrents supports surlesquels apparatra le fichier, afindobtenir un affichage harmonieux. Ilexiste deux grands types dunitsrelatives : le % et le em.

    Le % est, comme son nom lindique, unpourcentage. Par dfaut, 100 %correspond la valeur maximale de laproprit, gnralement dfinie parlcran. Ainsi, une hauteur de 100 %correspondra la hauteur de votre cran,une largeur de 100 % la largeur delcran et ainsi de suite. Si vous demandez

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

    La taille des polices En matire de dimension, on peut

    utiliser plusieurs units de mesure : lepoint (pt), le nombre de pixels (px) et lalargeur de m (em). Ce em (diffrent du emutilis pour litalique) correspond lalargeur de la lettre m dans la police decaractre utilise et sa taille par dfaut estde 1em. La largeur de la lettre m sert icide rfrence pour talonner la totalit devotre document, et permet dutiliser votrepolice de caractre sa taille naturelle.

    Ainsi, mme sil est en gnral admisquune police de caractre standardprsente un corps dune taille de 12px, il

  • est recommand dutiliser la mesure debase en em, savoir 1em. Comme lamesure en em est proportionnelle,contrairement aux mesures en pt et en px,le lecteur pourra ainsi modifier la tailledu texte de manire proportionnelle.

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

  • Ces diffrences entre notations detaille peuvent paratre insignifiantes maiselle sont en ralit extrmementimportantes. En effet, en fonction desappareils de lecture, de la taille de leurcran et de leur rsolution, avoir une taillede caractre bloque empchera le lecteurde rgler la taille du texte comme illentend, le privant ainsi dune expriencede lecture optimale.

    Cest pourquoi nous vous conseillons,pour le texte courant , dutiliser lataille 1em, et dadapter ensuite vos titreset autres sections en fonction de cette

  • taille de rfrence, laide demproportionnels. Vous pouvez galementutiliser le pourcentage % commerfrence typographique. Dans ce cas, laCSS pour sera : p {font-size :100% ;}

    Une dernire remarque concernant lesunits absolues et relatives : vous verrezque certaines proprits CSS demanderontplusieurs valeurs. Dans ce cas-l, vitezde mlanger valeurs absolues et valeursrelatives, ou mme des units diffrentes.Cela complexifie le travaildinterprtation du logiciel et peut crerdes confusions.

  • Retour au Sommaire

    Les proprits CSSBien, maintenant que nous avonsdbroussaill la manire dutiliser lesCSS, abordons les diffrentes propritspossibles.

    Les balises auxquellesappliquer les feuillesde style

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

    BodyAu sein de cette classe, vous

    prciserez la mise en forme que voussouhaitez appliquer lensemble dudocument. Cette mise en forme sera eneffet utilise pour tous les lments quifigurent entre les balises et de votre page xhtml, soit toutvotre texte.

    Gnralement, les styles bodyprcisent les marges extrieures (pourviter que le texte colle au bord de

  • lcran) et, plus rarement, les retraits depremire ligne, la taille de la police ouencore la police utiliser.

    Cependant, il faut malheureusementrappeler que les liseuses ninterprtentpas les instructions de la mme faon. LesKobo par exemple (dont la Kobo by Fnac)ne prennent ainsi pas compte desproprits prcises dans body. Donc,mme si cest laborieux et moins pertinenten termes darchitecture CSS, nous vousconseillons de ne pas utiliser de stylespour cette balise mais de dtaillerdavantage les styles des autres proprits(les paragraphes et les titres,principalement). Ainsi, mme si celasemble redondant, il vaut mieux rappelerles marges pour les et les ,

  • , pour tre sr quellesseront prises en compte correctement surtous les supports.

    pVous prciserez dans cette classe tout

    ce que vous souhaitez appliquer unparagraphe lambda de votre texte : tailledu texte, italique, gras, retrait de premireligne, justification

    Gardez juste lesprit que, commenous sommes en CSS, les styles de lobjetbody sappliquent dj donc vous navezpas besoin de les remettre, moins devouloir spcifiquement les modifier.

  • h1, h2, h3Ici, vous mentionnerez la mise en

    forme spcifique chaque titre (taille,graisse, italique, majuscules, espacesavant, espaces aprs, etc.). L encore, pasbesoin de remettre les styles de lobjetbody.

    Lorsque vous tablissez vos mises enformes pour vos styles, ne perdez pas devue quils donnent une dimensionlgrement graphique votre fichier doncsoignez-les. Vrifiez notamment leurrendu dans la page, en faisant se succderdes titres de diffrents niveaux et desparagraphes.

    sup

  • Comme indiqu plus haut, cette baliseest utilise pour mettre le texte enexposant (comme dans 2e, 3e, etc.). Leproblme avec cette balise est que,utilise telle quelle en html, elle secontente de relever les lettres indiques,sans les rduire. Du coup, vous avez ausein de votre paragraphe un espace blancdisgracieux au-dessus de votre ligne carle logiciel laisse la place pour la lettresurleve.

    Pour viter cet impair, nous vousconseillons de dfinir votre balise supcomme suit :

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

    DivComme indiqu plus haut, div est une

    manire dorganiser les lments de votretexte en en groupant certains au sein dunbloc. Vous pouvez donc tout faitappliquer une mise en forme vos blocs.

    Les div sont particulirement utilespour les images car, correctementparamtrs, ils permettent de centrer lesimages dans la page.

  • Les proprits CSS demise en pageNous allons dans un premier temps

    aborder les proprits CSS qui nesappliquent pas au texte proprement ditmais qui permettent de dfinir votre miseen page de faon harmonieuse.

    Les margesPour viter que votre texte ne colle

    lcran, vous aurez dfinir des marges.Ces dernires nont pas forcment besoindtre grandes mais elles doivent existerpour faire respirer la lecture. Il ny a riende pire quun texte qui court dun bout

  • lautre de lcran, sans laisser despacevide o lil puisse se reposer.

    Il existe quatre proprits CSS pourdfinir les marges : marge gauche(margin-left), marge droite (margin-right),marge suprieure (margin-top) et margeinfrieure (margin-bottom). Vous pouveztout fait ne pas attribuer les mmesvaleurs vos marges, en fonction du rendusouhait.

    Signalons enfin quil existe uneproprit regroupant les quatre propritsci-dessus : margin. Vous y indiquez vosvaleurs de margin dans lordre suivant :haut, droite, bas, gauche ; chaque valeurtant spare des autres par un espace.

    Remarque : Vous pouvez tout faitdfinir un margin pour le body et un

  • margin pour les paragraphes. Dans ce cas-l, les deux mises en formes se cumulerontpour les paragraphes. Cela est notammentutile si vous voulez faire respirer vosparagraphes : insrer de lgers margin-topet margin-bottom, qui spareront chaqueparagraphe pour mieux les mettre envaleur.

    ExempleVous souhaitez que lensemble de

    votre texte dispose de marges rgulirestout autour de lcran. Vous ne voulez pasque ces marges soient trop importantes,sans pour autant nuire la lecture. Un boncompromis est une marge situe entre 3 et5 % de la taille de lcran et vous optezdans un premier temps pour une marge de3 % en haut et en bas, et de 5 % gauche

  • et droite.Comme vous souhaitez que cette marge

    concerne lensemble du document, lemieux est de le prciser pour le style de labalise body. Le code CSS sera donc lesuivant :

    Ou bien

  • En outre, en plus de ces marges quisappliquent tout le document, voussouhaitez que chaque paragraphe disposedun lger espace au-dessus de lui(0.2em) et en-dessous (0.5em). Votrecode CSS sera alors :

    Les interlignesIl peut aussi arriver que, pour des

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

  • dun espace blanc entre chaque ligne quipourra faire respirer votre texte.

    La proprit pour dfinir votreinterligne est line-height.

    ExempleReprenons notre style de paragraphe.

    En plus des marges en dbut et en fin deparagraphe, vous vous dites quun lgerinterligne pourrait tre une bonne chose. Ilnest pas ncessaire que celui-ci soitlev aussi vous dcidez-vous pour uninterligne de 1.05em. Cela signifie quevotre texte prendra 1em de hauteur maisquil y aura un blanc de 0.05em en pluspour chaque ligne. Le code pour vosparagraphes sera le suivant :

  • Remarque : Si vous jouez avec lesinterlignes, assurez-vous que votre line-height soit suprieur ou gal votre taillede police. Sans quoi en fonction de votrepolice de caractres, vos lignes de texterisqueront de se chevaucher les unes avecles autres.

    Les sauts de pageSur certains textes mal maquetts, il

    peut arriver quun titre se retrouve en bas

  • de page tout seul, sans texte courant pourle suivre. Cela donne une impressionbizarre car le lecteur a le sentiment que letitre en question aurait d apparatre surlcran suivant pour faire bloc avec sontexte. Pour viter ce genre dedsagrment, il faut donc lier les deuxblocs texte (ici le titre et son paragraphequi le suit) pour quils ne soient passpars.

    Pour cela, vous aurez besoin desproprits CSS page-break-before (sautde page avant) et page-break-after (sautde page aprs). Les valeurs de ces deuxproprits sont les suivantes :

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

  • blocs seront spars.always indique de toujours insrerun saut de page. On utilise parexemple cette valeur si on veutquun titre dbute toujours sur unnouvel cran.auto laisse le navigateur afficher lapage comme il lentend, sanscontraintes particulires. Cettevaleur est peu utilise.inherit applique au saut de pageles mmes paramtres que lafeuille de style parente dont elledcoule (gnralement body, p ouh). Cette valeur est peu utilise.

    Comme on le voit, ce sont surtout lesvaleurs avoid et always qui serontutilises pour grer les sauts de pages.

  • Remarque : Les titres qui sont audbut dune nouvelle page htmlcommencent par dfaut sur un nouvelcran. Vous ntes donc pas oblig decrer un style rien que pour eux pour grerles sauts de page.

    ExempleVous souhaitez que votre titre de

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

    Lalignement de votretexte

  • Note : Les deux proprits qui suivent(text-align et text-indent) sappliquent des lments de votre texte mais, commeleur utilisation rsulte principalement dela mise en page, nous avons prfr lesmentionner dans cette partie.

    Un texte peut se prsenter dediffrentes formes au sein dune page. Ilpeut tre align gauche (le mode pardfaut des traitements de texte), align droite (comme pour une signature), centrou justifi (i.e. que votre texte remplitharmonieusement lespace en une sorte degros rectangle). Tous ces lments dejustification peuvent tre dfinis en CSS.

    On utilise pour cela la proprit text-align, en lui prcisant la valeur que lonsouhaite (left pour un alignement gauche,

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

    Remarque : Il est prfrable de dfinirlalignement pour les diffrentes balisesde votre texte, en particulier les titres. Eneffet, mme si on peut considrer quuntitre, par nature court, sera align gauchemme si le texte est justifi, lexprienceprouve que le rsultat peut tredsastreux, en particulier sur les petitscrans. Donc, mme si cela vous sembleinutile, dfinissez bien un text-align:leftpour vos titres.

    ExempleReprenons le cas de notre corps de

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

  • justifi. Le code sera alors le suivant :

    Les retraits de premireligne

    En littrature notamment, chaqueparagraphe commence par un alina, i.e.une premire ligne lgrement en retraitdu reste du texte. En typographie, onappelle cela une indentation et si voussouhaitez appliquer une telle indentation,vous devrez utiliser la proprit text-indent.

  • ExempleReprenons notre style de paragraphe

    dfini plus haut. En plus des marges endbut et en fin de paragraphe et delinterligne, vous souhaitez un retrait depremire ligne quivalant une lettre. Lecode sera alors le suivant :

    Les proprits CSS

  • appliquer au texte

    La taille de textePour dfinir la taille de votre police,

    vous utiliserez la proprit font-size. Pourrappel, il vaut mieux dfinir la taille pardfaut de vos paragraphes avec une valeurde 1em et dfinir les valeurs des autresstyles en fonction de celle-ci.

    ExempleSachant que vos paragraphes auront

    une taille de 1em, vous dcidez de dfinirles styles de vos titres de niveau 1. Aprsplusieurs essais, vous estimez quunetaille de 1.7em serait une bonne chose etquil faudrait que le texte soit centr. Le

  • code sera alors le suivant :

    Remarque : Nous prcisons uneindentation de 0em (text-indent) pour lecas o les styles prcdents (commebody) aient prvu une indentation pardfaut.

    LitaliqueSi vous dsirez utiliser litalique (ou

  • indiquer au CSS que vous ne voulez PASditalique), il vous faudra utiliser laproprit font-style. Cette dernire a deuxvaleurs : normal (i.e. non italique) etitalic.

    ExempleVous dsirez que votre titre de niveau

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

  • Remarque : Si vous utilisez une policepar dfaut (i.e. vous nincorporez pas depolice votre ePub), vous navez pasbesoin de dfinir un style uniquement pourlitalique. Si vous utilisez des policesspcifiques (cf. plus bas sur la manire deprocder), il vous faudra crer le style i{font-style:italic;}.

    Le grasDe la mme manire que pour

    litalique, la proprit font-weightdterminera la graisse de votre texte. Cedernier sera soit normal (si vous nevoulez PAS de gras) soit bold (gras).

    Exemple

  • Pour donner encore plus dimpact votre titre, vous souhaitez quen plus delitalique, 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 stylepour le gras si vous nincorporez pas depolices votre ePub. Dans le cascontraire, vous devrez dfinir le style b

  • {font-weight:bold;}.

    Grer les majuscules etles minuscules

    Vous pourrez vouloir, indpendammentde la saisie de votre texte, lui appliquerune mise en forme particulire au niveaudes majuscules. Peut-tre voulez-vous quevotre titre soit totalement en majuscules,ou que la premire lettre de chaque motsoit en majuscules. Dans ce cas-l, laproprit utiliser est text-transform.

    Cette proprit peut prendre quatrevaleurs :

    uppercase, qui met tout le texte enmajuscules

  • capitalize, qui met une majusculeau dbut de chaque mot (le rsultatest en gnral assez disgracieuxmais sachez que cette optionexiste)lowercase, qui met tout enminusculesnone, qui indique juste de ne rienchanger au texte

    ExempleFinalement, vous dcidez que votre

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

  • Remarque : La proprit text-transform tant assez particulire, ellenest pas comprise par tous les moteurs delecture. Ne vous tonnez donc pas si ellene fonctionne pas sur votre liseuse, mmesi iBooks laffiche correctement. Le plussimple est encore dcrire directementvotre titre en majuscules.

    Les petites capitales

  • En plus des majuscules et desminuscules, il existe ce que lon appelledes petites capitales. Elles ont la formedes lettres majuscules mais la hauteur deslettres minuscules. On sen sertrelativement peu mais il faut savoir que,typographiquement parlant, les noms desicles se composent en petitesmajuscules. Il est donc toujours utile deprvoir son utilisation, en particulier sivous utilisez les noms de sicles.

    Si vous souhaitez utiliser ce genre demise en forme, vous devrez recourir laproprit font-variant. Cette propritvous permet dutiliser la variante Smallcaps dune police, si cette variante existeau sein de la police. Si cette variante

  • Small caps nexiste pas dans la police, laproprit sera la plupart du temps ignoresur les supports de lecture.

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

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

    ExempleVous avez d