Notes de bas de page dans une bulle

Bonjour,

Les notes de bas de page sont une excellente façon d’ajouter des infos, mais l’analogie avec le papier a ses limites : il est bien plus contraignant de descendre et remonter dans une page web que de jeter un coup d’oeil sur le bas de la page d’un livre.

Ma suggestion serait d’utiliser le même système que xkcd ou Wait But Why ¹, où cliquer sur le numéro de la note affiche une bulle avec la note dedans. Cela n’exclut pas forcément de continuer d’afficher la note en bas de page non plus, si on veut garder une typographie similaire avec le pdf.

Qu’en pensez-vous ?

il est bien plus contraignant de descendre et remonter dans une page web que de jeter un coup d’oeil sur le bas de la page d’un livre.

Perso je clique sur le numéro puis sur ↩, je ne m’amuse pas à monter/redescendre à la main.

Après pour l’idée j’ai pas vraiment d’avis pour / contre. Je me demande juste pour l’accessibilité.

Bonjour,

Un title sur le lien ne suffirait pas ? Ça ne permet pas de cliquer sur les liens mais bon, au moins c’est intégré au navigateur.

il y a plusieurs autres désavantages au title : on ne peut pas copier/coller depuis, on ne peut pas tout lire parfois (sur FF android on ne peut pas lire entièrement les long titles), ça paralyse la souris et ça disparaît rapidement.

J’utilise aussi les lien à ancrages pour scroller depuis les notes, mais même comme ça c’est plutôt lourd

Sur Wikipédia par exemple, c’est le système utilisé mais dans ce cas ça ressemble plus à une collection de références (qu’on trouverait dans un livre à la bibliographie, il y a aussi une partie ’notes’ dans certains cas mais souvent quand les notes qui prennent autant de place que le texte).

Le javascript utilisé par xkcd pour gérer les notes fait seulement quelques lignes :

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13

<script>
      jQuery.noConflict();
      jQuery(function() {
        jQuery(".refbody").hide();
        jQuery(".refnum").click(function(event) {
          jQuery(this.nextSibling).toggle();
          event.stopPropagation();
        });
        jQuery("body").click(function(event) {
          jQuery(".refbody").hide();
        });
      });
    </script>