La Typographie du Web
de Russon Wooldridge
Université de Toronto (Canada)
| 1. Introduction | |||||||
| 2. La Typographie et le codex | |||||||
3. La Typographie et le Web
| |||||||
| 4. Conclusion |
1. Introduction |
En partant d'une observation de ce qui est ou a été la norme de la typographie du codex et des propriétés de la page papier, nous essayons de poser ce qui, d'après les propriétés de la «page» qu'est l'écran, nous semble devoir être la norme de la typographie du livre électronique en ligne. Les propriétés en question sont, d'une part le support lui-même (page papier vs écran), et d'autre part la maîtrise de la surface de lecture (scripteur-imprimeur vs lecteur).
2. La Typographie et le codex |
Selon le Trésor de la langue française informatisé (1), la typographie est un «procédé d'imprimerie dans lequel l'impression est réalisée par des caractères en relief assemblés et mis en page» ou encore la «manière dont est composé un texte (qualité des caractères, de la mise en page)». La page existe depuis l'introduction il y a deux millénaires du codex. Pour des raisons de commodité de transport et de maniement, le texte continu du rouleau a été découpé en morceaux correspondant aux dimensions physiques de la page de codex. La mise en lignes et la mise en pages existaient donc depuis de nombreux siècles quand l'imprimerie est venue faciliter la confection de livres et la diffusion du savoir et de la bonne parole. La typographie n'est en fait que la mécanisation de procédés manuscrits tels que la justification de la marge droite, la mise en pages et le choix des types et tailles de caractères. Pendant longtemps on a continué à pratiquer dans les livres imprimés les abréviations conventionnelles pour faciliter la justification des lignes et ce n'est qu'au dix-septième siècle que l'on s'est résolu à se contenter de l'espacement des caractères et des mots et de l'incise typographique pour le faire.
Au départ on a transformé la chaîne de la parole unidimensionnelle (temporelle pour la parole orale, spatiale ou linéaire pour le texte écrit) en surface bidimensionnelle (largeur de la ligne et longueur du texte-rouleau) pour la mise sur rouleau, puis en solide tridimensionnel (ligne, page, livre) en passant au codex. Les découpages pratiqués pour la mise en lignes et en pages étaient (et sont toujours) extrinsèques par rapport au texte, mais ils sont autorisés par les dimensions de la page. Nous aurons à revenir sur la légitimation physique dans la prochaine section.
Dans les dernières années du vingtième siècle, nombre d'éditeurs de l'imprimé ont profité du fait que les auteurs s'étaient équipés en micro-ordinateurs et imprimantes pour leur demander de soumettre une copie prête à reproduire, se rendant ainsi le travail plus facile tout en pratiquant les mêmes prix de vente. Les mauvaises habitudes acquises et les mauvais outils utilisés ont eu leur effet non seulement sur la typographie traditionnelle mais également sur la typographie du Web, comme nous le verrons.
3. La Typographie et le Web |
Pour bien rendre compte des différents aspects du livre imprimé, ou plus largement du texte imprimé, et de son expression dans le Web, il faut élargir la définition traditionnelle du mot typographie. Dans un premier temps, la nouvelle définition doit pouvoir faire correspondre le mot davantage à l'anglais book-making («confection du livre»). Il y aurait sans doute lieu de voir ce qui équivaut en ligne à la reliure du livre imprimé, mais nous n'irons pas jusque là dans la présente discussion, sauf à souligner l'importance de la page de départ, qui doit incorporer titre (dont nom d'auteur et date, éventuellement éditeur), copyright et table des matières. Il convient pourtant d'ajouter à la composition et à la mise en page le support qu'est la feuille de papier dans le cas de l'imprimé et la définition du fond de l'écran dans le cas du livre ou texte en ligne.
Une différence cruciale entre l'imprimé et le Web est que ce sont l'éditeur et l'imprimeur qui fixent les dimensions de la page papier, alors que c'est l'usager du Web (le lecteur) qui choisit les dimensions et l'apparence de sa «page», l'écran. L'usager peut faire varier la largeur de la ligne de texte affichée sur son écran, comme il peut aussi faire varier la dimension verticale de la surface affichée. L'écran bidimensionnel fonctionne en fait plutôt comme le rouleau en non comme le codex. La troisième dimension, celle de l'épaisseur du livre, l'ensemble des pages, reste virtuelle dans le Web, le lecteur faisant dérouler le texte au fur et à mesure. Comme nous le verrons, c'est le fonctionnement totalement différent de la mise en lignes qui est cause de plusieurs types de malheurs en matière de typographie du Web. Le lecteur de l'écran peut aussi faire varier la taille et l'apparence des caractères, en les agrandissant ou les réduisant, en passant du Times Roman, au Garamond ou à l'Arial.
Dans un deuxième temps, il est nécessaire d'élargir encore le sens du mot typographie pour y inclure l'appropriation du texte par le lecteur. L'avènement du livre ou texte électronique sur CD-ROM et dans le Web a totalement bouleversé les habitudes de lecture. A la lecture linéaire traditionnelle, prévue par l'imprimeur et pratiquée par le lecteur, est venue s'ajouter, ou du moins s'adjoindre de façon systématique, la lecture transversale. La lecture linéaire est prise en charge par l'être humain, alors que la lecture transversale est assurée par la machine, c'est-à-dire la fonction «Recherche» du moteur de recherche (par exemple, Google au niveau du Web) ou du navigateur du document chargé (par exemple, Mozilla au niveau du fichier chargé).
Nous allons examiner ici, d'une part quelques propriétés de la typographie du Web, et d'autre part, et surtout, certains phénomènes qui gênent la lecture soit linéaire, soit transversale des documents publiés dans le Web.
|
Dans cette section, nous allons relever quelques problèmes concernant la justification de la marge droite, les espaces entre les mots et la ponctuation, les polices de caractères et la couleur, en prenant comme exemples des extraits de textes publiés sur différents sites du Web en format HTML. Il s'agit de textes littéraires (des contes de Maupassant) mis en forme pour lecture sur écran.
|
C'est une convention livresque de justifier la marge droite, car - comme le copiste avant lui - l'imprimeur est maître absolu de la police de caractères, leur type et taille, de l'espacement des caractères et des mots, de la largeur de la ligne, de l'incise typographique. Les habitudes de lecture livresque, renforcées par l'habitude de se servir d'un logiciel de traitement de texte pour produire des documents sur du papier A4 (ou équivalent), font que les auteurs trouvent normal, voire «joli», d'avoir une marge droite justifiée. Or, aucun des facteurs de maîtrise du papier évoqués ci-dessus ne joue sur l'écran d'ordinateur. Le logiciel de traitement de texte, capable de produire du joli sur papier, s'avère le plus souvent un très mauvais outil pour créer un document en HTML. La conversion en format HTML produira des paragraphes ayant la balise <P ALIGN="JUSTIFY">, ce qui peut donner le résultat suivant (2):

La balise livresque <P ALIGN="JUSTIFY"> devrait être simplement <P> ou <BR>, ce qui donne, par exemple, ceci (3):

Dans un document Web «normal», l'espacement des
caractères et des mots ne varie que selon la grandeur des caractères.
|
L'usage du même type de mauvais outil ou la méconnaissance du fonctionnement d'une page Web peut résulter en des espaces mous là où on s'attend normalement à des espaces durs ( en HTML) avant les ponctuations «fortes» (deux-points, point-virgule, point d'interrogation, point d'exclamation, guillemets fermants) ou après (guillements ouvrants). Cela pourra donner, par exemple (4):

ou encore:

|
Le lecteur est habitué à lire un texte littéraire composé dans un caractère romain à sérif. Si on lui donne le choix de caractère (option du navigateur), il peut toujours sélectionner un caractère sans sérif ou autre. Le caractère des documents suivants est déterminé à l'avance:
a) <FONT FACE="Genava,verdana,geneva,arial" SIZE=2> (5):

b) <font face="Arial">
(6):

Ces deux documents pêchent aussi, le premier par son imposition d'une taille
de caractères (<FONT SIZE=2>),
le second par l'emploi à travers tout le texte de la mise en gras, ce qui sera
cause de fatigue et d'agacement chez la plupart des lecteurs: au lieu de
balises <P>
pour les paragraphes, on a utilisé dans ce texte des balises d'intitulées
<H4>.
|
Le Web offre à l'auteur qui veut publier en ligne un choix de millions de couleurs. Alors, pourquoi ne pas en profiter pour faire «joli»? Cependant, le lecteur de son côté n'a peut-être pas les mêmes goûts que l'auteur en matière de couleurs et de toute façon il veut le moins de bruit possible entre le texte écrit et sa propre construction du contenu qu'il renferme. D'où la convention bien plus que millénaire du noir sur blanc. Ce n'est pas à l'auteur d'innover; si le lecteur préfère blanc sur noir, par exemple, il pourra toujours faire ce choix dans son navigateur. Il n'aimera pas peut-être les textes suivants, qui imposent et la couleur du texte et celle du fond (c'est le troisième qui s'éloigne le moins des attentes normales):
a) <body background="../p1.jpg">, <font color="#400000"> (7):

b) <BODY BGCOLOR="#447777">, <FONT COLOR="#FFFFCC"> (pour le titre), <FONT COLOR="#990000"> (pour le texte) (8):

c) <BODY
background="../images/fond01.gif" text=darkblue>
(pour le texte), <FONT COLOR="#800040">
(pour le titre, le fond restant le même) (9):

|
Le mode de lecture normal du livre imprimé est linéaire - on lit un roman du début jusqu'à la fin. Mais distinguons entre texte continu (le roman) et texte discontinu (le journal, le dictionnaire, l'encyclopédie...) Pour le texte discontinu, il faut un système de repérage des unités discrètes: ordre alphabétique pour le dictionnaire, ordre alphabétique et index pour l'encyclopédie, table des matières et index pour le manuel de grammaire, table des matières plus ordre conventionnel des rubriques du journal. Ces systèmes hypertextuels ne permettent jamais qu'une lecture transversale partielle de l'imprimé: par exemple, l'occurrence du mot sabotage dans un exemple d'emploi de l'article SPEAKER du Petit Robert ou de l'article PRONONCIATION du Trésor de la langue française - «Sabotage de la prononciation de notre belle langue par les speakers de la radio» - n'est pas repérable par une lecture transversale; ce sens figuré est quand même important, et courant, mais il n'est pas donné dans l'article SABOTAGE.
Dans la vraie hypertextualité du Web, la lecture transversale est aussi importante, et est normalement aussi totale, que la lecture linéaire. Les systèmes hypertextuels de recherche par mots-clés sont multiples: moteur de recherche pour l'ensemble du Web, fonction «Recherche» ou «Trouver» du navigateur pour une page donnée, fonction «Recherche» souvent offerte pour l'ensemble des documents d'un site ou sous-site (site d'un journal, par exemple), fonction de recherche plein-texte pour une base de données. Reprenons, dans cette dernière catégorie, l'exemple du mot sabotage: en demandant dans le formulaire de requête du Trésor de la langue française informatisé (1) toutes les occurrences du mot sabotage dans le texte des exemples d'emploi, on tombe sur l'occurrence de sabotage de l'article PRONONCIATION citée ci-dessus.
La possibilité de faire une lecture transversale d'un texte continu comme le roman permet souvent d'enrichir la lecture linéaire ou la compréhension globale du roman. Prenons deux exemples. Dans Candide de Voltaire, on rencontre dans le chapitre 27 le personnage de Don Fernando d'Ibaraa, y Figueora, y Mascarenes, y Lampourdos, y Souza, gouverneur de Buenos-Ayres. On a vaguement souvenir de l'avoir rencontré déjà, mais pour en situer l'occasion on n'a pas d'autre choix, dans le roman imprimé, que de parcourir les 26 chapitres précédents. Si on a Candide en base de données (10), on le retrouve tout de suite dans le chapitre 13. Dans le roman Bonheur d'occasion de Gabrielle Roy, le thème du sucre d'érable revient à plusieurs reprises; en fait, le mot y est le plus souvent au pluriel, ce qui le distingue de son comportement en français d'Europe. Une recherche, dans la base de données de Bonheur d'occasion, de sucre(s) révèle tout de suite (entre autres occurrences): «les sucres viennent de commencer» (ch. 13), «cabane à sucre» (ch. 13 et 15), «[aller] aux sucres» (ch. 13, 16, 18, 22), «sucre à la crème» (ch. 16), «sucre en pain» (ch. 21) (11).
Nous avons dit que la lecture transversale est «normalement» totale dans le Web. Parmi les obstacles réels ou potentiels, nous allons étudier ceux présentés par la saisie optique (3.2.1), certains fonctionnements particuliers aux documents non conformes que sont les fichiers DOC et PDF (3.2.2) et les textes en mode image (3.2.3).
En revanche, il est un type de lecture transversale particulier qui améliore la lecture transversale et qui se situe, en quelque sorte, entre la lecture du Web visible et celle qu'offrent des logiciels d'indexation spécialisés comme Stella, Philologic ou TACTweb. Il en sera question ci-dessous (3.2.4).
|
Les fautes d'orthographe de la composition typographique sont linguistiques et humaines (par exemple, font ou fonds au lieu de fond); celles de la saisie optique sont visuelles et mécaniques (par exemple, «ISSO» pour «I550» - la lecture transversale révèle l'inconséquence de l'emploi conventionnel de «I» latin dans une séquence de chiffres arabes). Un exemple qui ne gêne pas l'oeil (lecture linéaire), mais cache le mot à la fonction mécanique «Recherche» (lecture transversale) (12):

Le mot «Instruction» de la première ligne est en fait «lnstruction», avec un «l» minuscule. La fonction
«Recherche» du
navigateur ne trouvera donc pas le mot instruction.
On peut dépister la plupart des fautes de saisie de ce type en dépouillant la liste alphabétique des formes (mots graphiques) du texte. Pour la partie J-M de la liste du premier paragraphe du «Père» de Maupassant, on a:
On voit tout de suite que «lnstruction» est fautif.
|
Font partie du Web depuis quelque temps, grâce aux capacités accrues du moteur de recherche Google, des fichiers DOC et PDF téléchargés sur des serveurs. A l'intérieur de ces documents, affichables sur écran mais conçus en premier lieu pour être imprimés sur papier, relèvent du système typographique du Web toutes les parties du texte qui sont correctement repérables par le moteur de recherche. Nous parlerons dans cette section de deux particularités de la mise en forme de fichiers DOC et PDF qui ne sont pas conformes à la typographie du Web.

Dans la typographie du Web, les cases carrées
sont interprétées comme des lettres «o», ce qui crée des «mots» comme «oinfant»,
«odairy», «oconfectionery», «ocereals», «onuts», «oedible», «ospices», «opasta»,
«osauces», «ocookware».

Cette séquence est introuvable si, dans le
moteur de recherche, on tape «monsieur françois grateau directeur général
des hospices civils de lyon».
En revanche, on trouvera bien le texte en question si on a l'idée saugrenue de
taper «monsieur françois grateau d
irecteur général des h ospices c ivils de l yon».
Autrement dit, l'utilisation de petites capitales dans un document PDF a pour
conséquences: a) de couper en deux les mots ainsi affectés («d irecteur»,
etc.); b) de les rendre introuvables dans le Web; c) de créer des mots
fictifs («d», «irecteur», «h», «ospices», «c», «ivils», «l», «yon»); d) de fausser les
résultats d'une requête dans le Web.
|
En règle générale, dans un document comportant texte et images, c'est le texte analytique qui porte le contenu linguistique et les images synthétiques qui soit illustrent le texte, soit ont une valeur iconique indépendante du texte. Dans le cas du roman, le texte est primaire, les images secondaires; dans celui d'un album de bandes dessinées pour jeunes, les rôles sont inversés. Le fonctionnement du texte et de l'image est le même pour le document en ligne que pour le document papier, à l'exception d'une différence importante. Alors qu'on peut lire ou photocopier indifféremment texte et images imprimés sur papier, on peut lire sur écran ou sauvegarder des fichiers texte ou image, mais on ne peut interroger transversalement (moteur de recherche ou fonction «Recherche» du navigateur) que des fichiers textes, comme on ne peut faire du copier-coller que dans ces derniers. On trouvera cette différence normale dans la plupart des documents du Web, mais lorsque tout le texte est porté par des images, il y a rupture.
Un exemple, qui s'explique par le fait qu'il s'agit d'une pure publicité, donc objet synthétique connotatif plutôt que document analytique dénotatif (15):

Le titre «daily facials» est affiché au moyen
de la commande
<img src="images/home_title.gif">
et le texte qui le suit est appelé par la commande
<img src="images/home_text2.gif">.
Le contenu textuel du champ HTML <title>
- "Home Page - Daily Facials" - suffit pour rendre la page trouvable par un
moteur de recherche si on demande des occurrences de «daily facials», mais non
pas si on cherche des occurrences de «lingette(s)» ou de «massage facial».
|
La mise en relief de mots-clés est un moyen d'optimiser la lecture transversale. Elle se fait par la mise en gras dans les pages de résultats de Google, mais elle est absente de l'affichage des documents en ligne correspondants. Dans des logiciels d'indexation et de recherche spécialisés - comme Stella (utilisé pour le Trésor de la langue française informatisé et Frantext, Nancy), Philologic (ARTFL, Chicago) ou TACTweb (FreBase, Toronto) - la mise en relief s'effectue de différentes façons, dont le regroupement des occurrences du mot-clé dans des affichages KWIC, ou des graphes de distribution. Pour connaître la distribution de plusieurs mots-clés, ainsi que la dispersion ou la concentration de leurs cooccurrences, il faut, dans ces logiciels spécialisés, passer par plusieurs requêtes.
Or il existe entre les deux un Web caché dans lequel la mise en relief se fait automatiquement à l'intérieur du texte linéaire au moyen du marquage en couleur de chaque occurrence d'un mot-clé - une couleur différente pour chaque mot-clé. Il s'agit des versions que Google met en cache pour les documents HTML ou de ses versions en HTML de documents mis en ligne dans d'autres formats, comme les fichiers PDF ou DOC.
Par exemple, dans le conte «L'Enfant» de Maupassant, on rencontre dans un même paragraphe les mots fille, maîtresse, enfant, mère et femme. En mode linéaire ordinaire dans le Web, cela donne (16):

Dans la version que Google met en cache, cela
devient, suite à la requête «+enfant +mère +fille +femme +maîtresse +maupassant»:

En parcourant rapidement le reste du texte à
l'oeil nu, on voit tout de suite qu'il y a plusieurs autres occurrences de ces
mots, dont quelques cooccurrences concentrées telles que:


![]()
La requête «+enfant +mère +fille +femme +maîtresse +maupassant»
dans les pages francophones de Google produit le chiffre de 592 résultats.
Parmi ceux-ci, on peut citer, en regardant les versions cachées de Google,
d'autres cas de cooccurrences concentrées. Par exemple (17):

Ou (18):


Ou encore (19):



|
Reprenons les phénomènes commentés ci-dessus
pour les résumer d'après la pratique courante du livre imprimé (deux premières
colonnes) et selon ce que nous considérons souhaitable dans la typographie du
Web (colonnes 1 et 3).
| Livre imprimé | Livre en ligne | |
|---|---|---|
| Justification de la marge droite | Oui | Non |
| Espaces durs | Oui | Oui |
| Police de caractères | Choisie par l'imprimeur | Choisie par le lecteur |
| Couleurs | Normalement noir sur blanc | Créateur: noir sur blanc ou similaire Lecteur: possibilité de changer |
| Oeil/machine | Lecture par l'oeil | Lectures par oeil et machine |
| Spatialité de la lecture | Lecture linéaire primaire et totale Lecture transversale secondaire et partielle |
Lectures linéaire et transversale primaires et totales |
| Spatialité de l'espace de lecture | Fixe | Variable |
4. Conclusion |
La typographie du Web cherche encore sa voie. La très grande majorité des réalisations de livres en ligne sont actuellement typographiquement imparfaites. Cet état des choses est dû en partie à la méconnaissance généralisée des exigences du médium, qui favorise lectures linéaire et transversale totales et qui pousse à remplacer l'imprimeur et l'éditeur par le lecteur dans la définition de la spatialité et de l'apparence du texte. Il est dû en partie également à l'utilisation de mauvais outils dans la production du texte.
![]()
| Références |
1 - Trésor de la langue française informatisé <http://atilf.atilf.fr/tlf.htm>.
2 - <http://clicnet.swarthmore.edu/litterature/classique/maupassant/fdp.html> .
3 - <http://maupassant.free.fr/textes/femmpaul.html> .
4 - <http://perso.wanadoo.fr/hypopolo/didac/nouvelle/vagabond.htm> .
5 - <http://clicnet.swarthmore.edu/litterature/classique/maupassant/bonheur.html>.
6 - <http://perso.wanadoo.fr/hypopolo/didac/nouvelle/folle.htm>.
7 - <http://www.contes.net/contes/maupassant/h39.html> (= lien mort).
8 - <http://www.fh-augsburg.de/~harsch/gallica/Chronologie/19siecle/Maupassant/mau_j_hi.html> .
9 - <http://maupassant.free.fr/textes/histoire.html>.
10 - Voir, par exemple, <http://www.chass.utoronto.ca/~wulfric/frebase/candide/>.
11 - Cf. R. Wooldridge, «Lectures-écritures verticales: construction culturelle», <http://www.chass.utoronto.ca/~wulfric/articles2/vertic94/index.html#4>.
12 - <http://clicnet.swarthmore.edu/litterature/classique/maupassant/pere.html> .
13 - <http://www.sccci.org.sg/announcements/AVACircular.doc> (= lien mort; on peut retrouver le texte en format HTML dans Google, en demandant, par exemple, +onuts +ocereals).
14 - <http://www.arteb.com/infos/Actualite/AFIB%20Program.pdf>.
15 - <http://www.dailyfacials.com/fr_CA/>.
16 - <http://tactweb.chass.utoronto.ca/french/enfant.htm>.
17 - Une Vie de Maupassant sur le site @ la lettre.
18 - «La Confession» de Maupassant, texte saisi par Thierry Selva, sur le site Athena.
19 - «Allouma» de Maupassant, texte en format PDF sur le site Pitbook.com.
2004
Voir dans l'encyclopédie de l'Astrolabe:
L'Avenir de la lecture interactive
Critique de la lecture informatique