Lining.js: Textzeilen verändern per CSS-Selektor

Dank der zahlreich zur Verfügung stehenden CSS-Selektoren kann man per Stylesheets auf fast jedes einzelne HTML-Element innerhalb eines Dokumentes zugreifen. Und dank des Pseudoelementes ::first-line hat man sogar innerhalb eines Textes die Möglichkeit, CSS-Eigenschaften nur auf die erste Zeile anzuwenden – unabhängig davon, ob die Zeile automatisch umgebrochen oder durch manuellen Zeilenumbruch herbeigeführt wird. Da es neben ::first-line aber keine weiteren Selektoren gibt, um auf die zweite, dritte oder letzte Zeile eines Textes zuzugreifen, kann man sich diese noch fehlenden CSS-Selektoren mit der JavaScript-Bibliothek Lining.js nachrüsten.

.line[last] statt ::last-line

Analog zu den Selektoren ::last-child und ::nth-child(), mit denen auf das letzte oder ein anderes beliebige Kindelement zugegriffen werden kann, stellt Lining.js ein ähnliches Verhalten für Textzeilen zur Verfügung. Statt der nicht vorhandenen Selektoren ::last-line und ::nth-line(n) werden die Zeilen über die Klassen .line[last] und .line[index="n"] angesprochen.

Ist die JavaScript-Datei im Dokument eingebunden, müssen zunächst die Textelemente, auf die Lining.js angewendet werden soll, mit dem Data-Attribut data-lining ausgezeichnet werden. Einen Wert benötigt das Attribut nicht.

1
2
3

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

Anschließend können über diese Klassen einzelne Zeilen innerhalb eines Textes individuell per CSS ausgezeichnet werden.

1
2
3
4
5
6
7

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

.line[last] und .line[index="2"] auf einen Text angewendet

Im Beispiel wird die jeweils letzte Zeile eines <p>-Elementes rot gefärbt, während die jeweils zweite Zeile fett dargestellt wird. Obwohl es das Pseudoelement ::first-line gibt, existiert mit .line[first] auch eine Variante für Lining.js. Hier bleibt Ihnen freigestellt, für welche Variante Sie sich entscheiden.

Auch für die Pseudoelemente ::nth-of-type() und ::nth-last-of-type() gibt es mit .line:nth-of-type() und .line:nth-last-of-type() entsprechende Möglichkeiten für Textzeilen.

1
2
3

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

Alternative Zeilen mit .line:nth-of-type(2n)

Im Beispiel wird dank .line:nth-of-type(2n) jede zweite Zeile eines Textes grün angezeigt. Mit dem Selektor .line:nth-last-of-type(2n) erhält man ebenfalls Zugriff auf jede zweite Zeile. Die Zählung beginnt jedoch mit der letzten Zeile statt mit der ersten.

Als letztes gibt es noch den einfachen Selektor .line. Mit diesem kann man CSS-Eigenschaften auf jede Zeile eines Textes anwenden. Dieser Selektor ist dann interessant, wenn man beispielsweise nach jeder Zeile eine Linie zeichnen möchte.

1
2
3

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

Linie unterhalb jeder Zeile mit .line

Das Beispiel sorgt dafür, dass nach jeder Zeile eine blaue Linie dargestellt wird. Ohne Lining.js hätte man nur Zugriff auf das <p>-Element als Ganzes und könnte nur den Absatz mit einer Linie versehen.

Standardaussehen definieren

Da nicht jeder Browser Lining.js unterstützt, gibt es zusätzlich die Möglichkeit, das Standardaussehen von Texten unterschiedlich zu definieren. So kann das Aussehen bei Unterstützung von Lining.js anders aussehen als bei Nicht-Unterstützung.

1
2
3
4
5
6
7

p {
  font-style: italic;
}
 
.nolining p {
  font-style: normal;
}

Im Beispiel werden zunächst alle <p>-Elemente mit kursiver Schrift ausgezeichnet. Über die Klasse nolining wird dann ein abgewandeltes Aussehen definiert, falls der Browser Lining.js nicht unterstützt.

Lining.js und responsives Layout

Die Zeilen eines Textes werden per Lining.js beim Laden der Seite einmalig festgelegt. Verschieben sich die Zeilen, weil das Browserfenster breiter oder schmaler gemacht wird, bleibt die ursprüngliche Zeileneinteilung und das damit verbundene Aussehen beibehalten. Will man jedoch, dass die Zeilen bei veränderter Größe des Fensters neu eingeteilt werden, muss den jeweiligen Texten das zusätzliche Data-Attribut data-auto-resize zugewiesen werden.

1
2
3

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

Ändert man dann das Browserfenster, sorgt Lining.js dafür, dass die veränderte Zeileneinteilung bei den Pseudoelementen – zum Beispiel .line[index="3"] – berücksichtigt wird.

Lining.js nur auf bestimmte Zeilen anwenden

Technisch funktioniert Lining.js so, dass jede Zeile eines Textes mit dem Element <text-line> umschlossen wird. Diese Umwandlung kann gerade bei langen Texten durchaus ein Weilchen dauern. Will man Lining.js gar nicht auf den gesamten Text anwenden, kann man die Umwandlung in einzelne Zeilen auf einen bestimmten Textbereich begrenzen. Mit den Data-Attributen data-from und data-to geben wir einen Bereich an, der in einzelne Zeilen umgewandelt werden soll.

1
2
3

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

Im Beispiel werden nur die fünfte und alle folgenden Zeilen des Absatzes berücksichtigt. Entsprechend lassen sich die Selektoren auch nur auf diesen Bereich anwenden.

Animierte Effekte zum Ein- und Ausblenden

Neben der eigentlichen Möglichkeit, auf einzelne Textzeilen zuzugreifen, gibt es eine ergänzende JavaScript-Bibliothek, mit der wir animierte Effekte auf die Zeilen anwenden. So lassen sich Texte Zeile für Zeile auf unterschiedliche Weise ein- und ausblenden. Die Datei lining.effects.js muss dafür mit eingebunden werden. Anschließend stehen einem die Ein- und Ausblendeffekte zur Verfügung. Sie werden über das Data-Attribut data-effect angesprochen.

1
2
3

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

Einblendeffekt rolling

Im Beispiel wenden wir den Effekt rolling auf einen Text an. Dabei werden die einzelnen Zeilen von der ersten Zeile beginnend nach unten geklappt. Insgesamt stehen sieben verschiedene Einblendeffekte zur Verfügung – vom einfachen Fade-in und Slide-in bis hin zum komplexen metroRotateIn, bei dem die Zeilen per 3D-Drehung und Fade-in eingeblendet werden.

Fazit

Lining.js ist ein sehr gut durchdachtes und umfangreiches Werkzeug, das eine individuelle Gestaltung von Texten beziehungsweisen dessen Zeilen ermöglicht. Die schicken Animationseffekte runden den Funktionsumfang der Bibliothek gut ab. Zusätzlich zur Auszeichnung per Data-Attribute ist auch eine ausschließliche Konfiguration per JavaScript möglich.

Lining.js läuft in allen gängigen Versionen von Chrome, Safari und Opera. Kleiner Wermutstropfen: Der Internet Explorer wird derzeit gar nicht unterstützt. Die Bibliothek steht wie viele dieser Art unter der MIT-Lizenz kostenlos zur Verfügung.

Dank einer guten Dokumentation und einigen Beispielen ist der Einstieg in Lining.js einfach.

(dpe)