Bonjour à tous et à toutes. Lors du dernier tuto Sigil, nous avons vu comment créer des chapitres. Dans ce nouveau tuto, nous allons apprendre à enrichir ces chapitres par des notes de bas de page. À la fin du dernier tuto, nous nous étions retrouvés avec un joli chapitre mis en forme. Reprenons-le :
Admettons que vous vouliez introduire une note de bas de page à ce chapitre qui renvoie au mot Salvacion pour signifier qu’il s’agit de la mère de Bucéphale.
Vous allez commencer par mettre un 1 entre crochets après le mot que vous souhaitez expliquer en bas de page, ici Salvacion.
Puis, vous allez prendre la vue code et y rechercher ce [1]. Vous l’encadrez alors par une balise a et une balise sup. La balise a permet d’insérer un lien. La balise sup permet de mettre ce qu’elle encadre en exposant.
Si la balise sup se suffit à elle-même, bien sûr, la balise a doit contenir le lien en question.
Ainsi, avant le [1], il faut noter :
<a href= »../Text/Chapitre1.xhtml#B_note1″ id= »T_note1″><sup>
Chapitre1.xhtml correspond au nom de votre feuille dans votre menu de gauche. Si vous devez créer plusieurs notes de bas de page sur un même chapitre, changez simplement le numéro à chaque fois (B_note2 […] T_note2, puis 3, etc.)
Après le [1], vous devez penser à fermer les balises :
</sup></a>
Vous avez à présent quelque chose comme ça :
Il vous faut maintenant créer une nouvelle classe. Pour cela, allez dans la feuille de style créée dans les précédents tutos et en bas de la page, créez la nouvelle classe comme suit :
.note_bdp {
border-top: 1px solid black;
padding-top: 0.5em;
margin-top: 3%;
text-indent: 20px;
text-align: justify;
}
Border-top permet de créer une ligne de démarcation entre la fin de votre chapitre et votre note de façon à bien la séparer.
Padding-top crée un espace entre votre note et cette ligne, margin-top entre cette ligne et la fin du chapitre.
Text-indent permet d’introduire un alinéa supplémentaire.
À présent, revenez à votre chapitre et reprenez la vue code. Tout à la fin de votre chapitre, avant la balise body de fermeture, ouvrez une nouvelle balise p enrichie de votre nouvelle classe, faites-la suivre d’un autre [1], n’oubliez pas votre note de bas de page et de finir en fermant toutes les balises ouvertes :
<p class= »note_bdp »><a href= »../Text/Chapitre1.xhtml#T_note1″ id= »B_note1″><sup>[1]</sup></a>Mère de Bucéphale.</p>
Vous obtenez ceci :
Passez votre souris sur les deux petits [1] et cliquez dessus. Si vous n’avez commis aucune erreur de saisie, ils renvoient l’un à l’autre.
Dans cet exemple, le chapitre est assez court et le mot Salvacion est vers la fin du chapitre. Mais lorsque le renvoie se fait à partir d’un mot en début de chapitre, c’est encore plus intéressant !
Article publié pour la première fois sur Overblog le 13 janvier 2020.
