18
NOV

Lining.js - Appliquer un style aux lignes d'un paragraphe de texte

Publié le 18/11/14 à 09h19 par DJo

Lining.js est une bibliothèque Javascript permettant d'appliquer un style spécifique sur certaines lignes d'un paragraphe de texte.

Lining.js est une bibliothèque Javascript permettant d'appliquer un style spécifique sur certaines lignes d'un paragraphe de texte.

Vous vous êtes sans doute déjà demandé comment appliquer un style à une phrase spécifique, et vous avez sans doute cherché désespéremment l'existance de pseudo classes CSS du même genre que ::nth-child() ou ::last-child en équivalent ligne. 

Malheureusement, pour le moment, il n'existe aucune pseudo classe CSS permettant de donner du style à telle ou telle ligne, si ce n'est à la première ligne via ::first-line(). Il faut souvent ruser en appliquant un span ou autre balise HTML... pas top !

Lining.js est une bibliothèque Javascript qui va permettre d'ajouter vos lignes de texte dans des balises text-line, puis utiliser les pseudos classes CSS nth-of-type, nth-last-of-type etc.

.poem .line[first] { /* `.poem::first-line`*/ }
.poem .line[last] { /* `.poem::last-line` */ }
.poem .line[index="5"] { /* `.poem::nth-line(5)` */ }
.poem .line:nth-of-type(-n+2) { /* `.poem::nth-line(-n+2)` */ }
.poem .line:nth-last-of-type(2n) { /* `.poem:::nth-last-line(2n)` */ }

Il suffit d'ajouter l'attribut data-lining à votre paragraphe de texte à personnaliser:

<div class="poem" data-lining data-auto-resize>Some text...</div>

Une bonne ruse pour personnaliser vos paragraphes de texte.

Attention tout de même, le script ne fonctionne que sur les navigateurs modernes et à jour. Adieu Internet explorer.

 

Site Officiel

Personne n'a baraguiné de chtite phrase pour le moment !


Ajouter un Commentaire

Pour poster un commentaire, vous devez être identifié. Vous pouvez choisir parmi ces trois méthodes d'identification:

Compte la Ferme du Web

Identifiez-vous
Inscrivez-vous

Compte Facebook

Connexion avec Facebook

Compte Twitter

Connexion avec votre compte twitter
Rechercher sur la Ferme du web