¡Practica con line-height

¡Practica con line-height

La propiedad CSS line-height controla el espacio entre las líneas de un texto. A menudo se fija en un valor sin unidades (por ejemplo, line-height: 1.4;) paa que sea proporcional al tamaño de letra. Es una propiedad muy importante para llevar un control tipográfico de texto. Si se opta por un valor demasiado bajo las líneas quedarán unas encima de otras; y si por el contrario se establece un valor demasiado alto el resultado será el de unas líneas de texto absurdamente separadas. Ambas opciones dificultan la legibilidad.

En este artículo vamos a centrarnos en algunos trucos basados en esta propiedad. Si eres capaz de establecer el valor exacto de line-height, ¡podrás conseguir resultados sorprendentes!

Dar a cada línea de texto un estilo de color diferente

Por desgracia no hay ::nth-line() que podamos utilizar. Tampoco nos podemos fiar de utilizar <span> s, ya que hay muchos elementos diferentes que pueden ocasionar un corte del texto en diferentes puntos.

Hay una manera, aunque no estándar, de utilizar el fondo de un elemento como el fondo del texto.

..text {
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

También hay otro truco en el que se puede utilizar la propiedad linear-gradient() al fin del color de tal manera que el color no se desvanece en otro, sólo termina de repente y empieza otro. Digamos que sabemos que el line-height es 22px, podemos hacer los saltos de gradiente correctos sabiéndolo.

.text {
  background-image: linear-gradient(
    to bottom,
    #9588DD,
    #9588DD 22px,
    #DD88C8 22px,
    #DD88C8 44px,
    #D3DD88 44px,
    #D3DD88 66px,
    #88B0DD 66px,
    #88B0DD);
}

imaginanet

Combinando estos dos trucos:

Imaginanet

En un navegador que no admita el fondo del texto de recorte, como Firefox, lo que se obtiene son las líneas de color detrás del texto. Quizás eso te guste, o no. En el caso de que no, puedes utilizar @supports para aplicar esta propiedad sólo en el caso de que el navegador la soporte.

También, puesto que estás utilizando el valor del line-height varias veces, sería bueno establecerla como variable.  Aquí usaremos SCSS.

$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);
  }
}

El uso de este comportamiento en la parte superior del elemento es más sencillo. He aquí un ejemplo en el que las primeras líneas se alteran para darles é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));
} 

Imaginanet

Se vuelve más difícil si tratamos de modificar las últimas líneas de un texto con un número de líneas arbitrario. Afortunadamente podemos hacer esto 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; }

 
Imaginanet

Hay otras maneras de hacer este tipo de formatos, como por ejemplo utilizando pointer-events: none;, así que no es difícil.

Líneas entre el texto

Utilizando una técnica similar a la utilizada en el ejemplo anterior, podemos crear una línea con gradiente de 1px que se repita exactamente como con  line-height. La forma más sencilla es utilizar repeating-linear-gradient(), así como asegurarse de que todos los demás elementos combinan bien (como el padding que también se basa en el line-height).

.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   ); }
Con el fin de obtener la línea de 1px, tenemos que saber lo que pixeles del line-height, y luego restar uno. El objetivo es que el gradiente se repita exactamente en la altura de línea conocida, por lo que el espacio del último píxel pueda ser la línea. Debido a que hemos dejado el tamaño del font-size a 1 em, entonces es 16px. Y puesto que el line-height se establece en ems, podemos dividir por 1 em quitando la unidad, y luego se multiplica por 16px y restar uno cuando sea necesario.

Imaginanet

Colocar imágenes una por cada línea

Otra cosa que puedes hacer si sabes exactamente el line-height es hacer que el background-size coincida con él, por lo menos en el eje vertical. Entonces puedes hacer que se repita verticalmente y se alineará un fondo por cada línea.

.text
  background-image: url(image.svg);
  background-size: $lh $lh;
  background-repeat: repeat-y;
  padding-left: $lh*2;
}

Imaginanet

Comentarios

Sin comentarios
Ha habido un error en el envío
Comentario enviado. Será revisado por la moderación antes de ser publicado.

Deja tu comentario

Tu nombre:
Tu email:
Tu comentario:
Nuestra página web utiliza cookies propias y de terceros, para realizar el análisis de la navegación de los usuarios y así poder mejorar nuestros servicios. Si continúas navegando, consideramos que aceptas su uso. Puedes cambiar la configuración u obtener más información aquí