Les cours css : Les unités de longueurs

Page d'introduction

Les unités absolues

Définition

Il existe plusieurs unités de longueurs absolues :
- pt, point (mesure typographique). Le point est égal à 1/72 de pouce.
- pc, pica (mesure typographique). Un pica est égal à 12 points.
- in, pouce (inch). Un pouce est égal à 2.54 cm, 6 picas est égal à pouce.
- cm, centimètre
- mm, millimètre
Descendre
Remonter

Les unités relatives

Définition

Il existe plusieurs unités de longueurs relatives :
- em, m-length.
- ex, x-height.
- px, une quantité de pixels, en fonction de l'appareil de visualisation.
Descendre
Remonter

L'unité relative em

L'unité relative em se base sur la hauteur de la police (fonte).

Par défaut, l'unité relative em prendra comme hauteur de la taille de police (font) du navigateur spécifiée par défaut ou par l'utilisateur (via la roulette de la souris / affichage->taille de texte).
Autrement, l'unité relative em se basera sur la valeur de font-size du bloc parent.
L'unité relative em ne varie pas suivant la fonte (police).

En règle générale notre navigateur est paramétré sur une taille moyenne ce qui correspond à la valeur de font-size medium (pour le w3c), cependant cette valeur par défaut varie suivant le navigateur par exemple Internet explorer à une valeur à small.

Dans le cas d'éléments imbriqués l'unité relative em se base sur la valeur de 'font-size' du bloc parent.


L'unité relative 1 em correspond à 100% de la taille de la police par défaut.
L'unité relative 1.2 em correspond à 120% de la taille de la police par défaut.
L'unité relative 0.7 em correspond à 70% de la taille de la police par défaut.

Mettre vos tailles de polices en unité relative em améliore l'accessibilité de vote site web.

L'unité relative em est nommée " cadratin " en typographie française. Anciennement le cadratin correspond à la hauteur d'un caractère de plomb utilisé dans l'imprimerie.
Descendre
Remonter

L'unité relative ex

L'unité relative ex se base sur la hauteur de la lettre minuscule "x" de la police (fonte).

Par défaut, l'unité relative ex prendra comme hauteur de la taille de police (font) du navigateur spécifiée par défaut ou par l'utilisateur (via la roulette de la souris / affichage->taille de texte).
Autrement, l'unité relative ex se basera sur la valeur de font-size du bloc parent.

L'unité relative ex varie suivant la fonte (police).

Mais voila, cela ne colle pas à la réalité des navigateurs. En effet Internet Explorer ou Opera considèrent que 1ex = 0.5em quant à Netscape ou Firefox , ils essaient de déterminer la hauteur de l'unité relative ex en se basant sur les informations contenues par la fonte.
En clair, l'unité relative ex n'est pas fiable.
Descendre
Remonter

Les unités en pourcentage

Définition

Vous pouvez aussi utilisez les pourcentages.
Par défaut, un pourcentage est positif mettre 10% revient à dire +10%. Il ne faut donc pas spécifier le +. Mais le pourcentage peut être négatif dans ce cas vous devez mettre un - (-10%).

Le pourcentage se fait toujours par rapport à une autre valeur qui est celle du bloc parent.
Pour la longueur par exemple, si vous spécifiez un bloc de taille 50% (width:50%); la taille de ce bloc fera 50% de la taille de son parent.
Le padding n'est pas inclus. Dans l'exemple suivant la hauteur et longueur du bloc "bloc2" sera de 200px:
Exemple de code :
#bloc1{
width:400px;
height:400px;
border:1px solid red;
padding:50px;
}
#bloc2{
width:50%;
height:50%;
border:1px solid green;
}
<div id="bloc1"><div id="bloc2"></div></div>

Pour une taille de police, le pourcentage se fera en fonction de la taille initiale de "font-size" du bloc.
La valeur de font-size étant héritée, elle correspond généralement à la valeur du font-size du parent si elle a été précisé, sinon c'est la valeur par défaut du navigateur (valeur variable suivant le navigateur).
Dans l'exemple suivant le pourcentage se fait sur la valeur de "block1":
Exemple de code :
#block1{
  border:1px solid red;
  font-size:500%;
}
#block2{
  border:1px solid green;
  font-size:50%;
}
<div id="block1" >Texte large <div id="block2">Texte en pourcentage</div></div>

Dans l'exemple suivant le pourcentage ne se fait plus sur la valeur de "block1" mais sur la valeur medium :
Exemple de code :
#block1{
  border:1px solid red;
  font-size:500%;
}
#block1 #block2{
  font-size:medium;
}
#block2{
  border:1px solid green;
  font-size:50%;
}
<div id="block1" >Texte large <div id="block2">Texte en pourcentage</div></div>
Descendre
Remonter

Mac pas comme Pc pour l'affichage des fontes

Définition

Sous Pc la résolution de l'écran est de 96 dpi (points par pouce), sous Mac la résolution écran est de 72 dpi (points par pouce) donc un point serait donc exactement un point d'image (Pixel) donc la taille affichée sous mac sera d'1/3 plus petite que sur un système Windows.
Descendre
Remonter

Accessibilité

Définition

Pour la taille des polices, il est préférable d'utiliser des unités de longueurs relatives ou des pourcentages. En effet certaines personnes pour un confort de lecture augment dans leur navigateur la grosseur de la police, les tailles absolues ne bougeront pas (dépend du navigateur)
Descendre
Remonter

Tableau de conversion approsimatives

Comversion

J'ai trouvé un tableau de correspondances entre les unités pt, pixel, em et pourcent.
Ce sont des valeurs approximatives.
Nous nous basons sur une valeur par défaut de font-size égale medium.
Points Pixels Ems Percent
6pt 8px 0.5em 50%
7pt 9px 0.55em 55%
7.5pt 10px 0.625em 62.5%
8pt 11px 0.7em 70%
9pt 12px 0.75em 75%
10pt 13px 0.8em 80%
10.5pt 14px 0.875em 87.5%
11pt 15px 0.95em 95%
12pt 16px 1em 100%
13pt 17px 1.05em 105%
13.5pt 18px 1.125em 112.5%
14pt 19px 1.2em 120%
14.5pt 20px 1.25em 125%
15pt 21px 1.3em 130%
16pt 22px 1.4em 140%
17pt 23px 1.45em 145%
18pt 24px 1.5em 150%
20pt 26px 1.6em 160%
22pt 29px 1.8em 180%
24pt 32px 2em 200%
26pt 35px 2.2em 220%
27pt 36px 2.25em 225%
28pt 37px 2.3em 230%
29pt 38px 2.35em 235%
30pt 40px 2.45em 245%
32pt 42px 2.55em 255%
34pt 45px 2.75em 275%
36pt 48px 3em 300%


Source du tableau
Descendre
Remonter