Ponctuation et CSS content

Punctuation
Copyright : Emily Mathews

La propriété content en CSS permet de composer du texte via le langage CSS. Cette propriété est assez bien supportée par les navigateurs actuels car même Internet Explorer 8 est en mesure de la comprendre.

Seulement voilà, on peut parfois se retrouver bien embêté à l’utilisation de content car certains caractères, liés à la ponctuation, ne sont pas correctement encodés 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 ont pour particularité de toujours commencer par un antislash. Ci-dessous un tableau non exhaustif des caractères liés à la typographie et la ponctuation et leur équivalence en langage HTML, ASCII et Unicode.

Sym.HTMLASCIIDescriptionCSS 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.