Liga­tures privées et rempla­ce­ment de textes


Pendant quelques années nous avons cher­ché le saint Graal pour rempla­cer du texte par des images dans les pages HTML. Il y a eu sIFR qui néces­si­tait le plugin Flash, des bidouilles à base d’in­den­ta­tion et marges CSS néga­tives qui risquaient de casser pour ceux qui n’af­fi­chaient pas les images, des trucs horribles à base de display:none qui empê­chaient le copier/coller, etc.

J’avais pas mal laissé tombé quand j’ai vu que certains jouaient avec des polices de carac­tères à la wing­dings. Ça ne faisait pas de rempla­ce­ment et ça néces­si­tait d’ajou­ter des carac­tères arbi­traires qui risquaient de mal passer en cas d’ab­sence de la police choi­sie.

Sauf que visi­ble­ment ils ont trouvé le saint Graal il y a un bon moment et personne ne m’a prévenu. Alors si vous aussi on ne vous a pas prévenu, regar­dez Symbol­set et Liga­ture Symbols.

L’idée c’est d’uti­li­ser les liga­tures. Les liga­tures ce sont ces arte­facts qui permettent de rempla­cer certaines suites de carac­tères par un visuel spéci­fique afin d’en simpli­fier la lecture. On cite souvent « fl » et fi » comme exemple de liga­ture mais Wiki­pe­dia a une superbe illus­tra­tion.

L’as­tuce est de décla­rer une police person­na­li­sée où « se connec­ter » est remplacé par une liga­ture qui contient l’icône corres­pon­dante. C’est vecto­riel, ça s’adapte en taille comme en couleur, ça se dégrade parfai­te­ment pour ceux qui ne savent pas relire la liga­ture ou la police de carac­tères, et pour le système ça reste encore le mot « se connec­ter » donc c’est tota­le­ment trans­pa­rent. Bref, comme en plus c’est léger en poids, on a presque trouvé le saint Graal. Pourquoi personne ne m’avais rien dit ? Comment ai-je pu passer à côté ?

Vous avez même un outil en ligne qui fait tout ça : Icomoon


5 réponses à “Liga­tures privées et rempla­ce­ment de textes”

    • côté typo c’est généralement 2 ou 3 caractères mais visiblement ce n’est pas limité du point de vue techniques, il s’agit bien d’abuser de la choses pour en faire un comportement non prévu à l’origine

    • La technique utilisée par github est « plus propre », dans le sens qu’elle utilise des emplacements prévus pour. Leur seul point négatif et que j’éviterai de mettre ma main au feu sur l’affichage résultat si la police de caractère perso n’est pas interprétée. La probabilité d’obtenir un carré blanc, un point d’interrogation ou je ne sais quoi d’autre n’est pas nulle AMHA.

      Maintenant si je ne la considère pas, c’est surtout qu’elle répond à une problématique différente : Il s’agit d’ajouter une icône à un texte existant, pas de le remplacer. Pour le remplacer il faudrait réussir à faire disparaitre le texte existant en s’assurant de ne casser ni copier/coller, ni lecture d’écran, ni casser le résultat si la CSS est interprétée mais pas la police de caractères. Toutes les techniques que je connais pour l’instant échouent à un de ces trois critères. La technique des ligatures vise cet autre usage : remplacer un texte déterminé (et pas s’y ajouter).

Laisser un commentaire

Votre adresse e-mail ne sera pas publiée.