¿Por qué no hay unidad para (EM * altura de línea) o (REM * raíz de altura de línea)?

Este problema me ha estado molestando mucho por un tiempo.

En toda la web (y en marcos CSS como Bootstrap), REMse usa comúnmente para todo, desde relleno (ejemplo: padding: 2rem;) hasta border-radius (ejemplo: border-radius: 1rem;).

Ok, bien, eso es razonable. Pero, ¿por qué no hay también una unidad global que incluya un line-heightmodificador? Suponiendo que está utilizando una cuadrícula típica que se basa en tipografía, su escala de tipo MÁS su interlineado de tipo es su verdadera línea de base y, por lo tanto, parece una unidad MUCHO más importante que simplemente REM.

Por ejemplo, supongamos que REMestá configurado en 16 px y el texto de su cuerpo line-heightes 1.6.:

body {
  font-size: 16px;
  line-height: 1.6;
}

Esta es una configuración relativamente común. Entonces, ¿por qué REM(lo que normalmente se interpretará como 16pxen este ejemplo) se usa en casi todas partes y no una unidad que represente la línea de base real de la cuadrícula (que normalmente será 25.6pxde 16px * 1,6)?

En otras palabras, ¿por qué esta práctica estándar

my-padding: {
   padding: 2rem; // typically will be 32px;
}

pero no esto

my-padding: {
   padding: 2rlh; // typically will be 51.2px;
}

(Me doy cuenta de que rlh, o root line height, no existe en CSS. Mi pregunta es ¿ por qué no existe?).

Estoy un poco confundido por tu pregunta... También puedes usar rems o cualquier unidad CSS válida para la altura de la línea, ¿eso no resuelve tu problema?
@Cai No estoy seguro de lo que quieres decir. El problema no es establecer una altura de línea. El problema es que no hay equivalente REMpara la altura de la línea.
No sé a qué te refieres, ¿qué es un equivalente a rem para la altura de línea? Si usa rem para establecer su altura de línea, entonces su rlh hipotético es lo mismo que usar rem. Por ejemplo, estableces line-height: 2rem;entonces padding: 4rem;es lo mismo que hacerpadding: 2rlh;
¿Esto debería estar en Webmasters o en la pila principal seguramente?
@DigitalLightcraft No, está bien aquí. Hay 236 preguntas etiquetadas CSS.
@Cai Creo que entiendo lo que quieres decir. Por supuesto, puede configurar cualquier cosa manualmente. Pero eso se rompe si cambia la altura de la línea. Que es en parte por qué REM existe para empezar. En realidad, creo que estoy agregando confusión porque mi pregunta podría aplicarse EMtambién a REM. Si quiero configurar el relleno en relación con el de un padre font-size * line height, no hay una unidad para eso además de codificar los valores.
@yourfriendzak Nada se rompería si usas REM. El problema es usar una altura de línea sin unidad, que se recomienda a menos que desee una cuadrícula de referencia consistente , que es de lo que está hablando, ¿verdad? En ese caso, establece su altura de línea con REM, y sus REM también serán relativos a su línea de base.
El problema con la altura de línea sin unidad es que es relativa al tamaño de fuente, por lo que lo que propone es una unidad relativa de una unidad relativa.
@Cai Hmmm, eso es interesante. No había considerado eso. Voy a tener que repensar mi premisa. Gracias por las respuestas reflexivas.
especificar line-height sin una unidad significa "ems". Entonces 1.2 altura de línea = 1.2em
La respuesta estándar a "¿Por qué CSS carece de esta configuración que es común para los diseñadores gráficos y la composición tipográfica" es porque "el grupo de estándares CSS carece de diseñadores gráficos y tipógrafos"
Dicho esto... esta es una pregunta un poco confusa. ¿Cuál es tu objetivo final? Creo que REM ya es exactamente lo que quieres. "Altura de línea" + "Leading" = cualquier REM que desee.

Respuestas (1)

La razón de esto es que es demasiado específico para justificar el costo.

En su caso específico de querer usar root line-height, la respuesta también es que la mayoría de las veces se line-heightbasa en font-size(es por defecto), por lo que sería inútil ya que ya tenemos rem.

De manera más general, podemos preguntarnos: "¿Qué pasa si quiero usar la raíz margin-topcomo espaciado para el resto de mis márgenes y relleno? ¿Por qué no hay una rmtunidad para eso?" y hacer esto para cualquier propiedad. Rápidamente vemos que es una tontería tener unidades para cada propiedad. emy remse eligieron en función de font-sizeporque proporciona una buena base para diseñar otras propiedades.

Dicho esto, si desea utilizar la altura de la línea (o cualquier otro valor) en los valores de otras propiedades, puede utilizar las propiedades personalizadas de CSS (esencialmente variables) o utilizar un preprocesador de CSS como SASS o LESS.

¿Por qué no hay unidad para (EM * altura de línea) o (REM * raíz de altura de línea)?
RespuestasAquíPolítica de privacidad1y, 0v