Est-il possible d'avoir un interlignage par rapport à la taille de police et d'hériter correctement?

Question

Ma question est fondamentalement le même que celui-ci, mais remplacer « hauteur de ligne » avec « l'espacement des lettres »: When a relative line-height is inherited, it is not relative to the element's font-size. Why? And how do i make it relative?

Mon cas d'utilisation est comme ceci:

body { 
    font-size: 18px; 
    letter-spacing: 1.2em; /* I would like letter-spacing to be relative to the font-size across the document, at least until I override it */ 
} 

.small { 
    font-size: 14px; 
    /* letter-spacing is 1.2em of 18px instead of 14px */ 
} 

Je sais que la raison cela ne fonctionne pas, c'est que la valeur calculée, et non la valeur spécifiée, est héritée, donc je dois redéfinir le letter-spacing chaque fois que le font-size change. Mais j'espère qu'il y a quelque chose de similaire à la façon dont fonctionnent les valeurs sans unité dans line-height.

Bien sûr, je peux le faire:

* { 
    letter-spacing: 1.2em; 
} 

Mais je ne peux pas arrêter la mise en cascade à un élément, comme je serais en mesure de line-height avec:

body { 
    font-size: 18px; 
    line-height: 1.5; 
} 

.normal-line-height { 
    line-height: normal; 
    /* all the descendants of this element will have a normal line-height */ 
} 

Je veux dire, SURE , Je pourrais toujours faire ceci ...

.normal-letter-spacing, .normal-letter-spacing * { 
    letter-spacing: normal; 
} 

Mais ce n'est toujours pas aussi élégant que je le voudrais. Je ne pense pas qu'il existe une solution élégante à ce problème, mais je demande au cas où il me manque quelque chose.

Answer 1

variables CSS ne sont pas largement pris en charge, mais ferait l'affaire:

body { 
 
    font-size: 18px; 
 
    --spacing: 1.2em; 
 
} 
 
.normal-letter-spacing { /* No need to select `.normal-letter-spacing *` */ 
 
    --spacing: normal; 
 
} 
 
body * { 
 
    letter-spacing: var(--spacing); 
 
} 
 
.small { 
 
    font-size: 14px; 
 
}

<div> 
 
    <p>Lorem ipsum</p> 
 
    <p class="small">Lorem ipsum</p> 
 
</div> 
 
<hr /> 
 
<div class="normal-letter-spacing"> 
 
    <p>Lorem ipsum</p> 
 
    <p class="small">Lorem ipsum</p> 
 
</div>

Ils travaillent parce que la valeur d'un custom property calcule à la valeur spécifiée:

Valeur calculée: valeur spécifiée avec des variables substituées (mais voir prose pour des « variables invalides »)

Par conséquent, contrairement à ce qui se passe avec letter-spacing, 1.2em ne se transforme pas à une longueur absolue.

Ensuite, vous pouvez indiquer à tous les éléments d'utiliser --spacing comme valeur letter-spacing. Donc 1.2em sera résolu localement en respectant la taille de la police de chaque élément.

Contrairement à * { letter-spacing: 1.2em; }, cette approche définit --spacing: 1.2em une seule fois, dans body, et la laisse se propager par héritage. Par conséquent, si vous souhaitez modifier cette valeur dans un sous-arbre, vous devez uniquement remplacer --spacing dans la racine. Vous n'êtes pas obligé de sélectionner tous les sous-arbres.

Answer 2

Je voudrais essayer d'utiliser REM sur EM pour geler votre relation avec une valeur, ce qui serait root (corps) taille de police. Vous ne devriez pas vous soucier des changements de taille de police plus tard.

Si vous souhaitez utiliser rems dans plus d'endroits, je conseille d'organiser toutes les classes dans un seul endroit afin que vous n'ayez pas beaucoup de problème avec le maintien de cela. Il serait également une bonne idée de le garder comme une classe utilitaire comme

.txt-spacing-big { letter-spacing: 2rem; } 
.txt-spacing-medium { letter-spacing: 1rem; }