Caractères unicode non acceptés par les CSS ou le tag couleur

**clavier12AZQSWX** · 09/06/2023, 10h18

bonjour,

je souhaite ajouter des caractères ⬛ colorés mais ils restent noirs.
j'ai tenté 2 méthodes, l'une par TAG, l'autre par CSS :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
<font color="#FF0000">&#x2B1B;</font>
<span style="color:#FF0000">&#x2B1B;</span>

et à chaque fois, le caractère carré reste de couleur noire au lieu d'être rouge. pourquoi ?
Pourtant quand je remplace ⬛ par XXX , la couleur est bien là !

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
<font color="#FF0000">XXX</font>
<span style="color:#FF0000">XXX</span>

est-ce un bug navigateur ou OS ? je suis sous FF Win10 x64

Merci d'avance pour votre réponse et suggestion.

**clavier12AZQSWX** · 09/06/2023, 10h35

par dépit, en attendant j'ai remplacé mon carré unicode par 3 espaces insécables.

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

<span style=\"background-color:#FF0000;">&nbsp;&nbsp;&nbsp;</span>

**Doksuri** · 09/06/2023, 10h48

developer.mozilla.org/fr/docs/Web/HTML/Element/font le tag <font> est obsolete

**clavier12AZQSWX** · 09/06/2023, 11h06

oui je sais qu'il est obsolète mais reste fonctionnel sous FF.
et j'ai testé aussi le span style au cas où... mais sans effet l non plus sur l'unicode.

ps: dommage qu'il n'existe pas des short-tags <red></red> ou <FF0000></FF0000> ce serait plus parlant sinon sémantique

**Doksuri** · 09/06/2023, 11h28

donc tu preconises la creation de 65000 balises pour chaque couleure hexa et *2 pour la version "texte"
et quid des autres types de couleures ? rgb, hsl, hwb...

**CosmoKnacki** · 10/06/2023, 15h37

Le caractère que tu cherches à coloriser est U+2B1B BLACK LARGE SQUARE. Comme son nom l'indique, il est noir et le restera quelque soit la couleur que tu donnes au texte (de la même manière qu'un emoticon dont tu ne peux pas controler la couleur non plus).

**thelvin** · 11/06/2023, 17h51

On notera qu'Unicode fournit des moyens de dé-émojiser les caractères émoji pour qu'ils s'affichent en monochrome comme les caractères non-émoji. (Et aussi un moyen d'émojiser les caractères qui ne sont pas des émojis, genre les lettres de l'alphabet.)

Mais bon forcément il faut aussi avoir des fontes qui gèrent qu'on fasse ça.

Un smiley normal : 😃

Un smiley dé-émojisé : 😃︎

Le gros carré noir : ⬛

Le gros carré noir dé-émojisé : ■︎

Chez moi, le gros carré noir dé-émojisé s'affiche comme le caractère carré noir normal ■ et il est nettement moins gros. Pourtant les codes utilisés dénotent des caractères différents. C'est le rendu choisi quand on prend un caractère et qu'on demande un rendu différent.

Remarque qui n'aide donc pas au problème mais qui vise une description pas trop tronquée de ce que sont les émojis dans Unicode.

**CosmoKnacki** · 11/06/2023, 18h50

Envoyé par thelvin

On notera qu'Unicode fournit des moyens de dé-émojiser les caractères émoji pour qu'ils s'affichent en monochrome comme les caractères non-émoji. (Et aussi un moyen d'émojiser les caractères qui ne sont pas des émojis, genre les lettres de l'alphabet.)

Super! Je cherchais justement un truc du genre hier mais je n'avais trouvé que des variations de teinte de peau pour des personnages et les parties du corps (et aussi comment transformer un grizzly en ours polaire).

Donc en regardant le code source de cette page, le point de code permettant de "démojitiser" est: U+FE0E VARIATION SELECTOR-15, ce qui donne donc:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

<span style="color:#FF0000">&#x2B1B;&#xFE0E;</span>

(chez moi aussi le carré rouge est un peu plus petit).

Le bloc des sélecteurs de variante (variation selectors).

**axolotl_1** · 24/07/2023, 16h31

Il me semble mais peut-être je suis hors sujet que si tu mets dans ton code HTML==>

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
  <head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

...ça résout tous les problèmes

**thelvin** · 24/07/2023, 16h50

Ah non pas du tout. Surtout qu'il utilisait des références de caractères, donc l'encodage n'a aucune importance.

(Par ailleurs, ça fait un bail qu'on peut simplement mettre: <meta charset='utf-8'> .)