IRCAM - Centre PompidouServeur © IRCAM - CENTRE POMPIDOU 1996-2005.
Tous droits réservés pour tous pays. All rights reserved.

De la note de bas de page sur papier à l'affichette dynamique pour l'écran

Michel Fingerhut et Vincent Gourson

Copyright © Ircam - Centre Georges-Pompidou 1999


Version très développée d'un article publié dans la liste de diffusion Biblio-FR le 1er septembre 1999, sous le titre « Textes savants - du papier à l'écran: présenter les notes ».

L'écran n'est pas le papier - c'est un truisme qui me semble parfois mal compris par ceux qui pensent que le premier remplace le second. On écrit (ou devrait écrire) différemment pour ces deux supports. Le transfert de texte de l'un vers l'autre ne peut donc pas se faire sans une quelconque adaptation qui aille au delà de la simple (re)mise en page, sans toutefois nécessiter la réécriture complète du texte original, ce qui serait une tâche impossible en cette ère de numérisation urgente.

Texte imprimé avec notes en marge

En particulier, la lecture de textes savants, rédigés à l'origine pour le papier, n'est pas aisée à l'écran, si ce n'est qu'à cause de leur longueur et de leur linéarité qui se prêtent souvent mal à une segmentation. Un facteur additionnel de complexité dans la lecture de documents de ce genre particulier est la présence de renvois sous forme de notes, parfois fort nombreuses. Celles-ci peuvent être réunies, dans la version imprimée, en fin de livre ou de chapitre, regroupées en bas de page, voire présentées dans la marge du texte, à proximité de leur appel (voir image ci-contre). Quelque soit la mise en page adoptée, la lecture de la note nécessite un déplacement plus ou moins conséquent du regard, accompagné ou non d'un feuilletage manuel.

Sur le Web, on utilise souvent des liens hypertextuels pour l'appel de notes renvoyant vers une autre partie du document (voire un autre fichier) dans laquelle se trouve le texte de la note. Lorsque l'on clique sur ce lien, l'appel de note et son texte environnant sont remplacés par la note elle-même et son voisinage, le retour s'effectuant par l'entremise d'un click sur un bouton (Arrière) du navigateur ou sur un lien établi près de la note. Ces changements de contexte entre l'affichage du texte et de la note qui s'y rapporte sont plus « violents » que lors du glissement du regard pour la consultation d'une note en bas de page ou en marge d'un document papier, action qui ne nécessite aucun geste manuel.

Une des techniques parfois utilisées pour éviter ce changement brutal est l'affichage d'un cadre (« frame », en anglais) séparé du texte original, dans lequel s'affichent les notes1. Si cette méthode permet en principe de consulter les notes sans perdre le contexte principal, son utilité dépend beaucoup de la taille de l'écran dont dispose le lecteur: sur un petit écran de portable, le cadre principal s'en trouve considérablement réduit par rapport au champ de vision utile à la lecture du texte lui-même et à la vision de son contexte.

Extrait d'un texte scientifique, comprenant deux appels de notes de bas de page. La souris étant positionnée sur le second, une affichette est apparente.

Nous venons d'expérimenter une nouvelle technique de mise en page de nos archives de textes de recherche, qui permet de présenter la note à l'endroit où se trouve l'appel de note dans un petit cadre qui se superpose au texte à la demande (voir l'image ci-contre): il suffit de placer le curseur à l'aide de la souris sur l'appel de note pour voir l'affichette, de l'ôter pour qu'elle disparaisse2. Nous appellerons ce cadre affichette dynamique (flying note, en anglais).

L'avantage principal de ce mode de présentation est d'afficher la note dans son contexte à la demande avec un minimum de gestes -- en faisant simplement glisser la souris sur l'appel sans avoir à cliquer en sus -- et de la faire disparaître en déplaçant légèrement la souris, sans que le contexte d'origine ne change. La position précise de l'affichette est calculée de façon à tenter de ne pas recouvrir tout le contexte immédiat (ce qui serait le cas si elle était, par exemple, centrée sur la souris) sans trop s'en éloigner. Elle se place du côté de la souris le plus éloigné des marges: ainsi, si l'appel de note se retrouve près d'une marge, l'affichette sera disposée de façon à lui éviter de disparaitre dans cette marge.

Le lien hypertextuel de l'appel de note continue, lui, a être opérationnel comme auparavant: en d'autres mots, lorsqu'on place le curseur sur l'appel de note, l'affichette apparaît; si on clique alors sur cet appel de note, le contexte bascule vers la liste des notes (et l'on peut revenir au contexte d'origine à l'aide du bouton Retour du navigateur).

Cette dualité de fonctionnement a plusieurs raisons. Elle permet tout d'abord de consulter les notes « à l'ancienne » pour les navigateurs qui ne possèdent pas les facultés nécessaires à ce type de fonctionnement3 - soit du fait de leur vétusté ou incompatibilité4, soit intentionnellement (tels les logiciels de lecture pour malvoyants). Par extension, elle permet d'obtenir une version imprimée du texte accompagné de ses notes signalées de façon traditionnelle. D'autre part, elle est nécessaire pour donner accès à de l'hypertexte qui se trouverait inséré dans le texte de la note (par exemple, la note n° 1 ci-dessus, qui comprend un lien hypertextuel vers un article extérieur): en effet, l'affichette disparaissant dès que l'on déplace la souris, il est impossible de placer le curseur dessus; il faut donc cliquer sur l'appel de note pour pouvoir accéder à un affichage traditionnel.

Le contenu de l'affichette n'est pas nécessairement identique à celui du texte référencé par le lien hypertextuel auquel elle est associée: on l'a vu dans l'exemple de la note 1 ci-dessus, où celle-ci contenait de l'hypertexte, tandis que l'affichette explicitait le lien. On peut donc utiliser les affichettes comme légende, indication, résumé ou aperçu: en plaçant la souris sur le lien, l'affichette apparaît avec un descriptif plus ou moins sommaire du contenu référencé; le lecteur peut alors décider de cliquer ou non sur le lien pour aller consulter le texte référencé.

Comme la fonction de l'affichette est de fournir un contenu sommaire, elle n'a pas à fournir les fonctionnalités hypertextuelles (voire hypermédia) éventuellement présentes dans le document ou partie de document qu'elle référence. En ce sens, elle ressemble par son fonctionnement à celui offert par le champ ALT des balises d'images insérées dans un texte en HTML*, qui permet d'afficher une légende (un texte arbitraire mais non hypertextuel) lorsque l'on place le curseur sur une image (faites-le sur l'image ci-dessus...). Par la nature de son contenu, l'affichette ressemble au contenu de la balise TITLE de documents en HTML, destinée à afficher un intitulé dans la barre supérieure de la fenêtre contenant le document consulté.

Cette technique peut, bien évidemment, être utilisée pour d'autres renvois intertextuels que les notes de bas de page, tels que:

  1. la réalisation d'un glossaire* en ligne (le pavé d'affichage proposant la définition sommaire du terme, et la note en donnant la définition détaillée);
  2. le résumé (abstract) d'un article ou ouvrage référencé (voir ci-dessous les notes 1 et 2);
  3. le référencement de documents multimédia: image (l'affichette pouvant alors contenir une imagette donnant un aperçu de l'image référencée; voir, ci-dessus, le lien dans la phrase "faites-le sur l'image ci-dessus"), enregistrement sonore ou vidéo (dans ce cas l'affichette pourrait être soit un texte descriptif, soit un extrait), présentation Shockwave*, modèle VRML*... (description textuelle ou imagette), etc.
  4. le contenu de la balise TITLE du document référencé par le lien auquel est attachée l'étiquette; par exemple, le positionnement de la souris sur le lien vers le site du CNAM ferait apparaître une affichette reprenant l'intitulé de ce site tel qu'il est mentionné dans sa balise TITLE, et permettrait ainsi d'en prendre connaissance avant de s'y connecter.

Les exemples 2-4 ci-dessus peuvent d'ailleurs se prêter à la réalisation assistée par ordinateur du contenu de l'affichette. En effet, dans le cas n° 2, il serait possible d'utiliser des logiciels effectuant des résumés automatiques de texte, comme on en trouve dans les systèmes de recherche d'information (information retrieval, en anglais)5. Dans le cas n° 3, une extension de ce type de logiciel au multimédia (par exemple: extraction automatique de motifs musicaux6 d'un fichier de son numérique ou MIDI*, description de scène pour une image7...) pourrait fournir l'aperçu. Enfin, le cas n° 4 est le plus facile à réaliser.

La multiplicité des utilisations possibles de l'hypertexte comme mode d'annotation d'un texte peut s'accompagner d'un effet pervers: un trop grand nombre de signes indiquant la présence d'une référence (sous des formes diverses -- variations de police ou de couleur, soulignage...) peut en fait rallentir la lecture continue en arrêtant le regard trop souvent, au lieu de servir de repère pour une lecture en diagonale ou d'attirer l'attention vers les références importantes. Pour éviter de rajouter des indices visuels multiples (liens de couleur différente, par exemple), nous distinguons deux types de signes:

La mise en oeuvre technique est basée sur une capacité du langage HTML (dès sa version 4) de détecter l'arrivée et le départ du curseur au dessus d'un lien hypertextuel, et de coupler chacun de ces événements avec un programme adéquat, dans ce cas écrit en Javascript. Le premier de ces programmes fait paraître l'affichette à l'écran, à un emplacement calculé en fonction des coordonnées relatives du curseur dans la fenêtre du navigateur, de façon à être le plus éloigné des marges les plus proches et de ne pas recouvrir le voisinage du texte annoté. Le second est chargé de faire disparaître l'affichette quand la souris est déplacée. Chaque affichette est un bloc de type SPAN invisible mais présent dans le texte. Des feuilles de style sont utilisées pour faciliter la rédaction des pages en HTML contenant le texte et ses annotations.

Comme mentionné ci-dessus, l'étiquette ressemble, par son mode de fonctionnement, à celui offert par le champ ALT de la balise IMG servant à l'insertion d'image. On pourrait donc éviter à avoir à mettre en oeuvre tout cet appareil si un champ ALT avait été présent dans la balise A servant à insérer de l'hypertexte. Il serait donc intéressant de proposer cette extension au comité de standardisation du langage HTML.

Elle en diffère toutefois sous deux aspects qui justifient son existence propre, que cette extension soit validée ou non:

Notes

  1. Voir, par exemple, la mise en page de l'essai « Le Mal élémental » de Miguel Abensour.
  2. Voir l'article « Timbre Space as a Musical Control Structure » de David Wessel.
  3. Feuilles de style en cascade, JavaScript, HTML dynamique.
  4. Les standards étant, contrairement à ce que le terme suggère, différents d'une plate-forme à l'autre, quelques remarques techniques sont de mise:
    - Ceci ne fonctionne qu'avec Netscape 4 ou Internet Explorer 4 (ou plus récents);
    - Netscape ayant quelques problèmes, ses utilisateurs doivent tout d'abord attendre que la page se charge entièrement avant d'utiliser cette fonctionnalité; il leur faut aussi recharger la page après tout redimensionnement de la fenêtre.
  5. Voir, par exemple, les travaux de Abderrafih Lehmam sur le résumé automatique de texte au sein de LanDisCo à l'Université de Nancy 2.
  6. Voir, par exemple: Gérard Assayag (Ircam) et Shlomo Dubnov: « Guessing the Composer's Mind: Applying Universal Prediction to Musical Sequences », Actes de l'International Computer Music Conference 1999 (à paraître). Cet algorithme permet d'envisager l'extraction automatique de motifs musicaux significatifs, et, de là, d'établir un « aperçu » musical.
  7. Voir, par exemple, les travaux du projet PASTIS concernant l'analyse statique de scènes à l'Inria - Sophia-Antipolis, et ceux des recheches en réalisation de systèmes automatiques de vision, d'analyse et d'interprétation d'images et de documents audiovisuels au département IIST de l'Institut de recherche en informatique de Toulouse.

Glossaire

Remerciements...

... à Gérard Assayag, Hervé Le Crosnier, Dominique Pujebet et Marc Texier pour leurs commentaires constructifs.

____________________________
Server © IRCAM-CGP, 1996-2008 - file updated on .

____________________________
Serveur © IRCAM-CGP, 1996-2008 - document mis à jour le .