Unidades de tallas

The CSS Podcast - 008: Sizing Units

La Web es un medio responsivo, pero a veces es conveniente controlar sus dimensiones para mejorar la calidad general de la interfaz. Un buen ejemplo de esto es limitar las longitudes de línea para mejorar la legibilidad. ¿Cómo lo harías en un medio flexible como la Web?

En este caso, puedes usar una unidad ch, que es igual al ancho de un carácter “0” en la fuente renderizada en su tamaño calculado. Esta unidad te permite limitar el ancho del texto con una unidad diseñada para ajustar el tamaño del texto, lo que, a su vez, permite un control predecible independientemente del tamaño de ese texto. La unidad ch es una de las pocas unidades que son útiles para contextos específicos, como este ejemplo.

Numbers

Los números se usan para definir opacity, line-height y hasta para los valores de canal de color en rgb. Los números son números enteros sin unidades (1, 2, 3, 100) y decimales (.1, .2, .3).

Los números tienen significado según su contexto. Por ejemplo, cuando defines line-height, un número es representativo de una proporción si lo defines sin una unidad de soporte:

p {
  font-size: 24px;
  line-height: 1.5;
}

En este ejemplo, 1.5 es igual al 150% del tamaño de fuente de píxeles calculado del elemento p. Esto significa que si p tiene un font-size de 24px, la altura de la línea se calculará como 36px.

Los números también se pueden utilizar en los siguientes lugares:

  • Cuando estableces valores para los filtros, filter: sepia(0.5) aplica un filtro de sepia 50% al elemento.
  • Cuando se establece la opacidad, opacity: 0.5 aplica una opacidad 50%.
  • En canales de color: rgb(50, 50, 50), donde se aceptan los valores entre 0 y 255 para establecer un valor de color. Consulta la lección sobre colores.
  • Para transformar un elemento, transform: scale(1.2) ajusta el elemento en un 120% de su tamaño inicial.

Porcentajes

Cuando usas un porcentaje en CSS, debes saber cómo se calcula. Por ejemplo,width se calcula como un porcentaje del ancho disponible en el elemento superior.

div {
  width: 300px;
  height: 100px;
}

div p {
  width: 50%; 
}

En el ejemplo anterior, el ancho de div p es 150px, suponiendo que el diseño usa el box-sizing: content-box predeterminado.

Si configuras margin o padding como un porcentaje, representarán una parte del ancho del elemento superior, independientemente de la dirección.

div {
  width: 300px;
  height: 100px;
}

div p {
  margin-top: 50%; /* calculated: 150px */
  padding-left: 50%; /* calculated: 150px */
}

En el fragmento anterior, tanto margin-top como padding-left se calcularán como 150px.

div {
  width: 300px;
  height: 100px;
}

div p {
  width: 50%; /* calculated: 150px */
  transform: translateX(10%); /* calculated: 15px */
}

Si estableces un valor transform como un porcentaje, se basa en el elemento con el conjunto de transformación. En este ejemplo, p tiene un valor translateX de 10% y un width de 50%. Primero, calcula cuál será el ancho: 150px porque es el 50% del ancho de su elemento superior. Luego, toma 10% de 150px, que es 15px.

Dimensiones y longitudes

Si vinculas una unidad a un número, esta se convierte en una dimensión. Por ejemplo, 1rem es una dimensión. En este contexto, la unidad que se adjunta a un número se conoce en las especificaciones como un token de dimensión. Las longitudes son dimensiones que se refieren a la distancia y pueden ser absolutas o relativas.

Largos absolutos

Todas las longitudes absolutas se resuelven en la misma base, lo que las hace predecibles dondequiera que se usen en tu CSS. Por ejemplo, si usas cm para ajustar el tamaño del elemento y, luego, imprimirlo, debería ser preciso si lo comparaste con una regla.

div {
  width: 10cm;
  height: 5cm;
  background: black;
}

Si imprimieras esta página, el div se imprimiría como un rectángulo negro de 10 × 5 cm. Ten en cuenta que el CSS no solo se usa para el contenido digital, sino también para aplicar diseño al contenido impreso. Las longitudes absolutas pueden ser realmente útiles a la hora de diseñar para la impresión.

Unidad Nombre Equivale a
cm Centímetros 1 cm = 96 px/2.54
mm Milímetros 1 mm = 1/10 de 1 cm
Q Cuartos de milímetro 1Q = 1/40 de 1 cm
in Pulgadas 1 in = 2.54 cm = 96 px
pc Picas 1 unidad = 1/6 de 1 in
pt Puntos 1 pt = 1/72 de 1 in
px Píxeles 1 px = 1/96 de 1 in

longitudes relativas

Una longitud relativa se calcula respecto de un valor base, similar a un porcentaje. La diferencia entre estos y los porcentajes es que puedes ajustar el tamaño contextualmente a los elementos. Esto significa que CSS tiene unidades como ch, que usan el tamaño del texto como base, y vw, que se basa en el ancho del viewport (ventana de tu navegador). Las longitudes relativas son especialmente útiles en la Web debido a su naturaleza responsiva.

Unidades relativas del tamaño de fuente

CSS proporciona unidades útiles que son relativas al tamaño de los elementos de la tipografía renderizada, como el tamaño del texto en sí (unidades em) o el ancho de los caracteres de los tipos de letra (unidades ch).

Unidad en relación con lo siguiente:
em En relación con el tamaño de la fuente, es decir, 1.5 em será un 50% más grande que el tamaño de fuente calculado base de su elemento superior. (históricamente, la altura de la letra mayúscula “M”).
p. ej. Heurística para determinar si se debe usar la altura de la letra “x” o “.5em” en el tamaño de fuente calculado actual del elemento.
gorra Es la altura de las letras mayúsculas en el tamaño de fuente calculado actual del elemento.
ch Es el avance de caracteres promedio de un glifo estrecho en la fuente del elemento (representado por el glifo "0").
ic Es el avance de caracteres promedio de un glifo de ancho completo en la fuente del elemento, como se representa con el glifo "水" (ideograma de agua CJK, U+6C34).
rem Es el tamaño de la fuente del elemento raíz (el valor predeterminado es 16 px).
lh Es la altura de línea del elemento.
rlh Es la altura de la línea del elemento raíz.
El texto y el CSS son 10 veces mejores con etiquetas para la altura de los ascendentes, la altura de los descendentes y la altura x. La altura de la x representa 1ex y el 0 representa 1ch.

Unidades relativas al viewport

Puedes usar las dimensiones del viewport (ventana del navegador) como base relativa. Estas unidades forman parte del espacio de viewport disponible.

Unidad en relación con
vw 1% del ancho de la ventana de visualización. Las personas usan esta unidad para hacer trucos geniales con fuentes, como cambiar el tamaño de la fuente de un encabezado en función del ancho de la página, de modo que, a medida que el usuario cambie el tamaño, también lo haga la fuente.
vh el 1% de la altura de la viewport. Puedes usar esta opción para organizar los elementos en una IU si, por ejemplo, tienes una barra de herramientas de pie de página.
vi 1% del tamaño de la ventana de visualización en el eje intercalado del elemento raíz. Axis se refiere a los modos de escritura. En los modos de escritura horizontal, como el inglés, el eje intercalado es horizontal. En los modos de escritura vertical, como algunos tipos de letra japoneses, el eje intercalado se extiende de arriba abajo.
vb Es el 1% del tamaño del viewport en el eje de bloque del elemento raíz. Para el eje de bloque, esta sería la direccionalidad del idioma. Los idiomas de LTR, como el inglés, tendrían un eje de bloque vertical, ya que los lectores de inglés analizan la página de arriba abajo. Un modo de escritura vertical tiene un eje de bloque horizontal.
vmin El 1% de la dimensión más pequeña del viewport
vmax El 1% de la dimensión más grande del viewport
div {
  width: 10vw;
}

p {
  max-width: 60ch;
}

En este ejemplo, div será el 10% del ancho de la ventana de visualización porque 1vw es el 1% del ancho de la ventana de visualización. El elemento p tiene un max-width de 60ch, lo que significa que no puede exceder el ancho de 60 caracteres "0" en la fuente y el tamaño calculados.

Unidades misceláneas

Hay otras unidades que se especificaron para tratar con tipos de valores particulares.

Unidades de ángulo

En el módulo de color, analizamos las unidades de ángulo, que son útiles para definir valores de grados, como el tono en hsl. También son útiles para rotar elementos dentro de las funciones de transformación.

div {
  width: 150px;
  height: 150px;
  transform: rotate(60deg);
}

Con la unidad de ángulo deg, puedes rotar un div 90° en su eje central.

div {
  background-image: url('a-low-resolution-image.jpg');
}

@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
  div {
    background-image: url('a-high-resolution-image.jpg');
  }
}

Unidades de resolución

En el ejemplo anterior, el valor de min-resolution es 192dpi. La unidad dpi significa puntos por pulgada. Un contexto útil para esto es detectar pantallas de muy alta resolución, como pantallas Retina en una consulta de medios y entregar una imagen de mayor resolución.

Verifica tu comprensión

Pon a prueba tus conocimientos sobre el tamaño

¿Cuáles de las siguientes opciones son dimensiones válidas?

cm
Centímetros, una dimensión absoluta válida.
ui
La interfaz de usuario no es una dimensión en CSS.
en
Pulgadas, una dimensión absoluta válida.
8
No es una dimensión de CSS
px
Píxeles, una dimensión absoluta válida.
ch
Unidades de caracteres, una dimensión relativa válida.
UX
La experiencia del usuario no es una dimensión en CSS.
em
Unidades de la letra "M", una dimensión relativa válida.
ex
Unidades de la letra "x", una dimensión relativa válida.

¿En qué se diferencian las unidades absolutas y las relativas?

Los valores absolutos no pueden cambiar, pero las unidades relativas sí
Los valores absolutos pueden cambiar, pero la base en la que se calculan no.
Una longitud absoluta se calcula en función de un solo valor base compartido, en el que se compara una unidad relativa con un valor base que puede cambiar.
Las unidades relativas son más adaptables y fluidas debido a su conocimiento contextual, pero las unidades absolutas tienen una potencia y una previsibilidad que pueden ser fundamentales para ciertos diseños.

Las unidades de viewport son absolutas.

Verdadero
Pueden parecer absolutos, pero son relativos a un viewport, que puede ser un iframe o un WebView, y no siempre representan el tamaño de la pantalla de un dispositivo.
Falso
Son relativas a la ventana del documento en la que se crearon, que puede ser igual o no a la pantalla de un dispositivo.

Recursos