La propiedad de altura de línea en CSS controla el espacio entre líneas de texto. A menudo se establece en un valor sin unidades (p. Ej. line-height: 1.4;) para que sea proporcional al tamaño de la fuente. Es una propiedad vital para el control tipográfico. Demasiado bajo y las líneas se aprietan torpemente; demasiado alto y las líneas están incómodamente separadas. Ambos inhiben la legibilidad. Pero probablemente ya lo sepas.
En este artículo nos centraremos en algunos trucos. Si conoce (o puede averiguar) el valor exacto de line-height, ¡puedes hacer algunas cosas interesantes!
Aplicar estilo a cada línea de texto con un color diferente
No hay :: nth-line (), desafortunadamente. Realmente ni siquiera podemos usar <span>s confiable, ya que hay toneladas de cosas diferentes que pueden hacer que el texto se rompa en diferentes puntos.
Existe una forma, aunque no estándar, de utilizar el fondo de un elemento como fondo del texto.
.text {
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}Hay otro truco en el que puedes usar un linear-gradient() con paradas de color de modo que el color no se desvanezca en otro, simplemente termina abruptamente y comienza otro. Digamos que sabemos que la altura de la línea es 22px, podemos hacer que el degradado se rompa justo ahí.
.text {
background-image: linear-gradient(
to bottom,
#9588DD,
#9588DD 22px,
#DD88C8 22px,
#DD88C8 44px,
#D3DD88 44px,
#D3DD88 66px,
#88B0DD 66px,
#88B0DD);
}
Combinando esos dos trucos:
En un navegador que no admite el recorte de fondo de texto, como Firefox, obtendría barras sólidas de color detrás del texto. Tal vez sea genial y te guste. Tal vez prefiera recurrir a un texto de color sólido. En ese caso, puede utilizar @supports para aplicarlo solo si es compatible de todos modos.
Además, dado que está utilizando el valor de la altura de línea una y otra vez, podría ser bueno variarlo. Usaré SCSS aquí, pero sería un poco genial hacerlo con variables CSS reales algún día para que puedas cambiarlo incluso después de renderizar y ver cómo sigue funcionando.
$lh: 1.4em;
body {
font-size: 1em;
line-height: $lh;
}
@supports (-webkit-background-clip: text) {
p {
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-image: linear-gradient(
to bottom,
#9588DD,
#9588DD $lh,
#DD88C8 $lh,
#DD88C8 $lh*2,
#D3DD88 $lh*2,
#D3DD88 $lh*3,
#88B0DD $lh*3,
#88B0DD);
}
}Usar este comportamiento en la parte superior del elemento es más fácil. A continuación, se muestra un ejemplo en el que las primeras líneas se modifican para dar énfasis.
.text {
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-image: linear-gradient(
to bottom,
rgba(white, 0.8),
rgba(white, 0.8) $lh,
rgba(white, 0.6) $lh,
rgba(white, 0.6) $lh*2,
rgba(white, 0.4) $lh*2,
rgba(white, 0.4) $lh*3,
rgba(white, 0.2) $lh*3,
rgba(white, 0.2));
}
Se vuelve más difícil si intentamos apuntar a las últimas líneas de una cantidad arbitraria de texto. En ese caso, necesitaremos que la primera banda de color vaya desde la parte superior hasta la parte inferior menos algunas líneas. Afortunadamente podemos hacer eso con calc()!
.text {
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-image: linear-gradient(
to bottom,
rgba(white, 0.8),
rgba(white, 0.8) calc(100% - 66px),
rgba(white, 0.6) calc(100% - 66px),
rgba(white, 0.6) calc(100% - 44px),
rgba(white, 0.4) calc(100% - 44px),
rgba(white, 0.4) calc(100% - 22px),
rgba(white, 0.2) calc(100% - 22px),
rgba(white, 0.2));
background-position: bottom center;
}
También hay otras formas de hacer este tipo de cosas, como superponer un gradiente de pseudoelemento (con pointer-events: none; para que no sea molesto).
Líneas entre texto
Usando una técnica similar a la técnica de paradas de color sólido que usamos anteriormente, podemos crear un degradado de línea de 1px que se repite exactamente en el conocido line-height. La forma más sencilla es utilizar repeating-linear-gradient(), además de asegurarse de que todos los demás elementos funcionen bien (como el relleno que también se basa en la altura de la línea).
.parent {
padding: $lh*2;
background: #082838;
background-image: repeating-linear-gradient(
to bottom,
rgba(white, 0) 0,
rgba(white, 0) $lh/1em*16px-1,
rgba(white, 0.1) $lh/1em*16px-1,
rgba(white, 0.1) $lh/1em*16px
);
}Para obtener la línea de 1px, necesitamos saber cuál es el line-height está en píxeles, luego reste uno. El objetivo es que el degradado se repita exactamente a la altura de línea conocida, por lo que el último píxel de ese espacio puede ser la línea. Debido a que dejamos el tamaño de fuente del cuerpo en 1em, eso es 16px. Y dado que el line-height está configurado en ems, podemos dividir por 1em quitando la unidad, luego multiplicar por 16px y restar uno cuando sea necesario.
Coloque las imágenes una por línea
Otra cosa que puedes hacer si sabes exactamente line-height Es hacer background-size coincidir, al menos en el eje vertical. Luego, puede hacer que se repita verticalmente y se alineará una imagen por línea.
.text
background-image: url(image.svg);
background-size: $lh $lh;
background-repeat: repeat-y;
padding-left: $lh*2;
}
Población
Vea la línea Pen One de Text Dif Color de Chris Coyier (@chriscoyier) en CodePen.