PROJET AUTOBLOG


Shaarli - le hollandais volant

Site original : Shaarli - le hollandais volant

⇐ retour index

CSS Values and Units Module Level 3

jeudi 27 décembre 2018 à 12:37

Tiens, il existe une unité CSS équivalente au "em", mais pour les chiffres : le "ch".

Le "em" est la largeur du "M" dans une police donnée. Elle peut être utile si, par exemple, votre bloc de texte doit faire exactement 10 lettres de large. De cette façon, que le bloc contienne "iiiiiiiiii" ou "mmmmmmmmmm", sa largeur sera toujours identique (par exemple pour aligner des blocs).

Pour les nombres, on peut utiliser le "ch" : les lettres sont toutes moins larges que le lettres, donc utiliser des "em" peut ne pas être pertinent.

Perso j’utilise ça pour un bloc qui contient une date : 25, ou 31, par exemple, mais aussi 1 ou 3. La case doit toujours faire la même largeur. Je ne veux pas utiliser le "px" car ce n’est pas proportionnel. Utiliser le "em" est chiant aussi car (à par pour les polices à chasse fixe), les largeurs des lettres et celles des chiffres ne sont pas toujours consistantes.
Du coup j’utilise ici une largeur constante de "2ch".

Notez qu’il existe aussi l’unité "ex" qui est la largeur d’un X dans une police donnée. Si le M est souvent la lettre la plus large, le X s’approche plus de la largeur moyenne d’une lettre.

Le ch est plutôt bien supporté par les navigateurs.

Voir aussi : https://css-tricks.com/the-lengths-of-css/


— (permalink)