Afficher les notes au survol

Actuellement, pour lire une note il faut cliquer dessus et ça nous fait perdre le fil de la lecture.¹ A titre personnel, je trouve plus agréable de pouvoir lire une note en la survolant, comme sur Distill.

Qu’en pensez-vous ?

Plutôt au clic et dans un format comme celui de what-if en ce qui me concerne. Sur Distill, tu as un bloc énorme qui recouvre ce que tu es en train de lire, c’est pas terrible non plus (surtout quand ils ont des notes multiples).

Le problème de le faire au clic, c’est que quand tu vas cliquer dessus, tu ne seras pas rediriger en pied de page. :/

Heu c’est exactement le but. Tu as été voir l’exemple que j’ai donné ?

Comment fait-on si on souhaite lire la note en pied de page (en bas de la page) ? On remplace totalement le comportement actuel ?

Oui. Quel est l’intérêt d’avoir toutes les notes en bas de page sur un support qui permet de les avoir directement là où elles sont utiles ?

PS : si c’est nécessaire, cf le système de Wikipedia mobile.

Je n’aime pas trop se côté bling bling (affichage au survol comme une publicité, c’est gênant si on a tendance à suivre le texte avec la souris), je voudrais bien voir le comportement avec une grande note de page + md.

Et sur le coté ?

Quel côté ? Il ne faut pas oublier que si sur les grands écrans il y a des marges à droite et à gauche du texte, ce n’est pas le cas sur les écrans à faible résolution ou sur mobile.

Je verrais plus quelques choses comme ça :

https://jsfiddle.net/6gx9chsp/

C’est un mixte de la solution de Vayel et Spacefox. Ma solution va baisser les lignes suivantes pour afficher la note de page, sans cacher les lignes suivantes. Je préfère que ça soit ancré dans la page.

EDIT : Remplacement du lien jsfiddle, j’avais oublié de modifier un style css.

EDIT 2 : Compatibilité Webkit (le js à un retour différent firefox vs chrome).

EDIT 3 & 4 : Rendu plus propre & moins brouillon.

Ça ne fonctionne pas chez moi (Chromium sous Linux), ça crée un trou dans le document (ce que déjà je comprends mal) et affiche la note en bas de page.

@A-312 J’ai du mal à voir en quoi c’est moins « bling-bling » que la solution de @SpaceFox. Pour moi, ça a juste plus de chances de malfonctionner, et je ne suis pas fan de l’idée de bouger le texte.

Sinon, je soutiens largement l’idée.

Puisque l’on a tous un avis, je propose des notes de marge quand l’écran est assez large, et des notes à la Wikipedia Mobile quand il ne l’est pas. ;p

J’ai modifié le jsfiddle, je n’avais pas essayé sur chrome. // @dab même argument pour un ordi ou une fusée.

Je n’aime pas les petites bulles avec du petit texte

Je souhaite éviter cette caricature :

EDIT : Si on ajoute une possibilité dans la bulle, d’aller lire en bas de page ça me convient, par exemple : "[1, 2, 3] Semper : blablabla".

J’ai du mal à comprendre ce que tu essaies de montrer avec ton illustration. Toute fonctionnalité, si elle est mal implémentée, ne sera effectivement pas très satisfaisante. Quant à la taille du texte, je ne crois pas que les exemples cités montre une taille de caractère sensiblement plus petite. Je n’ai pas vérifié, mais je n’ai pas ce sentiment tout du moins. Cela dit, je te soutiens dans l’idée de conserver une taille de caractère égale à celle du corps.

À propos de l’« ordi ou fusée », je ne comprends pas non plus. En quoi afficher une bulle, plus déplacer du texte, est moins « bling-bling » qu’uniquement afficher une bulle ? Je n’essaie pas de faire du sarcasme, je ne comprends simplement pas.

À propos de l’« ordi ou fusée », je ne comprends pas non plus.

@dab je rebondissais sur ton argument : "ça a juste plus de chances de malfonctionner, ".

Je trouve que ça fait un peu gadget/fantaisiste d’avoir une petite bulle qui s’affiche en respectant l’alignement horizontal du mot alors qu’on a toute la largeur de la page pour afficher un texte

Je ne suis pas un expert du développement Web, mais j’ai l’impression que l’on peut implémenter une bulle au dessus du texte avec juste un petit peu de CSS à coup de positionnement relatif au paragraphe parent et detransform pour avoir un joli alignement, non ? Tandis que déplacer du texte demande non seulement ça, mais également du JavaScript (qu’une partie des utilisateurs d’ici a probablement désactivé), don une partie de choses pas tout à fait triviales, comme calculer la hauteur du conteneur de la note (ce qui, de plus, n’a manifestement pas l’air d’être implémenté de la même façon à travers tous lesnavigateurs, si j’ai bien compris?).

Je concède volontiers que l’on peut émuler un comportement acceptable s’il n’y a pas de JavaScript, mais je pense que ça devient alors un peu overkill. Mais c’est simplement mon avis.

Edit: j’ai oublié de discuter de ton second point. Comme tu peux le lire dans mon premier message du sujet, je suis davantage favorable à des notes de côté lorsque la place le permet. Je n’ai pas vraiment d’opinion quant à la taille que devrait faire le conteneur de la note; tant qu’il arrive à ce faire, je trouverais la modification très heureuse comparée au comportement actuel.

J’avais déjà vu un site avec les notes sur le côté, ça ne rend pas trop mal quand il n’y en a qu’une par paragraphe environ, mais je me demande ce que ça fait quand on force le trait.

Sinon tant qu’on est à proposer, j’aime bien aussi la méthode utilisée par le monde diplomatique, que vous pouvez regarder à cette page par exemple : https://www.monde-diplomatique.fr/2018/09/GRESH/59047 (j’ai pris le premier article gratuit). Perso pour que ce soit encore mieux je changerais juste légèrement le background des notes qui s’affiche en bas de l’écran. On peut aussi se poser la question de ce qu’il se passe en cas d’abus de notes.

Enfin sur Omnilogie il y avait une méthode qui certes était expéditive mais simple à implémenter et qui fait 90% du boulot : utiliser la balise title de la note pour y recopier le contenu de la note en bas de page. En cas de trucs compliqués dans la note, genre des maths avec latex, ledit texte compliqué était remplacé par "[Cliquez pour voir]".
Edit, un lien pour l’exemple : https://omnilogie.fr/O/Unarticle_qui_ne_manque_pas_de_piment!

À noter que si on choisit la solution de l’info-bulle, on peut réutiliser celle utilisée pour afficher les votants des pouces verts et rouges. On peut y mettre du texte mais aussi des formules (tout ce que l’on veut en fait). On pourra bien entendu modifier les couleurs si le blanc sur fond noir dérange.

Format taille actuel :

Format taille normal :

Quid de accessibilité/mobile ?

Sur mobile ?