Les caractères accentués et spéciaux dans les fichiers Html, Js et Css.

Le problème des accents mal interprétés est souvent lié à la fusion de ressources qui ne sont pas encodées de la même façon :
- des données d'une base de données qui n'ont pas le même encodage que celui de la page.
- des fichiers externes qui n'ont pas le même encodage que celui de la page.
- etc. ...

Pour résoudre ces problèmes encodage, utilisez le code spécifique du caractère.

Encodage des caractères spéciaux et accentués pour CSS.

En CSS, vous pouvez insérer du texte en utilisant la propriété Css . A priori, seul le format hexadécimal du caractère est utilisable, 6 décimales soit \+code hexadécimal (insensible à la casse). Par exemple pour le caractère accentué "à" : \0000e1.

Attention à l'espace (représenté ci-dessous par *) entre le caractère accentué et la lettre suivante, il est ignoré.
- "\0000e0*la" donne "àla"
- "\0000e0**la" donne "à la"
- "\0000e0\000020la" donne "à la"

Exemple :

Si vous ne voyez pas de caractère accentué ci-dessus, c'est que votre navigateur ne prend pas en compte les sélecteurs Css , ou la propriété Css .

Si l'élément dans lequel est inséré le contenu est de type : pre alors \00000a (saut de ligne) est interprété comme un saut de ligne, sinon comme un espace.

Le texte inséré via la propriété Css , ne remonte pas dans le flux DOM. Vous ne pourrez pas à ce jour (04/2014) récupérer ce texte en Javascript.
Exemple concret, getContenu() récupère le contenu de bloc de code ci-dessus "Exemple : ...".

function getContenu(){
 var obj = document.getElementById('codecsstest1');
 if(obj){ alert(obj.innerHTML); }
}

Encodage des caractères accentués et spéciaux pour HTML.

Plusieurs formats d'encodages sont utilisables :
- Le code hexadécimal dont le format d'encodage est &#x+code hexadécimal;, par exemple pour le caractère accentué "ô" cela donne ô, le code hexadecimal est insensible à la casse.
- Le code décimal dont le format d'encodage est &#+code décimal;, par exemple pour le caractère accentué "ô" cela donne ô, le code decimal est insensible à la casse.
- Le code HTML dont le format d'encodage, le code est sensible à la casse. Tous les caractères ne possèdent pas un code HTML.

Encodage des caractères accentués et spéciaux pour Javascript.

Plusieurs formats d'encodages sont utilisables entre autres :
- l'octale dont le format est \+code octal, par exemple pour le caractère accentué "é" cela donne \351.
- l'hexadécimal : \x+code hexadécimal ou \u+code hexadécimal, par exemple pour le caractère accentué "é" cela donne \xe9 ou \u00e9. Le code hexadecimal est insensible à la casse.
Je vous conseille d'utiliser le format \u+code hexadécimal qui "bug" le moins.

Faites un choix pour voir le résultat. ė

Convertisseur

Détecter les problèmes d'encodage des caractères accentués et spéciaux :

Voici 3 petites règles qui vont vous permettre de comprendre le problème d'affichage des caractères spéciaux et accentués.

Si dans votre page web vos accents ont la forme de "�", c'est que le texte est encodé en ISO et que le navigateur l'affiche en UTF-8.
Si dans votre page web vos accents ont la forme de "é", "î" ou "Ã", c'est que le texte est encodé en UTF-8 et que votre navigateur l'affiche en ISO.
Si dans votre page web vos accents ont la forme de "￾", c'est que généralement le texte est encodé en WINDOWS-1252 et que le navigateur l'affiche en UTF-8.

Tableau des correspondances des encodages de caractères

Voici un tableau de correspondances non exhaustives avec les principaux caractères accentués et spéciaux ISO-8859-1.
Vous trouverez d'autres caractères accentués et spéciaux classés par types.

(1) Tabulation : espacement représentant 8 caractères horizontalement.
(2) Espace insécable : empêche la césure d'un mot en fin de ligne.
(3) Saut de ligne : Le code génère un saut de ligne seulement s'il est dans une balise <pre> ou si l'élément le contenant a une propriété css white-space définie à pre, sinon il est interprété comme un espace.

Tableau de codes d'encodage de caractères spéciaux ou accentués unicode sur le thème ""
Car. Desc. Css Js Html Hex. Html Dec. Html Nom Url
(1)caractère tabulation\000009 | \u0009 | &#x09; | &#9; | %09 |
(2)caractère espace insécable\0000A0 | \u00a0 | &#xA0; |  &#160; |  &nbsp; |  %C2%A0 |
(3)caractère saut de ligne\00000A | \u000A | &#x0A; | &#10; | %0A |
Àcaractère A accent grave majuscule\0000C0 | \u00c0 | &#xC0; | À&#192; | À&Agrave; | À%C3%80 |
àcaractère a accent grave\0000E0 | \u00e0 | &#xE0; | à&#224; | à&agrave; | à%C3%A0 |
Ácaractère A accent aigu majuscule\0000C1 | \u00c1 | &#xC1; | Á&#193; | Á&Aacute; | Á%C3%81 |
ácaractère a accent aigu\0000E1 | \u00e1 | &#xE1; | á&#225; | á&aacute; | á%C3%A1 |
Âcaractère A accent circonflexe majuscule\0000C2 | \u00c2 | &#xC2; | Â&#194; | Â&Acirc; | Â%C3%82 |
âcaractère a accent circonflexe\0000E2 | \u00e2 | &#xE2; | â&#226; | â&acirc; | â%C3%A2 |
Ãcaractère A tilde majuscule\0000C3 | \u00c3 | &#xC3; | Ã&#195; | Ã&Atilde; | Ã%C3%83 |
ãcaractère a tilde\0000E3 | \u00e3 | &#xE3; | ã&#227; | ã&atilde; | ã%C3%A3 |
Äcaractère A tréma majuscule\0000C4 | \u00c4 | &#xC4; | Ä&#196; | Ä&Auml; | Ä%C3%84 |
äcaractère a tréma\0000E4 | \u00e4 | &#xE4; | ä&#228; | ä&auml; | ä%C3%A4 |
Åcaractère A diacritée d'un rond en chef majuscule\0000C5 | \u00c5 | &#xC5; | Å&#197; | Å&Aring; | Å%C3%85 |
åcaractère a diacritée d'un rond en chef\0000E5 | \u00e5 | &#xE5; | å&#229; | å&aring; | å%C3%A5 |
Æcaractère E dans l'A ou A E collés majuscule\0000C6 | \u00c6 | &#xC6; | Æ&#198; | Æ&AElig; | Æ%C3%86 |
æcaractère e dans l'a ou a e collés\0000E6 | \u00e6 | &#xE6; | æ&#230; | æ&aelig; | æ%C3%A6 |
Çcaractère C cédille majuscule\0000C7 | \u00c7 | &#xC7; | Ç&#199; | Ç&Ccedil; | Ç%C3%87 |
çcaractère c cédille\0000E7 | \u00e7 | &#xE7; | ç&#231; | ç&ccedil; | ç%C3%A7 |
Ècaractère E accent grave majuscule\0000C8 | \u00c8 | &#xC8; | È&#200; | È&Egrave; | È%C3%88 |
ècaractère e accent grave\0000E8 | \u00e8 | &#xE8; | è&#232; | è&egrave; | è%C3%A8 |
Écaractère E accent aigu majuscule\0000C9 | \u00c9 | &#xC9; | É&#201; | É&Eacute; | É%C3%89 |
écaractère e accent aigu\0000E9 | \u00e9 | &#xE9; | é&#233; | é&eacute; | é%C3%A9 |
Êcaractère E accent circonflexe majuscule\0000CA | \u00ca | &#xCA; | Ê&#202; | Ê&Ecirc; | Ê%C3%8A |
êcaractère e accent circonflexe\0000EA | \u00ea | &#xEA; | ê&#234; | ê&ecirc; | ê%C3%AA |
Ëcaractère E tréma majuscule\0000CB | \u00cb | &#xCB; | Ë&#203; | Ë&Euml; | Ë%C3%8B |
ëcaractère e tréma\0000EB | \u00eb | &#xEB; | ë&#235; | ë&euml; | ë%C3%AB |
Ìcaractère I accent grave majuscule\0000CC | \u00cc | &#xCC; | Ì&#204; | Ì&Igrave; | Ì%C3%8C |
ìcaractère i accent grave\0000EC | \u00ec | &#xEC; | ì&#236; | ì&igrave; | ì%C3%AC |
Ícaractère I accent aigu majuscule\0000CD | \u00cd | &#xCD; | Í&#205; | Í&Iacute; | Í%C3%8D |
ícaractère i accent aigu\0000ED | \u00ed | &#xED; | í&#237; | í&iacute; | í%C3%AD |
Îcaractère I accent circonflexe majuscule\0000CE | \u00ce | &#xCE; | Î&#206; | Î&Icirc; | Î%C3%8E |
îcaractère i accent circonflexe\0000EE | \u00ee | &#xEE; | î&#238; | î&icirc; | î%C3%AE |
Ïcaractère I tréma majuscule\0000CF | \u00cf | &#xCF; | Ï&#207; | Ï&Iuml; | Ï%C3%8F |
ïcaractère i tréma\0000EF | \u00ef | &#xEF; | ï&#239; | ï&iuml; | ï%C3%AF |
Ðcaractère D barré majuscule\0000D0 | \u00d0 | &#xD0; | Ð&#208; | Ð&ETH; | Ð%C3%90 |
ðcaractère d barré\0000F0 | \u00f0 | &#xF0; | ð&#240; | ð&eth; | ð%C3%B0 |
Ñcaractère N tilde majuscule\0000D1 | \u00d1 | &#xD1; | Ñ&#209; | Ñ&Ntilde; | Ñ%C3%91 |
ñcaractère n tilde\0000F1 | \u00f1 | &#xF1; | ñ&#241; | ñ&ntilde; | ñ%C3%B1 |
Òcaractère O accent grave majuscule\0000D2 | \u00d2 | &#xD2; | Ò&#210; | Ò&Ograve; | Ò%C3%92 |
òcaractère o accent grave\0000F2 | \u00f2 | &#xF2; | ò&#242; | ò&ograve; | ò%C3%B2 |
Ócaractère O accent aigu majuscule\0000D3 | \u00d3 | &#xD3; | Ó&#211; | Ó&Oacute; | Ó%C3%93 |
ócaractère o accent aigu\0000F3 | \u00f3 | &#xF3; | ó&#243; | ó&oacute; | ó%C3%B3 |
Ôcaractère O accent circonflexe majuscule\0000D4 | \u00d4 | &#xD4; | Ô&#212; | Ô&Ocirc; | Ô%C3%94 |
ôcaractère o accent circonflexe\0000F4 | \u00f4 | &#xF4; | ô&#244; | ô&ocirc; | ô%C3%B4 |
Õcaractère O tilde majuscule\0000D5 | \u00d5 | &#xD5; | Õ&#213; | Õ&Otilde; | Õ%C3%95 |
õcaractère o tilde\0000F5 | \u00f5 | &#xF5; | õ&#245; | õ&otilde; | õ%C3%B5 |
Öcaractère O tréma majuscule\0000D6 | \u00d6 | &#xD6; | Ö&#214; | Ö&Ouml; | Ö%C3%96 |
öcaractère o tréma\0000F6 | \u00f6 | &#xF6; | ö&#246; | ö&ouml; | ö%C3%B6 |
Øcaractère O barré obliquement majuscule\0000D8 | \u00d8 | &#xD8; | Ø&#216; | Ø&Oslash; | Ø%C3%98 |
øcaractère o barré obliquement\0000F8 | \u00f8 | &#xF8; | ø&#248; | ø&oslash; | ø%C3%B8 |
Ùcaractère U accent grave majuscule\0000D9 | \u00d9 | &#xD9; | Ù&#217; | Ù&Ugrave; | Ù%C3%99 |
ùcaractère u accent grave\0000F9 | \u00f9 | &#xF9; | ù&#249; | ù&ugrave; | ù%C3%B9 |
Úcaractère U accent aigu majuscule\0000DA | \u00da | &#xDA; | Ú&#218; | Ú&Uacute; | Ú%C3%9A |
úcaractère u accent aigu\0000FA | \u00fa | &#xFA; | ú&#250; | ú&uacute; | ú%C3%BA |
Ûcaractère U accent circonflexe majuscule\0000DB | \u00db | &#xDB; | Û&#219; | Û&Ucirc; | Û%C3%9B |
ûcaractère u accent circonflexe\0000FB | \u00fb | &#xFB; | û&#251; | û&ucirc; | û%C3%BB |
Ücaractère U tréma majuscule\0000DC | \u00dc | &#xDC; | Ü&#220; | Ü&Uuml; | Ü%C3%9C |
ücaractère u tréma\0000FC | \u00fc | &#xFC; | ü&#252; | ü&uuml; | ü%C3%BC |
Ýcaractère Y accent aigu majuscule\0000DD | \u00dd | &#xDD; | Ý&#221; | Ý&Yacute; | Ý%C3%9D |
ýcaractère y accent aigu\0000FD | \u00fd | &#xFD; | ý&#253; | ý&yacute; | ý%C3%BD |
¬caractère crochet de négation\0000AC | \u00ac | &#xAC; | ¬&#172; | ¬&not; | ¬%C2%AC |
µcaractère mu\0000B5 | \u00b5 | &#xB5; | µ&#181; | µ&micro; | µ%C2%B5 |
caractère signe astrologique du taureau\002649 | \u2649 | &#x2649; | &#9801; | %E2%99%89 |
caractère pied-de-mouche, fin d'un paragraphe\0000B6 | \u00b6 | &#xB6; | &#182; | &para; | %C2%B6 |
¼caractère un quart\0000BC | \u00bc | &#xBC; | ¼&#188; | ¼&frac14; | ¼%C2%BC |
¾caractère trois quarts\0000BE | \u00be | &#xBE; | ¾&#190; | ¾&frac34; | ¾%C2%BE |
½caractère un demi\0000BD | \u00bd | &#xBD; | ½&#189; | ½&frac12; | ½%C2%BD |
¡caractère point d'exclamation inversé\0000A1 | \u00a1 | &#xA1; | ¡&#161; | ¡&iexcl; | ¡%C2%A1 |
¿caractère point d'interrogation inversé\0000BF | \u00bf | &#xBF; | ¿&#191; | ¿&iquest; | ¿%C2%BF |
«caractère guillemet double ouvrant\0000AB | \u00ab | &#xAB; | «&#171; | «&laquo; | «%C2%AB |
»caractère guillemet double fermant\0000BB | \u00bb | &#xBB; | »&#187; | »&raquo; | »%C2%BB |
?caractère point d'interrogation\00003F | \u003F | &#x3F; | ?&#63; | ?%3F |
"caractère guillemets doubles droits (double quote)\000022 | \u0022 | &#x22; | "&#34; | "&quot; | "%22 |
&caractère et commercial, esperluette\000026 | \u0026 | &#x26; | &&#38; | &&amp; | &%26 |
<caractère inférieur à\00003C | \u003C | &#x3C; | <&#60; | <&lt; | <%3C |
>caractère supérieur à\00003E | \u003E | &#x3E; | >&#62; | >&gt; | >%3E |
£caractère livre sterling, Royaume-Uni\0000A3 | \u00a3 | &#xA3; | £&#163; | £&pound; | £%C2%A3 |
¥caractère yen ou yuan \0000A5 | \u00a5 | &#xA5; | ¥&#165; | ¥&yen; | ¥%C2%A5 |
§caractère désigne un paragraphe ou section\0000A7 | \u00a7 | &#xA7; | §&#167; | §&sect; | §%C2%A7 |
caractère euro, zone Euro\0020AC | \u20ac | &#x20AC; | &#8364; | &euro; | %E2%82%AC |
©caractère copyright et +\0000A9 | \u00a9 | &#xA9; | ©&#169; | ©&copy; | ©%C2%A9 |
®caractère marque déposée et +\0000AE | \u00ae | &#xAE; | ®&#174; | ®&reg; | ®%C2%AE |
°caractère degré\0000B0 | \u00b0 | &#xB0; | °&#176; | °&deg; | °%C2%B0 |
Þcaractère thorn majuscule\0000DE | \u00de | &#xDE; | Þ&#222; | Þ&THORN; | Þ%C3%9E |
þcaractère thorn\0000FE | \u00fe | &#xFE; | þ&#254; | þ&thorn; | þ%C3%BE |
ßcaractère eszett ou scharfes S majuscule\0000DF | \u00df | &#xDF; | ß&#223; | ß&szlig; | ß%C3%9F |
ÿcaractère y tréma\0000FF | \u00ff | &#xFF; | ÿ&#255; | ÿ&yuml; | ÿ%C3%BF |
caractère bouton double flèche vers la droite et simple trait\0023ED | \u23ed | &#x23ED; | &#9197; | %E2%8F%AD |