Vu du travail, avec Internet Explorer, mon sommaire est illisible, parce que la taille des polices est trop petite. J'avais trouvé une page expliquant et comparant les différentes présentations possibles des navigateurs en fonction des tailles de polices définies, mais je ne trouve plus ma source. Toujours est-il que mes pourcentages ne marche pas ou alors je n'ai pas tout compris.
Mon but est très simple : je veux que le sommaire se différencie du corps de la page. J'ai défini pour cela deux familles de polices dans ma feuille de style, une pour l'ensemble de la page
body {
font-family: Times, serif;
}
et une autre pour le sommaire
#sommaire {
font-family: Lucida, Verdana, Helvetica, Arial, sans-serif;
}
Le nom des polices correspond aux polices éventuellement disponibles
sur le poste du lecteur. Si aucune police n'est disponible, l'agent
utilisateur se rabat sur la famille générique. Ainsi, si vous n'avez pas
de police nommée Times, le navigateur utilisera le nom de
famille générique serif pour fournir un équivalent (par
exemple Times New Roman).
Pour accentuer cette différence, je veux que la taille du sommaire soit inférieure à la taille du corps de la page. Pour cela, je peux soit définir des tailles absolues (en centimètre ou en point par exemple), inutilisable pour le média écran mais utile pour l'impression, soit définir des tailles relatives (en pixel ou en carré typographique par exemple). Ce sont ces dernières que je vais utiliser. Mais quelles unités relatives choisir ? Il suffit de respecter le choix de l'utilisateur.
Ainsi, les valeurs en pixel dépendent de la résolution de l'écran du
lecteur. Si le lecteur a fixé la taille de la police à 16 pixels, on
peut supposer qu'il a ses raisons (son confort de lecture par exemple).
Pourquoi vouloir alors lui infliger une taille de 12 pixels ?
On va supposer que le lecteur est intelligent et utiliser des valeurs en
carré typographique. En rajoutant dans la feuille de style une propriété
font-size, pour toute la page
body {
font-family: Times, serif;
font-size: 1em;
}
et pour le sommaire
#sommaire * {
font-size: .9em;
}
je définis une taille de police relative au choix de l'utilisateur.
Avec 1em, ce choix est respecté quelle que soit la taille
définie en pixel (16 pixels dans mon exemple). Avec
.9em, j'indique au navigateur une taille de police plus
petite, toujours relativement à la taille choisie au départ, mais je
laisse le navigateur faire le calcul. J'arrive ainsi au but voulu.
Il existe d'autres possibilités, comme smaller ou
larger, mais elles n'ont pas l'air de fonctionner
correctement.
Ma feuille de style est maintenant stabilisée. Il me reste toutefois à
styler des balises que j'ai employé récemment, comme del et
ins, et d'autres dont l'affichage ne me plaît pas comme
dt et dd.
