SIGIL
Sigil est un éditeur d'eBook open source offrant notamment un panneau WYSIWYG (qui signifie « What You See Is What You Get »)
Dans l'interface livre on retrouve les fonctions de bases des programmes d'édition de texte
De nos jours, Sigil peut importer des fichiers formatés sous les formats TXT, HTML et EPUB et exporter des fichiers sous EPUB et SGF.
Exemple : Le petit Chaperon rouge - sous Sigil
Mode code et mode livre
L'affichage livre permet 'avoir un aperçu du rendu du livre avec les éléments de mise en forme d'un éditeur de texte.
L'affichage code permet de modifier la mise en forme de l'affichage. Il est conseillé de vérifier le rendu en mode livre. Ce mode est basé sur une écriture html
Importation du texte⚓
Deux possibilités :
soit écrire directement le texte sur une page Xhtml ouverte par défaut dans Sigil : ce type de méthode n'est pas très confortable et nécessite que Sigil soit installé sur les postes des élèves pour écrire leur texte
soit l'importer (par copier coller) depuis un éditeur de texte : cette deuxième méthode offre l'avantage d'utiliser le logiciel de traitement texte qui nous est familier ; cependant il faudra supprimer tous les éléments de mise en forme avant de le copier coller sur Sigil
Deux étapes à suivre :
1. Déformater le texte dans le traitement de texte⚓
Méthode : Sous libre office writter (ou open office)
1. sélectionner le texte à formater
2. Puis dans Format / effacer le formatage direct
Méthode : Sous Word
1. sélectionner le texte à formater
2. effacer la mise en forme
Coller le texte dans Sigil⚓
Méthode :
1. ouvrir Sigil : par défaut, Sigil ouvre une page xhtml
2. coller tout le texte sur cette page (le découpage se fera dans un second temps
Découpage du texte dans Sigil⚓
Une fois le texte importé sur une page xhtml dans Sigil, il va falloir découper les chapitres, en créant une page par chapitre.
Méthode :
1. Placer le curseur de la souris avant le chapitre à découper
2. Découper la la page avec l'outil "scinder à partir du curseur" 
3. Sigil crée alors une nouvelle page pour la partie découpée après le curseur (ici le chapitre 2)
4. Recommencer l'opération autant de fois que nécessaire en fonction du nombre de chapitres de l'ouvrage : une page par chapitre
5. Renommer chaque page avec un titre plus explicite.
Mise en forme du texte⚓
Mise en forme classique du texte
Pour la mise en forme classique du texte (gras, italique, insertion image, etc..) on utilise la barre d'outils que l'on retrouve dans n'importe quel éditeur de texte :
Mise en forme prédéfinie
La mise en forme prédéfinie consiste à appliquer un style automatique et hiérarchisé aux éléments de titres, liens ou paragraphe, selon le choix éditorial. Les boutons h1 à h6 permettent d'appliquer six niveaux de mise en forme de titre et une mise en forme de paragraphe avec le bouton "p"
L’intérêt d'utiliser les styles prédéfinis plutôt que la mise en forme directe est double :
D'une part, ce découpage hiérarchisé va permettre de générer la table des matières en fonction du niveau de titre (on choisira alors le niveau de précision de la table des matières : justes les titres 1 "h1" ou jusqu'aux titres 3 "h3" par exemple)
D'autre part, l'utilisation des styles permet de modifier l'ensemble les éléments de mise en forme en même temps et non l'un après l'autre, ce qui est un gain de temps et d’efficacité considérable. Cela permet également d'éviter les risques d'erreur ou d'oubli de mise en forme, lorsque l'ouvrage comporte plusieurs centaines de pages.
Méthode : Appliquer la mise en forme prédéfinie
Sélectionner le texte sur lequel va s'appliquer la mise en forme
Cliquer sur le niveau de mise en forme choisi
Feuilles de style CSS⚓
Nous avons vu que les boutons h1 à h6 et P permettent d'appliquer un style par défaut dans Sigil. Or ce style est personnalisable en important une feuille de style CSS.
Dans une feuille de style CSS chaque élément de mise en forme est décrit et balisé avec des caractéristiques propres : taille de la police de caractère, couleur, gras, etc..
Ici par exemple on constate que les éléments de titre 1 (h1) auront une taille de 200% par rapport au texte du paragraphe, seront de couleur bleu marine (navy) et que le titre sera centré au milieu de la page (text-align: center)
Exemple :
html, body {margin: 0;
padding: 0;}
body {background-color: white;
font-family: Verdana, sans-serif;
font-size: 100%;
}
h1 {
font-size: 200%;
color: navy;
text-align: center;
}
h2 {
font-size: 150%;
color: red;
padding-left: 15px;
}
p,ul,li,td {
color: black;
}
a:link {
color: green;
text-decoration: underline;
}
Créer une feuille de style CSS⚓
Méthode :
1. ouvrir l'outil bloc note de votre ordinateur 
2. écrire le code css ou copier/coller depuis un modèle récupéré sur internet
3. Modifier les éléments de mise en forme pour h1, h2, P etc..(ces éléments seront toujours à nouveau modifiables dans Sigil)
4. Enregistrer sous : nom-de-ma-feuille-de-style.css
Attention de bien rajouter l’extension .css à la place de .txt (par défaut)
Complément : Pour aller plus loin
Importer une feuille de style CSS dans Sigil⚓
La feuille de style s'ajoute de la même manière qu'un média, image, vidéo ou audio avec le bouton d'ajout de fichiers.
Sigil ouvre l'explorateur
Sélectionner la feuille de style
La feuille va alors se stocker dans le dossier styles dans Sigil
Associer une feuille de style à une page⚓
Une fois la feuille de style chargée dans Sigil, il va falloir associer une page xhtml à une feuille de style pour que la mise en forme s'applique à la page :
Faire un clic droit sur la page (dans le dossier Text)
Associer la ou les feuilles de styles avec le fichier xhtml
Sélectionner la feuille à associer
Complément : modification de la feuille de style
Il est possible à tout moment d'ouvrir la feuille de style dans Sigil et d'y apporter des modifications.
Ces modifications seront alors automatiquement reportées dans la mise en forme des pages xhtml associées.
Il est possible de créer plusieurs feuilles de style et d'associer des feuilles de style à différentes pages :
exemple :
page Préface associée à la feuille de style numéro 1
pages chapitres associées à la feuille de style Numéro 2
Mise en forme du livre (couverture, page de titre, etc..)⚓
Ajouter une couverture
Caractériser une page
Il est possible avec Sigil de créer des pages spéciales :
page de titre, préface, index, etc...
Faire un clic droit sur la page xhtml (dans le dossier Text)
Add Semantics...
3. sélectionner le type de page souhaité
Édition des métadonnées⚓
1. outils / éditeur de métadonnées
2. Rajouter des métadonnées : add metadata
3. Sélectionner les métadonnées à rajouter : auteur, licence, etc...
édition d'une table des matières⚓
Dans les outils / tables des matières : plusieurs fonctions possibles
Générer table des matières
Cette fonction permet de générer la table des matières à partir des niveaux de Titre. Il est possible de choisir le niveau de précision de la table en sélectionnant les titres de niveau h1 à h6.
On peut également choisir de ne pas faire apparaître certaines pages dans la table en les décochant
Éditer la table des matières
Cette fonction permet de réorganiser l'ordre des pages en les déplaçant dans la structure du livre et redéfinissant la cible.
Créer une table des matières HTML
Cette fonction va permettre de rajouter une page html indépendante dans le livre qui sera la table des matières. Elle s'affichera dans le dossier Text sous le nom TOC.xhtml à coté des autres pages de chapitres, couverture, titre, etc...
Insertion et mise en page des images⚓
Pour insérer une image ou un autre média dans Sigil il est d'abord nécessaire de l'importer dans la bibliothèque (dossier image, dossier audio, dossier vidéo de la colonne de gauche)
Cliquer sur le bouton + pour importer des médias
Sigil ouvre l'explorateur du poste de travail
Sélectionner les fichiers media à importer,
les fichiers se logeront automatiquement dans les dossiers image, vidéo ou audio respectifs
Pour importer une image ou un autre média dans le corps de la page cliquer sur le bouton insérer un fichier
Sigil ouvre la bibliothèque média dans laquelle il n'y a plus qu'à sélectionner le fichier voulu
L'image vient alors se placer dans le corps de la page à l'endroit du curseur
Conseil :
L'image est importée dans ses dimensions originales. Ces dimensions se réadaptent ensuite à la taille de l'écran en mode lecture.
Cependant pour un meilleur confort de travail mieux vaut redimensionner l'image avant de l'importer dans Sigil afin d'avoir une meilleure vue d'ensemble de la page lors de la création et que l'image n'occupe pas toute la surface de travail.
Redimensionner et transformer l'image⚓
Il n'est pas possible de redimensionner l'image importée directement en affichage livre , comme cela serait le cas dans un éditeur de texte classique. Pour modifier la taille d'affichage de l'image il est nécessaire de passer en mode code
Méthode :
La ligne de code (en jaune) correspondant à l'image s'affiche de la façon suivante :
<img alt="children-1297291_1280" src="../Images/children-1297291_1280.png"/>
En gras : les éléments de balisage de l'image
En police normale : les éléments contextuels : "nom de l'image" et "cible + extension (en .png ou .jpg)"
Pour ajouter des paramètres de hauteur il faudra rajouter devant src, les données de hauteur height ou de largeur width en point par pixel (px) ou en pourcentage
Exemple : Modification de la largeur
<img alt="children-1297291_1280" width="500" src="../Images/children-1297291_1280.png"/>
Exemple : Modification de la hauteur
<img alt="children-1297291_1280" height="100" src="../Images/children-1297291_1280.png"/></div>
Attention : déformation de l'image
Si l'on renseigne dans le code les éléments de hauteur et de largeur, l'image risque d'être déformée
Exemple : <img alt="children-1297291_1280" height="300" width="600" src="../Images/children-1297291_1280.png"/>
Il est donc conseillé de ne rentrer que l'une des deux données afin de conserver les proportions.
Autrement dit, si seule la hauteur est modifiée , la largeur se réadaptera proportionnellement et vis versa.
Complément : Autres éléments de mise en forme
il est également possible de modifier d'autres aspects de l'image :
comme l'alignement de l'image à droite, au centre ou à gauche de l'écran : align="right"
comme l'opacité de l'image si l'on veut l'afficher en filigrane par exemple : style="opacity:0.2"
Exemple : opacité + alignement à droite
Code :
<img alt="children-1297291_1280" align="right" style="opacity:0.6" width="600" src="../Images/children-1297291_1280.png"/>
Aperçu :
Complément : cadre
ou encore rajouter un cadre : border="10"
BORDER-TOP-COLOR: #Mêttre code hexadécimal de la couleur de la bordure du haut
BORDER-LEFT-COLOR: #Mêttre la couleur de la bordure de gauche
BORDER-RIGHT-COLOR: #Mêttre la couleur de la bordure de droite
BORDER-BOTTOM-COLOR: #Mêttre la couleur de la bordure du bas
Exemple : appliquer un cadre de différentes couleurs à l'image précédente en filigrane
Code :
<img alt="children-1297291_1280" align="right" style="opacity:0.6; BORDER-TOP-COLOR: #01BBFE; BORDER-LEFT-COLOR: #FE0101; BORDER-RIGHT-COLOR: #20F334; BORDER-BOTTOM-COLOR: #000000;" border="10" width="600" src="../Images/children-1297291_1280.png"/>
Aperçu :
Pour connaître de code couleur html, voici un site très pratique qui permet de générer le code hexadécimal à partir de la couleur choisie visuellement
habiller l'image par du texte⚓
Habillage texte /image
Avec Sigil, il est possible d'habiller l'image par du texte
cela permet d'avoir un affichage plus dynamique : cependant la qualité d'affichage n'est pas toujours garantie selon le type d'écran
Méthode :
code : <div style="float: right; margin: 10px 10px 10px 10px;"><img align="right" alt="little-red-riding-hood-156953_1280" height="300" src="../Images/little-red-riding-hood-156953_1280.png"/></div>
aperçu :
éléments vidéo et audio⚓
Rappel :
Pour insérer un média dans Sigil il est d'abord nécessaire de l'importer dans la bibliothèque (dossier image, dossier audio, dossier vidéo de la colonne de gauche)
Cliquer sur le bouton + pour importer des médias
Sigil ouvre l'explorateur du poste de travail
Sélectionner les fichiers media à importer,
les fichiers se logeront automatiquement dans les dossiers image, vidéo ou audio respectifs
Pour importer un média dans le corps de la page cliquer sur le bouton insérer un fichier
Sigil ouvre la bibliothèque média dans laquelle il n'y a plus qu'à sélectionner le fichier voulu
Le média vient alors se placer dans le corps de la page à l'endroit du curseur
Attention : Affichage des éléments audio et vidéo dans l'espace de travail
Contrairement à l'image qui apparaît directement sur l'espace de travail lors de son insertion, lorsqu'on insert des éléments audio ou vidéo, ces éléments n'apparaissent pas en prévisualisation dans l'espace de travail alors qu'ils sont bien actifs en mode lecture
Espace de travail
Mode lecture
Redimensionner les éléments audio et video
Comme pour l'image il est possible de redimensionner les fichiers audio et vidéo en mode code (cf. ci dessus : Redimensionner et transformer l'image)
Exemple : vidéo à 60 % de la largeur
code : <video controls="controls" width="60%" src="../Video/CR_Part2.mp4"></video><br/>
Insertion des polices de caractère⚓
Attention : Préalable
seules les polices au format OTF sont supportées par Sigil. Si la police utilisée est au format TTF il est possible de la convertir en ligne sur https://convertio.co/fr/
1. Importer la police au format OTF dans sigil
Méthode : 2. Importer la polices dans la feuille de styles (CSS).
Pour que les polices soient actives, il est nécessaire de les déclarer dans une feuille de style
Ouvrir la feuille de style css dans sigil
1. En haut de la feuille de style avant tout autre élément, rajouter les éléments ci-dessous en indiquant le nom de la police et du fichier (à la place de ce qui est en gras)
@font-face {
font-family: "nom";
src: url('../Fonts/nomdufichier.otf');
font-weight: normal / bold;
font-style: normal / italic;
}
2. rajouter le nom de la police dans body :
exemple (en gras) :
body {
background-color: white;
font-family: Verdana, sans-serif, geek;
font-size: 100%;
}
3. Appliquer la police soit à tout le texte (p) soit à un élément de mise en forme (h3 par exemple ) :
h3 {
font-family: "geek";
font-size: 150%;
color: red;
padding-left: 15px;
}
Exemple : avec une police grecque que l'on décide de marquer avec h3
pour plus d'information :
http://jiminy.chapalpanoz.com/integrer-des-polices-dans-un-ebook/
Enfin associer la une page html à la feuille de style (clic droit sur la page : associer une feuille de style css)
Dans la page, marquer en h3 (dans cet exemple) les éléments que l'on souhaite voir apparaître en police grecque
Rappel :
Une fois la feuille de style chargée dans Sigil, il va falloir associer une page xhtml à une feuille de style pour que la mise en forme s'applique à la page :
Faire un clic droit sur la page (dans le dossier Text)
Associer la ou les feuilles de styles avec le fichier xhtml
Sélectionner la feuille à associer
Importer et éditer un epub réalisé sous bookcreator dans SIGIL⚓
Objectif
Le but est d'utiliser Sigil pour enrichir l'epub réalisé sous book-creator avec une table des matières consultable à tout moment en mode lecture (et non rattachée uniquement à une page en début ou fin de livre comme c'est le cas dans book creator), ainsi que d'ajouter des métadonnées à l'ebook (auteur, licence, etc...)
1. Ouvrir avec Sigil le fichier Epub réalisé sous book creator (après l'avoir téléchargé)
2. chapitrage
Pour générer la table des matière, il faut au préalable appliquer à chaque chapitre un niveau de titre h1
Ouvrir la page de début de chapitre
Sélectionner le titre
Appliquer le niveau de titre h1
Attention : Déplacement du titre
Au moment d'appliquer le niveau de titre h1 il est possible que le titre se déplace selon le type de police utilisée comme dans l'exemple ci-dessous :
Emplacement du titre au départ
Emplacement du titre après avoir appliqué h1 : le titre est descendu en se collant à l'image
Pour rectifier ce problème il faut passer en affichage code et modifier une partie de la ligne de code : line heigt : __px
Avant modification
après modification : valeur mise à zero
Il est également possible d'augmenter ou de réduire l'espace de marge d'en tête (en bleu sur l'image) : padding : 20px
Attention cependant à bien reporter cette modification sur toutes les pages pour garder une harmonie dans la présentation
3. Appliquer un format spécial aux pages de couverture, titre, préface etc...
Sélectionner votre page de couverture dans la colonne de gauche (dossier texte)
Clic droit
Add semantics
Choisir : couverture
Idem pour la page de titre :
pour la préface, etc...
4. Générer la table des matières
Maintenant que le livre est balisé il est alors possible
-> cf. méthode décrite précédemment
Avant d'éditer la table des matières, on peut choisir (ou pas) de supprimer une page table qui aurait été réalisée dans book creator, afin d'éviter les doublons
Compléments⚓
Tutoriel des fonctions de base
https://www.youtube.com/watch?v=TnjgsKeruiE
Dans cette vidéo :
Importer du texte à partir d'un éditeur de texte en le déformatant
créer des chapitres
importer une image
créer une couverture
créer une table des matières
Feuilles de styles et code html