CSS Warp — Aligner du texte le long d’un tracé irrégulier avec CSS3

CSS WARP est un générateur CSS3 conçu par Eleqtriq dont les expérimentations font reculer d’un cran les limites du monde réel. En effet, CSSWARP permet d’afficher du texte le long d’une forme vectorielle irrégulière (courbe de bézier, cercle) avec la possibilité d’ajouter des points d’ancrage pour modifier le tracé, à la manière d’Illustrator.

CSS3Warp démontre qu’il est possible d’afficher du texte qui suit une courbe avec CSS and HTML

Différentes options permettent d’aligner le texte par rapport au tracé : alignement en escalier ; selon un axe qui passe par le centre de la forme ; perspective. Il est également possible de jouer sur les mots en modifiant la taille du texte, l’interlettrage, l’interlignage et la police de caractère via Google Fonts Directory.

Une fois que vous avez terminé de jouer avec le plan de travail (`canvas`), il ne reste plus qu’à cliquer pour générer le code HTML et CSS3. Chaque lettre de votre texte se retrouve enveloppée par une balise `span` à laquelle CSS WARP applique la propriété `transform` avec les préfixes pour internet Explorer 9, Webkit, Mozilla et Opera :

#warped .w4 {
    -moz-transform: rotate(-6.85rad);
    -webkit-transform: rotate(-6.85rad);
    -o-transform: rotate(-6.85rad);
    -ms-transform: rotate(-6.85rad);
    transform: rotate(-6.85rad);
    width: 24px;
    height: 25px;
    left: 101.8px;
    top: 150.75px;
}

Il s’agit bien évidement d’un exercice de style pour montrer la puissance de la propriété `transform` et des options qui l’accompagnent. Ce n’est pas vraiment un outil susceptible d’être utilisé au quotidien. D’autant moins que la succession des balises ` span` risque de poser des problèmes d’accessibilité aux lecteurs d’écran ; une image avec l’attribut ` alt` qui va bien est sans doute préférable. Dans ce sens-là, on peut dire qu’une image vaut mille span mots 😉

→ Eleqtriq — Des expérimentations en lien avec la 3D sur le web, des CSS3 et du HTML5.

♥ Merci à Thierry Roget d’Actualité de l’Internet et des outils du Web pour le bon tuyau !