Ponctuation et CSS content

Punctuation
Copyright : Emily Mathews

La propriété content en CSS permet d’afficher du texte en CSS pour bien des navigateurs. Cette propriété est d’ailleurs plutôt bien supportée, car même Internet Explorer 8 est en mesure de la comprendre. Bon, Internet Explorer 7 ne comprend pas cette propriété, mais comme dirait Uma Turman pour Schweppes "Hey, what did you expect ?". :)

Seulement voilà, on peut parfois se retrouver bien embêté à l’utilisation de cette propriété content, car certains caractères, liés à la ponctuation, ne sont pas correctement encodés directement dans les feuilles de style. Il faut en réalité utiliser la valeur Unicode de ces caractères si l’on souhaite les voir s’afficher avec les sélecteurs :before et :after. Les valeurs Unicode commencent toujours par un antislash.

Je vous propose aujourd’hui un tableau, non exhaustif, de caractères liés à la typographie et la ponctuation, telle qu’elles sont connues par les littéraires.

Sym. HTML ASCII Description CSS content
" " " Guillemet double \0022
& & & Esperluette \0026
< &lt; &#60; Signe inférieur \003c
> &gt; &#62; Signe supérieur \003e
  &nbsp; &#160; Espace insécable \00a0
« &laquo; &#171; Guillemet gauche \00ab
» &raquo; &#187; Guillemet droit \00bb
&ensp; &#8194; Espace demi-cadratin \2002
&emsp; &#8195; Espace cadratin \2003
&thinsp; &#8201; Espace maigre \2009
&zwnj; &#8204; Antiliant sans chasse \200C
&zwj; &#8205; Liant sans chasse \200D
&lrm; &#8206; Marque gauche-à-droite \200E
&rlm; &#8207; Marque droite-à-gauche \200F
&ndash; &#8211; Tiret demi-cadratin \2013
&mdash; &#8212; Tiret cadratin \2014
&lsquo; &#8216; Guillemet-apostrophe culbuté \2018
&rsquo; &#8217; Guillemet-apostrophe \2019
&sbquo; &#8218; Guillemet-virgule inférieur \201A
&ldquo; &#8220; Guillemet-apostrophe double culbuté \201C
&rdquo; &#8221; Guillemet-apostrophe double \201D
&bdquo; &#8222; Guillemet-virgule double inférieur \201E
&#8223; Guillemet-virgule double supérieur culbuté \201F
&dagger; &#8224; Obèle \2020
&Dagger; &#8225; Double obèle \2021
&bull; &#8226; Gros point médian \2022
&hellip; &#8230; Points de suspension \2026
&permil; &#8240; Pour mille \2030
&prime; &#8242; Prime \2032
&Prime; &#8243; Double prime \2033
&lsaquo; &#8249; Guillemet simple vers la gauche \2039
&rsaquo; &#8250; Guillemet simple vers la droite \203A

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.