Pendant quelques années nous avons cherché le saint Graal pour remplacer du texte par des images dans les pages HTML. Il y a eu sIFR qui nécessitait le plugin Flash, des bidouilles à base d’indentation et marges CSS négatives qui risquaient de casser pour ceux qui n’affichaient 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 caractères à la wingdings. Ça ne faisait pas de remplacement et ça nécessitait d’ajouter des caractères arbitraires qui risquaient de mal passer en cas d’absence de la police choisie.
Sauf que visiblement 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, regardez Symbolset et Ligature Symbols.
L’idée c’est d’utiliser les ligatures. Les ligatures ce sont ces artefacts qui permettent de remplacer certaines suites de caractères par un visuel spécifique afin d’en simplifier la lecture. On cite souvent « fl » et fi » comme exemple de ligature mais Wikipedia a une superbe illustration.
L’astuce est de déclarer une police personnalisée où « se connecter » est remplacé par une ligature qui contient l’icône correspondante. C’est vectoriel, ça s’adapte en taille comme en couleur, ça se dégrade parfaitement pour ceux qui ne savent pas relire la ligature ou la police de caractères, et pour le système ça reste encore le mot « se connecter » donc c’est totalement transparent. 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 à “Ligatures privées et remplacement de textes”
Soyons fou, jouons avec toutes les ligatures en même temps : http://www.usine.name/typographie/ligature-panatomique/
Sinon un truc m’échappe : ce sont donc des mots entiers qui sont ainsi « ligaturés » et non plus 2-3 caractères ? Bizarre, mais effectivement plus compréhensible textuellement.
Ce genre de police est idéale pour les rébus :-)
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
Il me semble que la technique utilisée par Github est encore meilleure. Comme le dit leur styleguide (https://github.com/styleguide/css/7.0), ils utilisent la section privée d’unicode (http://en.wikipedia.org/wiki/Private_Use_%28Unicode%29). Moins hacky.
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).
Autant pour moi, ton but n’est pas d’avoir des icônes d’interface mais du remplacement de texte. Lu trop vite.