[Astuce] Navigateur, lien vers position texte & surlignage

jee pee Messages postés 41234 Date d'inscription   Statut Modérateur Dernière intervention   -  

Navigateur, lien vers position texte & surlignage

C'est une fonction des navigateurs que je viens de découvrir tout récemment au travers d'un lien vers un article de loi : le lien intégrant le positionnement dans la page visée, avec surlignage d'un mot ou d'un age. Je l'ai surement déjà croisé mais comme pour moi le surlignage c'est du stabylo jaune, alors que sur Firefox c'est un orange pale, cela a pu m'échapper. Dans le cas que j'évoque le surlignage m'a intrigué et j'ai d'abord pensé que c'était sur la page internet affichée qu'il était nativement mis en place pour mettre en valeur un age. Avant de me rendre compte que c'était l'url de la page qui activait positionnement et surlignage.

Quand c'est disponible sur la page que je veux mettre en lien, j'utilise l'ancre html (# anchor) pour cibler le age que je veux indiquer. Sans cette ancre placée sur une page internet par le développeur, il faut indiquer des "au milieu de la page, en bas, ...". Ce nouveau type de syntaxe de l'url permet de se positionner sur un mot ou un age du texte, même sans ancre, et de mettre en avant avec précision le texte ciblé.

Utilisation

Ce devrait être utile sur CCM ;-) Un mot, un age.
 

Le rendu de l'affichage du texte ciblé suivant le navigateur

Syntaxe

J'ai essayé de triturer le premier lien trouvé, puis recherché de la documentation sur le sujet. C'est Chrome qui semble avoir développé cette fonctionnalité (URL Hash Scroll-To-Text Fragment) il y a plusieurs années, cela fonctionne depuis sur Edge et que tout dernièrement dans Firefox. La syntaxe est du type

https://example.fr#:~:text=[prefix-,]textStart[,textEnd][,-suffix]

Ce qui donne une url complète difficilement composable à la main compte tenu, entre autre, de la codification des caractères spéciaux (comme l'espace qui est codé %20).

https://commentcamarche.telechargertorrent.org/infos/25855-charte-d-utilisation-de-commentcamarche-net-respect-d-autrui/#:~:text=et%20b%C3%A9n%C3%A9voles.-,Politesse,dans%20la%20vie%20de%20chaque%20jour%20mais%20aussi%20sur%20CCM%20(CommentCaMarche).,-Voici%20un%20exemple

référence : https://wicg.github.io/scroll-to-text-fragment/

Création du lien

Heureusement Chrome et Edge proposent de créer ce lien. Sur la page ciblée, on sélectionne le texte à surligner avec la souris et avec un clic-droit + Copier le lien à mettre en évidence, l'url complète incluant le texte pointé est mise mise à disposition dans le presse papier, récupérable par un classique coller.

La création du lien dans Chrome après sélection d'un texte


On peut indiquer plusieurs ages à mettre en avant, il est préférable que les textes pointés tiennent tous affichés sur la même page écran pour être vus. Lien avec plusieurs ages

Firefox le mauvais élève

Firefox est à la traine. Pas de création du lien en natif. Il faut utiliser une extension comme Text Fragment. Et certaines formes d'écritures de l'url sur des pages dynamiques, comme : Lien page aspx ne fonctionnent pas, alors que c'est opérationnel dans Chrome ou Edge.

Autre utilisation

On pourrait utiliser cette fonctionnalité pour une table des matières sur CCM