banniere

WebLettres classiques

Publier du grec ancien

Responsable de ces pages : François Giroud

Τίς τὸν Διὸς σύλλεκτρον οὐκ οἶδεν βροτῶν... 
Euripide, Héraclès, 1 (N.B.)

Page 1 - Page 2 - Page 3 - PAGE 4 - Page 5

La permutation des feuilles de style

Contourner l'ordre impératif des polices de caractère. Comment permettre au visiteur de choisir la police dans laquelle le grec va être affiché ? En effet, nous avons vu page 2 que l'ordre de déclaration des polices, soit entre les balises de style soit dans la feuille de style (fichier à part avec l'extension ".css"), est suivi par le navigateur : la première police de cette liste qu'il rencontre dans le système du visiteur est adoptée, et il ne va pas jusqu'au bout de l'énumération. Si donc vous placez "Arial unicode MS" avant "Code2000", et que l'internaute a les deux, c'est l'Arial qui l'emportera, et réciproquement. Pour éviter au visiteur de toucher à la configuration du navigateur, plusieurs possibilités se présentent :

  1. Sous php, on peut offrir de taper carrément la police de son choix, et de conserver cette préférence sur toutes les pages. Mais il faut une bonne maîtrise de la programmation.
  2. A l'aide du langage javascript, on peut proposer un choix de polices, et la modification de l'affichage sera instantanée (je veux dire, sans recharger la page) ; la façon la plus transparente et la moins lourde de procéder est le changement de feuille de style. C'est ce que je vais détailler ici.

Des feuilles de style multiples. Pour pouvoir permuter des feuilles de style, encore faut-il en avoir plusieurs, et même au moins une. Petit rappel de la page 2, avec quelques compléments...

  1. Une feuille de style minimale comportera, pour notre exemple :
    .grec { font-family: "Arial Unicode MS", "Galatia SIL", "Tahoma", "Galilee Unicode Gk", "Athena Unicode", "Gentium", "Porson", "Cardo", "Caslon", "Monospace", "jGaramond", "MgOldTimes UC Pol", "Alphabetum", "Vusillus Old Face", "Code2000", "Titus Cyberbit Basic"; }
    ... et vous enregistrez cela sous le nom de "grec.css".
  2. Et puis vous créez un autre fichier, "palatino.css", avec le même contenu mais un autre ordre :
    .grec { font-family: "Tahoma", "Arial Unicode MS", "Galatia SIL", "Galilee Unicode Gk", "Athena Unicode", "Gentium", "Porson", "Cardo", "Caslon", "Monospace", "jGaramond", "MgOldTimes UC Pol", "Alphabetum", "Vusillus Old Face", "Code2000", "Titus Cyberbit Basic"; }
  3. Et puis vous en créez encore un autre, "vusillus.css", avec encore un autre ordre :
    .grec { font-family: "Vusillus Old Face", "Arial Unicode MS", "Galatia SIL", "Tahoma", "Galilee Unicode Gk", "Athena Unicode", "Gentium", "Porson", "Cardo", "Caslon", "Monospace", "jGaramond", "MgOldTimes UC Pol", "Alphabetum", "Code2000", "Titus Cyberbit Basic"; }

Le javascript pour gérer la permutation. Maintenant, il faut que le navigateur aille chercher une de ces feuilles de style, et soit capable d'en adopter une autre avec une commande simple. Pour cela, il faut créer un fichier nommé par exemple "police.js" (attention à l'extension ".js", qui renvoie à un javascript), avec le contenu suivant :

function regleStyle(title) {
   var i, a, main;
   for(i=0; (a = document.getElementsByTagName("link")[i]); i++) {
     if(a.getAttribute("rel").indexOf("style") != -1
        && a.getAttribute("title")) {
       a.disabled = true;
       if(a.getAttribute("title") == title) a.disabled = false;
     }
   }
}

(Cette fonction, publiée chez "alistapart" par Paul Sowden et largement appuyée sur le travail de Peter-Paul Koch, semble la meilleure possible actuellement.)

On retourne dans l'en-tête de votre document principal (<head>[quelque chose]</head>) pour y ajouter les lignes :

<script language="JavaScript"
        type="text/javascript"
        src="police.js">
</script>

Déclarer les différentes feuilles de style. Désormais, le navigateur ira charger votre fichier "police.js" comme contenant une fonction en javascript. On reste dans l'en-tête pour y ajouter encore :

<link rel="stylesheet"
      href="grec.css"
      title="normal"
      type="text/css">
<link rel="alternate stylesheet"
      href="palatino.css"
      title="palatino"
      type="text/css">
<link rel="alternate stylesheet"
      href="vusillus.css"
      title="vusillus"
      type="text/css">

A présent, les trois feuilles de style sont déclarées, la première est celle chargée par défaut, les autres (qualifiées d'alternate) offrent des styles de rechange.

Les liens dans le corps du document. Dernière étape : entre les balises <body> et </body>, nous allons par exemple créer 3 liens. Lorsqu'il existe plusieurs feuilles de style, le navigateur devrait nous permettre le choix : Mozilla fait ce qu'il peut, Internet Explorer, rien ; il vaut donc mieux ajouter les lignes ci-dessous, à toutes fins utiles :

<a href="#" onclick="regleStyle('normal'); return false">Arial Unicode</a>
<a href="#" onclick="regleStyle('palatino'); return false">Palatino</a>
<a href="#" onclick="regleStyle('vusillus'); return false">Vusillus</a>

Travaux pratiques. Vous pouvez constater le résultat en ouvrant l'exemple joint ; si vous n'avez pas les trois polices en question, allez voir quand même : la couleur de fond, la taille de la police et la bordure vous permettront de constater que cela marche ! Par ailleurs, vous savez faire : affichez le code source de cette nouvelle fenêtre (par le clic droit ou le bouton "Edition"), enregistrez-le comme document portant l'extension ".htm" ou ".html", et modifiez entre <head> et </head> les noms (title="..."), et les adresses (href="...") des feuilles de style, puis créez celles-ci comme indiqué, ou modifiez-en le contenu par rapport aux polices dont vous disposez...

Mais le visiteur devra refaire son choix à chaque page, me direz-vous ? Rassurez-vous, non ! C'est l'objet de la page 5 !


N.B. Si le grec ne s'affiche pas correctement, soit vous ne disposez pas d'une police unicode dotée des caractères grecs, soit celle que vous détenez m'est inconnue et je vous invite à me le faire savoir pour que je l'ajoute, soit votre navigateur est mal configuré...


Page 1 - Page 2 - Page 3 - PAGE 4 - Page 5



contact Contact - Qui sommes-nous ? - Album de presse - Aider WebLettres - S'abonner au bulletin - Faire un lien - WebLettres sur Twitter


© WebLettres 2002-2017