Il s'agit ici d'un article traduit de l'allemand par la rédaction de SELFHTML actuel. Veuillez poser vos questions relatives à cet article uniquement à son auteur, prenant compte que celui-ci ne maîtrise peut-être pas la langue française!
L'article propose une vue d'ensemble sur les différentes formes d'affichage des polices sur des systèmes Windows/Mac, en se concentrant sur les tailles indiquées en pixel, points et em (taille de police propre à l'élément).
Brièvement, le hic dans l'histoire réside dans le fait que les systèmes Windows et Mac utilisent de différentes résolutions d'écran. Windows calcule la résolution avec 96 dpi (dot per inch = points par pouce) et Mac avec 72 dpi. La taille physique de l'écran ainsi que la résolution configurée par l'utilisateur doivent également être prises en considération. Ne pas oublier non plus: quel est le navigateur qu'utilise l'internaute (Explorer Internet MS, Navigateur Netscape, Opera, Mozilla, etc.).
La démonstration la plus simple serait possible, si vous pouviez contemplez la même page Web d'un côté avec un système Windows et de l'autre avec un Mac. Avec Windows, les polices sont bien plus grandes qu'avec le Mac. De par ces différences considérables, l'apparence d'une page pourra être entièrement détruite, ou alors, l'internaute devra utiliser des aides à la vue afin de déchiffrer les informations contenues. Dans le paragraphe suivant, examinons quelques unités de taille de police:
Un point (anglais: point) est le soixante-douzième d'un pouce (1/72). Sur un système Mac avec une résolution de 72 dpi un point serait donc exactement un point d'image (Pixel), sur un ordinateur avec Windows en revanche 1,3 Pixel. Nous expliquerons ceci à l'aide de calculs plus bas, suivons pour l'instant le raisonnement.
Mac 1 pt = 1 px
Windows 1 pt = 1,3 px
Mac 10 pt = 10 px
Windows 10 pt = 13 px
S'ajoute à cela que le navigateur Netscape, dans sa version 4.x, représente les points plus petits, autant sur Mac que Windows, que l'Explorer Internet MS. Ceci provoque entre autres des différences d'affichage d'importance non négligeable. En conséquence, il faudrait indiquer la taille des polices de telle façon que celles-ci restent lisibles sur les deux systèmes - ou alors utiliser une reconnaissance préalable du navigateur employé, soit côté utilisateur (par exemple avec JavaScript), soit côté serveur (CGI). Une reconnaissance du navigateur vous livre le type de navigateur ou même le système utilisé par l'internaute et, selon la configuration, vous permet d'attribuer les mentions de feuille de style correspondantes. Un tel aiguillage (anglais: browsersniffer = renifleur de navigateur) est souvent réalisé à l'aide de JavaScript. Vous trouverez un 
exemple concret plus bas dans cet article.
D'abord, nous allons démontrer notre raisonnement à l'aide d'exemples de calcul.
 |
Un point = 1/72 ième d'un pouce (cette unité existe depuis bien avant les ordinateurs)
MAC:
MAC = 72 dpi (72 points par pouce)
1 point = 1/72 pouce (1/72 ième d'un pouce)
1
72 x -- = 1 Pixel
72
Ceci signifie que le soixante-douzième d'un pouce correspond, sur un système MacIntosh, à exactement 1 point d'image (Pixel).
WINDOWS:
Windows = 96 dpi (96 points par pouce)
1 point = 1/72 pouce (1/72 ième d'un pouce)
1
96 x -- = 1,333333333333333333(périodique)
72
= 96 : 72 = 1,33 points d'image = 1,3 Pixel
Ceci signifie à son tour que le soixante-douzième d'un pouce correspond, sur un système Windows, à 1.33 points d'image (Pixel).
Pour ceux qui désirent savoir tout exactement:
MAC:
1 point = soixante-douzième d'un pouce (1/72) = 0,013888888888888888888888888888889 pouces = 1 pixel
1 pouce
-- = 1 pixel = 0,013888888888888888888888888888889 pouce x 72 (graphique large de 72 pixel) = 1,0 pouce
72 dpi (ou PpI = pixel par pouce)
1 pixel est donc 0,013888888888888888888888888888889 pouce sur un MacIntosh.
WINDOWS:
1 pixel = quatre-vingtseizième d'un pouce (1/96) = 0,010416666666666666666666666666667 pouces
1 pouce
-- = 1 pixel = 0,010416666666666666666666666666667 pouce
96 dpi (ou PpI = pixel par pouce)
1 pixel est donc 0,010416666666666666666666666666667 pouce sur un système Microsoft Windows.
Résumé:
Si les polices sont affichées sur un MacIntosh d'une taille d'1/3 plus petite que sur un système Windows, serait-il possible de définir des fichiers de feuilles de style qui compenseraient cette différence?
Le pixel est l'unité généralement favorisée pour sortir de ce dilemme, et ceci à juste titre. Un pixel est un point d'image sur l'écran: un pixel est toujours un point d'image - sur MacIntosch, Windows, Linux et téléphones mobiles ;-)...
Une police d'une taille de 12px ne laissera reconnaître que de légères différences sur les deux systèmes. L'unité "pixel" propose donc semble-t-il une possibilité simple de définir des feuilles de style pour de nombreuses plates-formes.
L'unité pixel est-elle donc la solution à tous les problèmes?
Définir les polices en pixel offre aux créateurs de pages Web la possibilité d'obtenir rapidement le succès voulu sur chacune des plates-formes - mais avec cependant quelques inconvénients. Si vous définissez vos tailles de police en pixel, vous mettez en quelque sorte les visiteurs "sous tutelle". Si la plus grande part d'entre eux sûrement utilise les tailles standard proposées par leur navigateur, qu'en est-il du reste? Si vous privez vos visiteurs de la possibilité d'adapter la taille d'affichage de la (ou des) police(s) à leurs besoins, ceux-ci ne pourront peut-être pas lire vos pages et quitteront vite votre site, à la recherche de pages plus lisibles.
Vous trouverez sur 
http://www.alistapart.com d'intéressants articles plaidant pour les définitions en pixel.
Le consortium W3 recommande l'utilisation de "em".
L'unité "em" (taille de "M") devrait être connue des typographes: "em" correspond à l'unité employée en typographie "Geviert". "em" est une unité en relation avec la taille de police propre à l'élément. C'est à dire que pour une hauteur de police de 12 points, 1 em équivaut à 12 pt. Ou, dit d'une autre façon, 1 em = la taille police réglée par défaut du navigateur. "em" est, comparable à "ex" (la hauteur du "x" minuscule représente und "demi geviert") et aux définitions en pourcentage (par exemple: font-size:120%), une unité relative. L'utilisation de "em" dans les mentions de feuilles de style est très intéressante, car le visiteur a le contrôle total sur la taille de la police affichée, et de plus, n'existent que peu de différences entre les navigateurs sous Windows (Windows 98 SE + MSIE 5.0, 5.5, NN 4.76, Opera 5.11; Windows ME + IE 5.5, NN 4.76, Opera 5.11; NT + IE 5.0) . En élevant la taille d'affichage d'un tiers, on peut définir des feuilles de style pour Mac et Linux, de manière à obtenir des pages formatées tout au moins lisiblement.
| |
Comme unité pour définir la taille des polices sera utilisé "em". Le but de l'exercice est de créer une page Web et deux feuilles de style (un fichier CSS pour Windows et un pour MacIntosh).
Les feuilles de style seront par la suite attribuées grâce à un aiguillage réalisé à l'aide de JavaScript.
Faites à l'aide de votre éditeur habituell une page Web contenant quelques repères de base (H1, H2, p, ...).
Exemple:
Exemple d'affichage: aperçu
<html>
<head>
<title>Le document HTML</title>
<meta name="author" content="Michael Jackson">
<meta http-equiv="Content-Style-Type" content="text/css">
<!-- C'est à cet endroit que sera placé l'aiguillage JavaScript -->
</head>
<body text="#000000" bgcolor="#FFFFFF" link="#333300" alink="#333300" vlink="#333300"
background="arriereplan.gif" leftmargin="20" topmargin="16" marginwidth="0"
marginheight="0">
<h1>Un titre numéro 1</h1>
<img src="regle.gif" width="557" height="16"><br>
<h2>Un titre numéro 2</h2>
<img src="regle.gif" width="557" height="16"><br>
<h3>Un titre numéro 3</h3>
<img src="regle.gif" width="557" height="16"><br>
<h4>Un titre numéro 4<br>
<img src="regle.gif" width="557" height="16"><br>
</h4>
<p><b>Un paragraphe avec quelques lignes de texte:</b>
intra ducentos annos Hipparchi sagacitate compertum est et lunae defectum
aliquando quinto mesne a priore fieri, solis vero septimo, eundem bis
in XXX diebus super terras occultari, sed ab aliis hoc cerni, quaeque sunt
in hoc miraculo maxime mira, cum conveniat umbra terrae lunam heetari,
nunc ab occasus parte hoc ei accidere, nunc ab exortus, quanam ratione,
cum solis exortu umbrae illa hebetatrix sub terra esse debeat, semel iam
acciderit ut in occasu lunae deficeret utroque super terram conspicuo sidere.
nam ut XV diebus utrumque sidus quaereretur, et nostro aevo accidit imperatoribus
Vespasianis patre III. filio consulibus.</p>
</body>
</html>
|
Explication:
L'exemple présenté ici est un petit fichier HTML qui sert de démonstration. Les graphiques contenus dans le fichier (les règles de mesure) servent à montrer à peu près les différences de taille. L'aiguillage navigateur ainsi que les fichiers CSS seront incorporés plus tard.
Créez un fichier CSS contenant vos formatages. Tout d'abord pour votre système - et ensuite pour le système alternatif. Selon le système pour lequel vous avez défini vos feuilles de style en premier (Win ou Mac), vous devez recalculer les tailles de police.
Un petit exemple (calcul de Windows à Mac):
La taille de police des repères body,td (Win) est de 0.8em
La taille de police des repères body,td est de 1.06em pour les feuilles de style destinées au MacIntosh.
0.8 x 1.33 = 1.064 em
Exemple:
Exemple d'affichage: aperçu
/* Ce fichier est le fichier CSS pour Windows (win.css) */
BODY, TD {
background-color: #CCCC33;
color: #663300;
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
font-size: 0.8em;
}
/* Les titres */
H1, H2, H3, H4, {
background-color: transparent;
color: #663300;
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
}
H1 {
font-size: 1.8em;
}
H2 {
font-size: 1.3em;
}
H3 {
font-size: 1.1em;
}
H4 {
font-size: 0.7em;
}
/* Chaque paragraphe est justifié et se voit attribuer une marge de 3 em */
P {
margin-left: 3em;
text-align: justify;
}
/* Formatage des liens (Remarque: NN 4.x ne connait ni l'attibut HOVER
ni de formatage pour ACTIVE) */
A:link {
background-color: transparent;
color : #CC6633;
text-decoration :underline;
}
A:visited {
background-color: transparent;
color : #CC6633;
text-decoration :underline;
}
A:hover {
background-color: transparent;
color : #663300;
text-decoration :none;
}
A:active {
background-color: transparent;
color : #663300;
text-decoration :none;
}
|
Explication:
Les feuilles de style pour Windows (win.css) contiennent tous les formatages nécessaires.
Le fichier CSS est incorporé avec <link rel="stylesheet" href="win.css" type="text/css"> dans l'entête du fichier HTML <head></head>.
Voir à ce sujet 
définir un format global dans un fichier CSS séparé
Dans les feuilles de style pour le MacIntosh (win.css),la taille des polices es simplement élevée d'un tiers (1/3) ou multipliée par 1,33.
Exemple:
Exemple d'affichage: aperçu
/* Ce fichier est le fichier CSS pour le Macintosh */
BODY, TD {
background-color: #CCCC33;
color: #663300;
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
font-size: 1.06em;
}
/* Les titres */
H1, H2, H3, H4, {
background-color: transparent;
color: #663300;
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
}
H1 {
font-size: 2.39em;
}
H2 {
font-size: 1.72em;
}
H3 {
font-size: 1.46em;
}
H4 {
font-size: 0.93em;
}
/* Chaque paragraphe est justifié et se voit attribuer une marge de 3 em */
P {
margin-left: 3em;
text-align: justify;
}
/* Formatage des liens (Remarque: NN 4.x ne connait ni l'attibut HOVER
ni de formatage pour ACTIVE) */
A:link {
background-color: transparent;
color : #CC6633;
text-decoration :underline;
}
A:visited {
background-color: transparent;
color : #CC6633;
text-decoration :underline;
}
A:hover {
background-color: transparent;
color : #663300;
text-decoration :none;
}
A:active {
background-color: transparent;
color : #663300;
text-decoration :none;
}
|
Erläuterung:
Les feuilles de style pour le MacIntosh (autres.css) sont la copie exacte de celles pour Windows - à la différence que les tailles de police ont été élevées de 33%.
Après avoir édité le ficher HTML, le fichier CSS pour Windows et le fichier CSS pour le Mac, nous pouvons maintenant nous occuper de l'aiguillage pour navigateurs. L'aiguillage est un petit script qui fournit au navigateur employé par le visiteur le fichier de feuilles de style approprié. Un tel aiguillage peut être réalisé côté utilisateur (anglais: client-side) à l'aide par exemple de JavaScript, d'applet Java, etc. - ou alors côté serveur (anglais: server-side) par l'intermédiare de CGI: scripts Perl, PHP ou Server Side Includes.
Pour notre exemple, nous utiliserons un aiguillage "client-side" - donc fonctionnant directement sur le navigateur de l'utilisateur. Cet aiguillage est réalisé à l'aide de JavaScript.
Exemple:
...
<head>
<script language="JavaScript" type="text/javaScript">
<!--
if ((navigator.appVersion.indexOf("Win") != -1)) {
document.write("<LINK REL=\"stylesheet\" HREF=\"win.css\" TYPE=\"text/css\">"); }
else {
document.write("<LINK REL=\"stylesheet\" HREF=\"autres.css\" TYPE=\"text/css\">"); }
// -->
</script>
</head>
...
|
Explication:
Ce script recherche quel est le système opérationnel du visiteur et fournit au navigateur le fichier de feuilles de style en conséquence. Si (if) l'utilisateur travaille avec un système Windows, est attribué à l'aide de document.write le fichier CSS pour Windows (win.css); sinon (else), c'est le fichier CSS alternativ (autres.css) qui sera chargé. Ce petit JavaScript doit être incorporé à l'intérieur des repères <head></head>.
Pour réduire la longueur du code de votre fichier ou si vous désirez employer l'aiguillage sur beaucoup de pages de votre site, vous pouvez définir un fichier JavaScript (suffixe: .js) externe.
Voir à ce sujet: JavaScript dans des fichiers distincts
Si dans son navigateur le visiteur a déactivé JavaScript, l'aiguillage expliqué ci-dessus ne pourra naturellement pas entrer en fonction, et il ne pourra être affecté de fichier CSS. Un aiguillage réalisé à l'aide de PHP résouds le problème, car la recherche du système opérationnel se fait côté serveur (server-side). Ensuite, la référence au fichier CSS approprié est écrite directement dans le code HTML.
Exemple:
<?php
// **CODE À COPIER À PARTIR D'ICI** (dans un fichier externe)
if (eregi('Win',$HTTP_USER_AGENT))
echo "<link rel=\"stylesheet\" href=\"http://www.votresite.xy/chemin/win.css\" type=\"text/css\">\n";
else
echo "<link rel=\"stylesheet\" href=\"http://www.votresite.xy/chemin/other.css\" type=\"text/css\">\n";
//**FIN CODE À COPIER**
?>
|
Explication:
Ce script recherche quel est le système opérationnel du visiteur et fournit au navigateur le fichier de feuilles de style en conséquence. Si (if) l'utilisateur travaille avec un système Windows, est attribué à l'aide de echo le fichier CSS pour Windows (win.css); sinon (else), c'est le fichier CSS alternativ (autres.css) qui sera chargé. Le script doit être incorporé à l'intérieur des repères <head></head>.
Pour réduire la longueur du code de votre fichier ou si vous désirez employer l'aiguillage sur beaucoup de pages de votre site, vous pouvez définir un fichier externe pour le script PHP. Le fichier externe est un simpe fichier texte ayant reçu le suffixe: .inc et contenant le code PHP. Dans le fichier HTML, il est appelé à l'aide de l'instruction <?php include("chemincomplet/fichier.inc");?>.
Il est recommandé de référencer les fichiers CSS de façon absolue (chemin ou URL complets), ceci offrant l'avantage de pouvoir utiliser l'aiguillage sur des fichiers HTML se trouvant dans un autre répertoire que les fichiers CSS.
Ce script ne fonctionne que si PHP est installé sur votre serveur WWW. Le fichier HTML doit également être renommé en votrefichier.php
Vous trouverez un manuel PHP à: 
http://php.net/manual/fr/.
Grâce à l'aide active de serviables visiteurs du forum (je remercie à cet endroit Eddi Walker, Gero Takke et Roman Sonnleithner), j'ai pu obtenir des capture d'écran faites sur des systèmes MacIntosh et Linux (moi-même ne possédant que Windows comme système opérationnel).
Exemple d'affichage: captures d'écran Linux und Mac
Vu que Mac et Linux travaillent avec la même résolution, un fichier CSS pour le Mac devrait fonctionner pareillement avec Linux (voir les captures).
Why Windows Web Pages Have Tiny Text
Working with Fonts
Engineering College of Copenhagen. Department of Electronics
and Information technology (browsersniffer)
A List Apart: Past Issues
Schriftarten: Größen - Vergleiche
Resolution to Monitor Size Chart
The Windows/Mac font-size problem
Note de l'auteur:
Je serais très heureux si vous vouliez partager votre savoir avec moi. Connaissez-vous des pages Web informant à ce sujet (des pages en français seraient les bienvenues pour compléter la liste ci-dessus); avez-vous d'autres tuyaux intéressants pour remédier au problème? Veuillez me contacter!
Amicalement
René Grassegger
rene@grassegger.at
© 2001-2005 Informations
SELFHTML actuel 
