TextMate : bundle CSS, commande "Convertir la sélection en Unicode"

piouPiouM — Fri, 31 Jul 2009 12:02:35 +0000

La propriété CSS content qui s’utilise de concert avec les sélecteurs :before ou :after, sert essentiellement pour enrichir¹ le rendu d’un contenu HTML existant. Pratique, ajouter un petit en rythme après le texte « j’aime coder » ne pose aucun problème. Cependant, si nous sommes amenés à insérer des caractères non-ASCII ça se complique.

Chercher la représentation Unicode d’un caractère

La représentation Unicode d’un caractère peut se trouver de plusieurs manières :

en perdant son temps dans la table des caractères Unicode ;
en s’aidant d’une extension Firefox sic ;
via la palette des caractères de Mac OS X, en survolant le caractère à insérer. Son code Unicode s’affiche alors dans l’infobulle.

Affichage de la représentation Unicode d’un caractère.

Dans notre feuille de styles, nous insérons le nombre héxadécimal récupéré préfixé du caractère d’échappement \, sans oublier de supprimer toute pollution comme 0x0. Nous obtiendrons ainsi :

♫ : \266b
⌘ : \2318

Ce qui se traduit dans une CSS par :

a:after {
  content:"\266b";
}

Nous arrivons à nos fins, mais ne pourrait-on pas accélérer le processus ?

Un coup de TextMate

Rien de plus simple avec TextMate. Téléchargez et décompressez l’archive qui suit². Double-cliquez sur le fichier tmCommand pour l’installer.

Convert Selection to Unicode.tmCommand (659 octets)

La nouvelle commande Convert Selection to Unicode est maintenant disponible dans le bundle CSS et s’active par le raccourci clavier ⌃⇧X sur tout caractère ou texte sélectionné.

Une astuce pour la route

L’espace insécable (entité caractère ) s’insère au clavier via le raccourci clavier ⌥ + Espace et a pour représentation Unicode \A0.

Ressources

Blog & Blues : Feuilles de style, jeux et codage de caractères.
nanoum blog : before et after

Continuez votre lecture sur des sujets similaires

et non pour générer un contenu indispensable à la compréhension de la page. ↩
la commande est également disponible sous la forme d’un Gist. ↩