Lining.js: control de líneas de texto por selector de CSS

Los numerosos selectores de CSS disponibles nos permiten acceder fácilmente a casi todos y cada uno de los elementos HTML de cualquier página. El pseudo-elemento ::first-line incluso nos permite aplicar propiedades CSS a la primera línea de texto de un documento, sin importar si la línea se ajusta de forma automática o manual. Desafortunadamente, además ::first-line no hay selectores para manipular la segunda, tercera, última o cualquier línea. La biblioteca JavaScript Lining.js está aquí para mejorar tus posibilidades.

.line[last] En lugar de ::last-line

Similar a los selectores ::last-child y ::nth-child() que le permiten tocar el último o cualquier elemento secundario aleatorio, Lining.js agrega comportamientos para líneas de texto. EN lugar de usar los selectores (no existentes) ::last-line y ::nth-line(n)la biblioteca introduce las clases .line[last] y .line[index="n"].

Después de haber incrustado la biblioteca en su documento, comience asignando el atributo de datos data-lining a cada elemento de texto con el que quieras manipular Lining.js. El atributo no espera ningún valor.

<p data-lining>
  Lorem ipsum …
</p>

Luego use estas clases para marcar individualmente las líneas dentro del texto por CSS.

p .line[last] {
  color: red;
}

p .line[index="2"] {
 font-weight: bold;
}

.line[last] y .line[index="2"] activo en un texto

En nuestro ejemplo, coloreamos la última línea de un <p> elemento rojo, mientras que agregamos un peso de fuente en negrita a la segunda línea. Aunque tenemos el pseudo elemento regular ::first-line hay otro dentro de la sintaxis de Lining.js y se llama .line[first]. Depende totalmente de usted qué variante decide usar.

Los pseudo elementos ::nth-of-type() y ::nth-last-of-type() ver también sus equivalentes en .line:nth-of-type() y .line:nth-last-of-type().

p .line:nth-of-type(2n) {
  color: green;
}

Líneas alternas con .line:nth-of-type(2n)

En este ejemplo alternamos líneas con .line:nth-of-type(2n) y colorea cada segunda línea de verde. el seleccionador .line:nth-last-of-type(2n) también le permitiría acceder a cada segunda línea, pero el conteo comenzaría desde el final del texto en lugar del principio.

No debería dejar de mencionarse que el selector simple .line le permite adjuntar propiedades CSS a cada línea de texto. Es la herramienta preferida si desea dibujar una línea debajo de cada fila de texto, por ejemplo.

p .line {
  border-bottom: 1px solid blue;
}

Líneas debajo de cada – bien – línea con – bien – .line

Este marcado hace que se dibujen líneas azules debajo de cada fila de texto. Sin Lining.js estaríamos limitados a dibujar una línea debajo de la <p> elemento como un todo, lo que daría lugar a que se dibujara una sola línea debajo del párrafo.

Definición del comportamiento predeterminado

Como no todos los navegadores son compatibles Lining.js puede ser una buena idea definir diferentes diseños de texto predeterminados. De esa manera podríamos hacer que el texto se vea diferente con y sin soporte para Lining.js.

p {
  font-style: italic;
}

.nolining p {
  font-style: normal;
}

El código de ejemplo marca todos <p> elementos en cursiva. La clase nolining se preocupa por aplicar un look diferente Lining.js no ser compatible.

Lining.js y diseño receptivo

Lining.js funciona su magia en la carga de la página y agrega sus elementos al texto. Eso significa que al cambiar el tamaño de las líneas de la ventana del navegador no se redefinirán sino que permanecerán en su forma inicial. Si desea que las líneas se recalculen y organicen en cada cambio del tamaño de la ventana, también querrá agregar el atributo de datos adicionales data-auto-resize.

<p data-lining data-autoresize>
  Lorem ipsum …
</p>

Después Lining.js se preocupará por el recálculo adecuado de los pseudo elementos, por ejemplo .line[index="3"].

Limit Lining.js a Ciertas Líneas

Técnicamente Lining.js agrega el elemento <text-line> a cada línea de texto para poder controlarlo. Los textos largos pueden sufrir retrasos en el rendimiento durante este proceso. Si solo desea manipular ciertas áreas de texto, puede ser una buena idea limitar explícitamente Lining.js a estas secciones y acelerar un poco las cosas. Los atributos de datos data-from y data-to se utilizan para definir esta sección.

<p data-lining data-from="5">
  Lorem ipsum …
</p>

El ejemplo tiene la biblioteca limitada a la quinta y todas las líneas siguientes. Los selectores ahora solo se pueden aplicar a esa sección. El resto no será manipulado.

Efectos animados para desvanecer líneas de entrada y salida

Usando una biblioteca adicional con el nombre de lining.effects.js podemos aplicar varios efectos de animación a nuestras líneas de texto. Estos efectos se controlan mediante el atributo de datos data-effect.

<p data-lining data-effect="rolling">
  Lorem ipsum …
</p>

Efecto rolling

En este ejemplo vamos por el efecto rolling. Las líneas individuales de texto se desplazan desde la pantalla, comenzando con la primera línea. En total, puede elegir entre siete efectos de atenuación. Tenemos los simples como fade-in o slide-in pero también los muy complejos como metroRotateIndonde las líneas se giran en un espacio 3D mientras se desvanece.

Conclusión

Lining.js es una herramienta muy sofisticada que permite el diseño individual de líneas de texto dentro de un elemento de párrafo. Los efectos de animación son increíbles y se suman a la impresión general. Si no le gusta usar atributos de datos, siempre puede decidir quedarse con JavaScript puro.

Lining.js funciona perfectamente en todas las versiones de Chrome, Safari y Opera, mientras que Internet Explorer no es compatible. La biblioteca se puede utilizar de forma gratuita bajo los términos de la muy liberal licencia MIT. Ponerse al día es bastante fácil, ya que existe una documentación completa y varios buenos ejemplos a mano.

(dpe)