Afficher les notes au survol

a marqué ce sujet comme résolu.
Auteur du sujet

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

Qu’en pensez-vous ?


  1. Voyez plutôt.

+0 -0

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).

SpaceFox

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. :/

✈️ // 🐺 Ami des loups // 🎮 Coding Game // 🐤 Twitter @A312_zds // :B // L’hiver vient // @**A-312** pour me ping

+0 -0

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

SpaceFox

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

Édité par A-312

✈️ // 🐺 Ami des loups // 🎮 Coding Game // 🐤 Twitter @A312_zds // :B // L’hiver vient // @**A-312** pour me ping

+0 -0

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.

Édité par A-312

✈️ // 🐺 Ami des loups // 🎮 Coding Game // 🐤 Twitter @A312_zds // :B // L’hiver vient // @**A-312** pour me ping

+0 -3

@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

+1 -0

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".


  1. Semper : blablabla

Édité par A-312

✈️ // 🐺 Ami des loups // 🎮 Coding Game // 🐤 Twitter @A312_zds // :B // L’hiver vient // @**A-312** pour me ping

+0 -0

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.

+1 -0

À 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, ".


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.

dab

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

Édité par A-312

✈️ // 🐺 Ami des loups // 🎮 Coding Game // 🐤 Twitter @A312_zds // :B // L’hiver vient // @**A-312** pour me ping

+0 -0

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.

Édité par dab

+1 -0

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!

Édité par melepe

+2 -0

À 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.

Exemple avec du texte
Exemple avec du texte
Exemple avec une formule
Exemple avec une formule
+4 -0
Vous devez être connecté pour pouvoir poster un message.
Connexion

Pas encore inscrit ?

Créez un compte en une minute pour profiter pleinement de toutes les fonctionnalités de Zeste de Savoir. Ici, tout est gratuit et sans publicité.
Créer un compte