jquery.app
Francais
EnglishDeutschFrancaisEspanol日本語Nederlands

Outils CSS et design

Gratuit Calculateur d'unites CSS root-relative

Calculez les equivalents en pixels pour les unites rcap, rch, rex et ric basees sur la taille de police racine. Comparez avec rem.

Chargement de l'outil...

Qu'est-ce que Calculateur d'unites CSS root-relative ?

Les unites de police relatives a la racine (rcap, rch, rex, ric) sont Baseline 2026 (Chrome 131+, Safari 18.2+, Firefox 136+). rcap = hauteur de capitale, rch = largeur du caractere (glyphe 0), rex = hauteur x, ric = largeur d'ideogramme (1em en CJK). Contrairement a rem, elles refletent les vraies mesures de la police.

Réponse rapide

rcap (hauteur de capitale), rch (largeur de caractere), rex (hauteur x), ric (largeur d'ideogramme). Chrome 131+, Safari 18.2+, Firefox 136+.

Last updated: 2026-06-01

Limites

  • Referencent la police racine, pas l'element.
  • rch mesure le glyphe zero, pas la moyenne des caracteres.
  • ric = 1em pour le texte latin, redondant avec rem.

Sources:MDN Web Docs · W3C Specifications · jquery.app on GitHub

Comment utiliser cet outil

  1. Entrez la police racine pour voir les equivalents pixel.
  2. Comparez chaque unite a rem pour le ratio.
  3. Selectionnez un cas d'utilisation pour l'unite recommandee.
  4. Copiez le CSS avec repli rem.

A quoi il sert

  • Aligner les lettrines avec rcap.
  • Dimensionner les champs avec rch.
  • Rythme vertical avec rex.

Cas d'usage

Exemples concrets

Exemple

Lettreine alignee a la hauteur de cap

height: 4rcap pour une lettrine exactement 4x la hauteur de cap.

Exemple

Champ dimensionne a la largeur du caractere

width: 12rch pour un champ correspondant a 10 caracteres.

Erreurs frequentes

  • Supposer que rcap et rex sont les mesures de l'element lui-meme.
  • Utiliser ric hors contexte CJK : il est identique a rem pour le latin.
  • Oublier que rch est base sur le glyphe zero.

Vérification

  1. Verifiez la valeur pixel calculee dans Chrome 131+.
  2. Comparez avec rem pour voir la difference.

FAQ

Questions sur Calculateur d'unites CSS root-relative

rcap vs em/rem?

rcap donne la hauteur reelle des majuscules, pas la taille de police.

Pourquoi les valeurs pixel changent selon la police?

Ces unites mesurent les glyphes reels, qui varient selon les polices.

Utilisation avec clamp()?

Oui, fonctionnent dans clamp(), min(), max(), calc().

Support navigateur?

Chrome 131+, Safari 18.2+, Firefox 136+. Fournissez un repli rem.

Outils lies

Autres outils outils css et design

Outils CSS et design

Générateur de carrousel CSS

Générez le balisage d’un carrousel CSS natif avec scroll-snap, boutons de défilement, repères de défilement et structure de liste accessible. Aucun JavaScript requis.

Ouvrir l'outil

A essayer aussi

A essayer aussi