Longtemps j'ai ajouté des notes avec des liens et des renvois en bas de page¹ qui ont tout des chocolats de Forest Gump : on ne sait jamais sur quoi on va tomber.

Ce n'était pas satisfaisant et j'ai, pas à pas, adopté d'autres solutions.

A savoir, à l'aide d'icônes et de textes cachés :

• Lien vers

  • une page du site pour la navigation en haut de page, dans les frises, dans les arbres

  • Lien externe signalé par une icône vers site documentaire, une carte en ligne, un site de généalogie ou tous les autres

• Citation interne

  • entre guillemets avec lien vers le document source  Je ne puis pas m’engager

  • dans un paragraphe

    Je ne puis pas m’engager, je viens de l’apprendre ce matin au recrutement. Les conscrits de la classe 14 doivent attendre qu’on les appelle.

    Et pour être complet, le texte cité peut renvoyer vers la page qui l'utilise.

• Citation externe

  • entre guillemets avec un lien vers la source On a beau tout rêver, tu dépasses le rêve

  • comme une note de bas de page² pour garder le savoir-faire

  • entre guillemets avec un texte caché pour la référence On a beau tout rêver, tu dépasses le rêve

  • dans un paragraphe avec sa référence

    On a beau tout rêver, tu dépasses le rêve.

• Notes de l'auteur

  • Parenthèse dans un texte caché

    J'ai aussi hésité à employer le mot aparté, mais qui est plutôt réservé à l'oral.

  • Disgression dans un texte caché.

    Disgression

    La disgression peut être rhétorique s'il s'agit d'accompagner un propos ou narrative dès que l'on s'éloigne du sujet principal.

  • Compléments

    Louise et Elie d’Aupias ont eu une fille Thérèse qui a épousé Pierre de Verthamon, elle est morte à 29 ans sans descendance.

Structure des références

Avant de détailler le contenu annoncé, nous devons traiter d’abord la question de la structuration des références.

Nos besoins sont assez limités, il s’agit principalement de présenter toutes les références de la même façon tout en se gardant une ouverture pour faire un jour du retraitement de ces références.

HTML offre bien pour cela un tag <cite> mais qui ne reste qu’un cadre général sans structuration.

Nous avons donc décidés de retenir quatre champs :

• auteur, au sens large, c’est à dire prénom nom, une liste de prénoms, noms, un nom d’organisation

• (date), une année, un jour précis, une plage temporelle

• document qu’il s’agisse d’un nom d’un livre, d’un registre paroissial, d’une revue

• via intermédiaire qu’il s’agisse des références de l’éditeur, des archives, d’une site spécialisé sous la forme d’un lien

Pour le coder à l’intérieur de notre HTML, nous avons choisi d’utiliser une structure XML qui soit affichable sans retraitement, ce qui nous a améné à :

• utiliser une version simplifiée du schéma XML CreativeWork publié par Schema.org

• ajouter les () autour de la date et le mot clé via pour introduire la source

• intégrer ces champs dans un tag <figcaption> comme proposé par Bootstrap

Ce qui va donner :

<blockquote class="citation">
   <p>Lorem ipsum dolor sit amet.</p>
   <figcaption class="blockquote-footer" itemprop="citation" itemscope="" itemtype="https://schema.org/citation">
       <span itemprop="author">Fédération historique du Languedoc méditerranéen et du Roussillon</span>
      (<span itemprop="temporal">1970</span>)
      <cite itemprop="name">Carcassonne et sa région</cite>
      via <cite class="source"><a href="https://books.google.fr/books?id=uqo-AAAAYAAJ" target="_blank" class="library">Google book</a></cite>
   </figcaption>
</blockquote>

Cette structure complexe n'est acceptable que parce que nous disposons dans Word d’un écran de saisie pour les références et qui fait au passage la validation du XML inséré.

Lien

Vers une page du site

Nous avons repris de Boostrap l’usage des classes, ici pour signaler le lien interne et obtenir la bonne mise en page. Mais, dans ce cas précis, il n’y a rien derrière cette classe.

<a class="internal" href="#">Page du site</a>
 
a {
   color: SteelBlue;
   text-decoration: none;
   }

Vers un site externe

<p><em>Lien externe</em> signalé par une icône vers <a class="library" href="#">site documentaire</a>,
une <a class="location" href="#">carte en ligne</a>,
un <a class="tree" href="#">site de généalogie</a>
ou <a class="external" href="#">tous les autres</a></p>

Citations interne

Citation entre guillemets

<p>L’été 14 offre à Prosper une possibilité d’évasion qu’il était même prêt à devancer :
  <q>
      <a id="g34B3B" href="../Tailleur/1914.htm#g15202" class="internal">Je ne puis pas m’engager, je viens de l’apprendre ce matin au recrutement.
      Les conscrits de la classe 14 doivent attendre qu’on les appelle. Quel dommage</a> !
   </q>
</p>

Dans Word, lors de l’insertion du lien, c’est le tag <q> qui est utilisé pour ajouter les guillemets et indiquer par-là qu’il s’agit d’une citation interne avec la class internal.

Renvoi vers la page qui utilise

Même si c’est un peu compliqué à mettre en place, il est intéressant que la cible du lien possède un identifiant HTML afin de l’afficher directement en milieu de l’écran. C'est le rôle de l'id.

Au passage, il a été ajouté une URL qui pointe en retour vers la page qui porte la citation, cette fois-ci signalée par une icône spécifique obtenue par le class internal :

<p class="text-center">Bien chers parents</p>
<p><a id="g15202" href="../Sommaire/Prosper14-18.htm#g34B3B" class="article">Je ne puis pas m’engager, je viens de l’apprendre ce matin au recrutement.
Les conscrits de la classe 14 doivent attendre qu’on les appelle. Quel dommage</a> !</p>

Citation dans un paragraphe

<blockquote class="citation">
   <p>Le soir du service de campagne, j’étais <em>patrouilleur</em>…</p>
   <figcaption class="blockquote-footer">
      <a id="gED106" class="internal" href="../Tailleur/1914.htm#g343E4"></a>
   </figcaption>
</blockquote>

Citation externe

Entre guillemets avec un lien vers la source

<q> <a class="library" href="https://fr.wikipedia.org/wiki/La Légende des siècles">On a beau tout rêver, tu dépasses le rêve</a> </q>

Note de bas de page

<p>Jugées obsolète, les notes de bas de page ne sont plus utilisées<footnote>Sauf pour
<a id="x1801" href="BertrixCaujolle.htm" class="internal">Bataille de Bertrix par Fernand Caujolle</a> qui se prêtait bien la conservation d’un exemple de tags
</footnote>.</p>

Entre guillemets et texte caché

<p>Marchand drapier, consul de Carcassonne en 1699. En juin 1688, Maître Christofle Charrière<collapse icon="source">
      <figcaption class="blockquote-footer" itemprop="citation" itemscope="" itemtype="https://schema.org/citation">
      (<span itemprop="temporal">1970</span>)
      <cite itemprop="name">Carcassonne et sa région</cite>
      via <cite class="source"><a href="https://books.google.fr/books?id=uqo-AAAAYAAJ" target="_blank" class="library">Google book</a></cite>
      </figcaption>
   </collapse>, découvrit que deux commerçants de Carcassonne, Anthoine Samary et Francis Bourlat s’étaient mis d’accord pour frauder les droits de la leude.</p>

Dans un paragraphe avec sa référence

<blockquote class="citation">
   <p>On a beau tout rêver, tu dépasses le rêve.</p>
   <figcaption class="blockquote-footer" itemprop="citation" itemscope="" itemtype="https://schema.org/citation">
      <span itemprop="author">Victor Hugo</span>
      (<span itemprop="temporal">1859, 1877, 1883</span>)
     <cite itemprop="name">La légende des siècles</cite>
    via <cite class="source"><a href="https://fr.wikipedia.org/wiki/La Légende des siècles" class="library" target="_blank">Wikipedia</a></cite>
   </figcaption>
</blockquote>

Notes de l'auteur

Parenthèse dans un texte caché

<p>Pour celle-ci, François fut cassé du tout petit grade qu’il détenait à l’issue de cet incident, mais il dut achever son contrat<collapse icon="parenthese">
    <p>La version de Jeanne Chinaud est administrativement plus vraisemblable. Mais je n’ai rien trouvé qui confirme l’une ou l’autre dans la liste des états de service de 
    François que j’ai obtenue des services des archives de l’histoire militaire.</p>
</collapse>.</p>

Disgression dans un texte caché

<p class="pt-3">En troisième lieu un important flux logistique a été mis en place pour permettre d’échanger d’innombrable colis<collapse icon="read_more">
      <blockquote class="citation">
         <p class="fw-bold">La Poste aux armées</p><!-- Sera affiché au survol du lien -->
         <p>Chaque jour d’octobre 1914, ce sont 600 000 lettres et 40 000 paquets qui vont vers le front.</p>
         <figcaption class="blockquote-footer" itemprop="citation" itemscope="" itemtype="https://schema.org/citation">
            <cite itemprop="name">La poste pendant la première guerre mondiale</cite>
            via <cite class="source"><a href="https://www.laposte.fr/chp/mediasPdf/dossiersdocumentaires/DossierDoc_Postes_1er_GM.pdf" target="_blank" class="external">La Poste</a></cite>
         </figcaption>
      </blockquote>
   </collapse>.</p>

Compléments dans un paragraphe

<p>Je la nomme cousine et c’est plus justement demi-sœur que je devrais dire. Je l’aimais déjà tendrement, cette bonne Louise,
    à cause de son toujours aimable accueil et de la bonne amitié qui nous unit depuis notre bas âge.</p>
<blockquote class="auteur">
     <p>Louise et Elie d’Aupias ont eu une fille Thérèse qui a épousé Pierre de Verthamon, elle est morte à 29 ans sans descendance.</p>
</blockquote>

Icônes

Au départ, nous utilisions les icônes sous la forme d’une fonte :

a.library::after {
   font-family: "Material Design Icons";
   content: "\F0331";  /* mdi mdi-library" */
   vertical-align: top;
   font-size: small;
   margin-left: 0.1em;
}

Mais ce n’était pas terrible en termes de performances et nous sommes donc passés aux icônes en SVG :

a.article::after {                /* format-quote-open */
   display: inline-block;
   content: "";
   background-image: url("data:image/svg+xml,%3Csvg xmlns=’http://www.w3.org/2000/svg’ viewBox=’0 0 24 24’%3E%3Cpath fill=’SteelBlue’ d=’M10,7L8,11H11V17H5V11L7,7H10M18,7L16,11H19V17H13V11L15,7H18Z’ /%3E%3C/svg%3E");
   background-repeat: no-repeat;
   background-size: 1rem 1rem;
   width: 1em;
   height: 1em;
   margin-left: -0.1em;
   vertical-align: top;
}

L’association entre une URL et une icône est faite dans le code VBA suivant :

If InStr(7, h.Address, "maps") > 0 Or _
   InStr(7, h.Address, "ign.fr") > 0 Or _
   InStr(7, h.Address, "geoportail") > 0 Then
   txt(4) = " class=’location’"
ElseIf InStr(7, h.Address, "gallica") > 0 Or _
   InStr(7, h.Address, "books.google") > 0 Or _
   InStr(7, h.Address, "culture.gouv.fr") > 0 Or _
   InStr(7, h.Address, "cairn") > 0 Or _
   InStr(7, h.Address, "persee") > 0 Or _
  InStr(7, h.Address, "archive.org") > 0 Or _
  InStr(7, h.Address, "wikipedia") > 0 Then
  	txt(4) = " class=’library’"
ElseIf InStr(7, h.Address, "geneanet") > 0  or InStr(7, h.Address, "roglo") > 0 Then
   txt(4) = " class=’tree’"
Else
   txt(4) = " class=’external’"
End If