LA TYPOGRAPHIE du WEB

Transcription

1 DOSSIERS de VEILLE TECHNOLOGIQUE J.C.Sohm URL : CERIG Avril 2000 LA TYPOGRAPHIE du WEB 5- Les feuilles de style Définition, structure et fonctionnalités des feuilles de style Définition. Les logiciels qui manipulent du texte (traitement de texte, tableur, et logiciel de mise en page) utilisent les styles. Pour que le HTML ne fasse plus exception à la règle, le W3C lui a rajouté cette fonctionnalité sous forme d'un complément appelé "feuilles de style en cascade" (en anglais : "Cascading Style Sheets", d'où le sigle CSS). Il y a eu deux versions successives de ces feuilles de style, respectivement intitulées CSS1 et CSS2. L'essentiel de la typographie est défini dans CSS1, la deuxième version concernant plus particulièrement l'impression multi-support. Structure. Une feuille de style se présente de la manière suivante : elle est constituée d'un ensemble de règles précisant la manière de présenter une page web ; chaque règle est constituée d'un sélecteur, suivi d'un bloc de déclarations. Le sélecteur précise la portion de texte à laquelle s'appliquent les déclarations ; chaque déclaration est constituée d'un identificateur, suivi d'une valeur. L'identificateur décrit la propriété concernée (ex : la couleur des caractères), et la valeur -- comme son nom l'indique -- la grandeur attribuée à l'identificateur (ex : rouge 255, 0, 0). Fonctionnalités. En matière de typographie, la norme CSS offre pratiquement les mêmes fonctionnalités qu'un bon logiciel de mise en page. C'est ainsi que l'on peut définir : la police utilisée, soit sous forme générique, soit sous forme spécifique (en indiquant le nom de la police, comme dans le HTML). Le téléchargement, total ou partiel d'une police, est même prévu ; le style : normal ou italique (déjà dans le HTML), ou oblique ; la casse (ex : transformation de minuscules en majuscules), et les petites majuscules ; les dimensions des caractères (taille, largeur, graisse), et leur couleur ; la décoration de texte : souligné, barré, clignotant (déjà dans le HTML) et surligné ; le positionnement vertical : indice, exposant (déjà dans le HTML) ; le crénage (distance entre caractères) et la distance entre les mots ; l'interlignage (distance entre lignes) ; l'ombre du texte (CSS2). (1 sur 5)

2 Application. L'implémentation des styles dans les navigateurs n'est pas satisfaisante du tout. Aucun navigateur ne met en oeuvre l'ensemble des spécifications CSS1, celui de Netscape (versions 4. x) étant plus pauvre encore que celui de Microsoft. Les deux navigateurs, de plus, ignorent complètement CSS2. De ce fait, comme le montre une étude du CERIG, il n'est pas recommandé d'utiliser les feuilles de style, du moins actuellement. Il faut donc que nous nous contentions pour l'instant de ce que le HTML nous offre en matière de typographie. La version 5 du navigateur de Netscape devait être publiée en 1999, et on espérait qu'elle implémenterait correctement les feuilles de style -- mais elle n'a jamais vu le jour. A l'heure où nous écrivons ces lignes, la version 6 est disponible en "preview" sur le site de Netscape, sous l'appellation "Netscape 6". L'éditeur explique que son navigateur se conforme aux normes en vigueur, en particulier pour les feuilles de style, mieux que celui de son rival Microsoft. En ce qui concerne la typographie, nos visiteurs jugeront par eux-mêmes. Pour chaque fonctionnalité examinée, nous avons noté le comportement d'internet Explorer 5 ("IE 5" en abrégé), celui de la version 4.7 de Communicator ("NS 4" en abrégé), et celui de la version provisoire de Netscape 6 ("NS 6" en abrégé). Remarque. Les feuilles de style prévoient que le concepteur d'une page web peut imposer ses choix à l'internaute, en particulier en matière de typographie. Il s'agit là d'une fonctionnalité très discutable, qui risque d'indisposer les internautes, et qu'il vaudrait mieux ne pas utiliser. Pour l'instant, la discussion reste académique, parce que cette fonctionnalité n'est pas implémentée dans les navigateurs. La police : nature et téléchargement Polices génériques. Il en existe cinq : avec ou sans empattements, à chasse fixe, fantaisie, cursive. Le texte ci-dessous illustre leur aspect. Pas de problème avec IE 5, mais dans le navigateur de Netscape, le résultat n'est pas fameux ; sa propriété caractéristique fait totalement défaut à la police fantaisie, et la police cursive ne court pas... qu'il s'agisse de NS 4 ou de NS 6. Police avec empattements Police sans empattements Police à chasse fixe Police fantaisie Police cursive Polices spécifiques. Celles-ci peuvent être précisées par leur nom, comme en HTML, mais avec la syntaxe propre aux feuilles de style. Téléchargement. A la différence du HTML, les feuilles de style prévoient le téléchargement de polices. Ce dernier peut même être partiel -- les seuls caractères latins, par exemple, dans une police qui comprend également des caractères cyrilliques et arabes. Les navigateurs, malheureusement, n'implémentent pas cette fonctionnalité, comme le montre l'exemple suivant. La première ligne du texte ci-dessous fait appel à la police BangaSSK (qui n'est pas courante et ne se trouve probablement pas sur votre machine), la deuxième ligne fait appel à la police par défaut, et la troisième ligne à la police Arial, qui se trouve sur toutes les machines. Si les navigateurs implémentaient le téléchargement de police, le fichier correspondant (banga.ttf, qui pèse 35,5 Ko), serait chargé avec la présente page web, et les deux premières lignes ci-dessous vous apparaîtraient différentes. Vous constaterez qu'il n'en est rien, quelle que soit la version de votre navigateur. (2 sur 5)

3 Téléchargement de police? Pas de téléchargement de police Police Arial, présente sur toutes les machines La casse, le style La transformation de la casse. Les feuilles de style permettent de modifier la casse d'un texte, quelle que soit sa valeur d'origine. Comme le montrent les exemples ci-dessous, on dispose de quatre possibilités : Écrire en petites majuscules TRANSFORMer les MAJUSCULES en MINUSCULES Transformer les minuscules en majuscules Transformer les initiales de chaque mot en majuscule Tout marche dans IE 5 et dans NS 6, mais pas dans NS 4 qui ignore les petites majuscules. Le style. Le texte ci-dessous montre que IE 5 et NS 6 ne font pas la différence entre les valeurs "italique" et "oblique", et que NS 4 ne reconnaît pas la valeur "oblique". Texte normal Texte italique Texte oblique Les propriétés du caractère : corps, chasse, graisse et couleur Le corps (ou taille) des caractères. Le texte ci-dessous montre que les feuilles de style ne sont pas limitées au sept tailles standard du HTML. On notera que les tailles inférieures à 8 points sont pratiquement illisibles à l'écran. Caractères de 8 pts Caractères de 10 pts Caractères de 20 pts Caractères de 30 pts Caractères de 40 pts Caractères de 50 pts La chasse (ou largeur) des caractères. Les feuilles de style permettent - du moins dans leurs spécifications - le réglage de la largeur des caractères. Les navigateurs n'en tiennent pas compte, comme vous pouvez le constater sur le texte ci-dessous. Caractères condensés? Caractères normaux Caractères étendus? La graisse (ou épaisseur) des caractères. Les feuilles de style permettent également de définir la graisse d'un caractère, c'est à dire son épaisseur. La graduation va de 100 à 900. La valeur 300 correspond au caractère normal, et la valeur 700 au caractère gras. Le texte ci-dessous vous montre comment votre navigateur tient compte des indications de graisse (mal, n'est-ce pas?). (3 sur 5)

4 graisse = 100 graisse = 200 graisse = 300 graisse = 400 graisse = 500 graisse = 600 graisse = 700 graisse = 800 graisse = 900 La couleur des caractères. Les feuilles de style permettent de définir la couleur des caractères, mais le HTML en fait autant (avec une syntaxe différente) : Texte de couleur rouge Texte de couleur verte Texte de couleur bleue La décoration, le marquage, le masquage, l'encadrement La décoration. Le HTML permet de souligner, barrer et faire clignoter du texte. Les feuilles de style ajoutent le surlignement (ainsi que la possibilité de souligner et surligner simultanément). Voici ce que l'on obtient (dans IE, le texte ne clignote pas) : Texte souligné, Texte surligné, Texte souligné et surligné Texte barré, Texte clignotant Le marquage. Il est possible de marquer une portion de texte avec la couleur de son choix, comme on le fait sur du papier avec un "marqueur". L'exemple ci-dessous montre le résultat obtenu : Texte marqué en jaune à titre d'exemple Le masquage. Il est possible de masquer du texte, comme le montre l'exemple suivant, lequel fonctionne avec IE 5 et NS 6, mais pas avec NS 4 : Le mot entre parenthèses (non visible?) est masqué Cette procédure permet de faire en sorte qu'un mot soit présent dans une page web sans que l'internaute le voit. On peut obtenir le même résultat en HTML, en utilisant du texte de même couleur que le fond de la page. Certains concepteurs de site s'en servent pour faire du "spam indexing". Cette façon de procéder n'est pas appréciée des moteurs de recherche, qui vont jusqu'à refuser d'indexer les pages correspondantes. L'encadrement. On peut encadrer du texte, comme devrait le montrer l'exemple ci-dessous : Le mot suivant est encadré à titre d'exemple En fait, on constate que cela ne marche pas dans IE 5, que NS 4 s'obstine à faire des retours à la ligne avant et après l'encadrement, malgré la présence d'une balise <nobr>, et que seul NS 6 traite l'exemple correctement. (4 sur 5)

5 Le positionnement vertical : indice et exposant, interlignage Indice et exposant. Comme le HTML, les feuilles de style permettent de placer du texte en indice et en exposant (et de le rendre plus petit). Cela fonctionne dans IE 5 et dans NS 6, mais pas dans NS 4, comme le montre l'exemple ci-dessous : Texte en indice Texte en exposant Interlignage. L'interlignage du texte ci-dessous est réglé à l'aide d'un style. Si vous disposez d'une version relativement récente de l'un des deux navigateurs, vous observerez que l'interligne varie comme précisé. Avec une version plus ancienne (ex : une version 3 de Navigator), vous n'observerez aucune différence. normal de 140 % de 180 % de 220 % Pour pallier cette dernière difficulté, certains auteurs parsèment leur texte d'espaces définis dans une police de taille supérieure. Il faut une fameuse patience pour agir ainsi! De plus, l'internaute peut s'étonner de voir que tous les espaces n'ont pas la même largeur. Néanmoins, voici ce que l'on obtient avec cette méthode (le chiffre entre parenthèses indique la taille de l'espace situé entre les deux derniers mots) : est normal est accru (4) est accru (5) est accru (6) Le positionnement horizontal : crénage et distance entre mots Le crénage. Le crénage du texte ci-dessous est réglé à l'aide d'un style. De ligne en ligne, vous devriez voir la distance entre caractères s'accroître de manière régulière. C'est bien ce que vous observerez si vous utilisez IE 5 ou NS 6. Avec NS 4, vous ne verrez pas de différence d'une ligne à l'autre : Texte sans réglage du crénage. Texte avec réglage du crénage (1 pt). Texte avec réglage du crénage (2 pts). Texte avec réglage du crénage (3 pts). Texte avec réglage du crénage (4 pts). Texte avec réglage du crénage (5 pts). La distance entre les mots. IE 5 et NS 4 ne règlent pas la distance entre mots, mais NS 6 la règle, comme le montre l'exemple ci-dessous. Mots espacés normalement Mots plus espacés? Copyright CERIG/EFPG (5 sur 5)