Symbole de tick en HTML / XHTML
Nous devons afficher symbole de la coche (✓ ou ✔) dans une application Web interne et, dans l’idéal, éviter d’utiliser une image.
Doit fonctionner à partir de IE 6.0.2900 sur une boîte XP, idéalement, nous avons besoin que ce soit multi-navigateur (IE + versions récentes de FF).
L’affichage suivant présente des zones bien que le codage du navigateur soit défini sur UTF-8 (META fonctionne correctement et non le problème). La police par défaut est Times New Roman (c'est peut-être un problème, mais essayer Lucida Sans Unicode n'aide pas et je n'ai ni Arial Unicode MS, ni Lucida Grande n'est installé).
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
</head>
<body>
✓ ✔
</body>
</html>
Toute aide appréciée.
Ce qui suit fonctionne sous IE 6.0 et IE 7:
<html>
<head>
</head>
<body>
<span style="font-family: wingdings; font-size: 200%;">ü</span>
</body>
</html>
J'apprécierais que quelqu'un puisse vérifier sous FF sous Windows. Je suis presque sûr que cela ne fonctionnera pas sur une machine autre que Windows.
Je pense que vous utilisez des valeurs Unicode moins bien prises en charge, qui ne comportent pas toujours de glyphes pour tous les points de code.
Essayez les caractères suivants:
- ☐ ( x261 en hexadécimal Unicode [décimal HTML:
☐]): une case à cocher vide (non cochée) - ☑ ( x2611 [Décimal HTML:
☑]): version vérifiée de la case à cocher précédente. - ✓ ( x271 [Décimal HTML:
✓]) - ✔ ( x2714 [Décimal HTML:
✔])
Edit: Il semble y avoir une certaine confusion à propos du premier symbole ici, ☐/0x2610. Ceci est une case à cocher vide (non cochée), donc si vous voyez une boîte, c'est comme cela qu'elle est supposée être. C'est la contrepartie de/0x2611, qui est la version vérifiée.
Tout d'abord, vous devez comprendre que vous n'avez pas réellement besoin d'utiliser des entités HTML - tant que le codage de votre document HTML est déclaré correctement en tant que UTF-8, vous pouvez simplement copier/coller ces symboles dans votre fichier/script côté serveur/JavaScript/peu importe.
Ceci dit, voici la liste exhaustive de tous les caractères UTF-8/entités HTML pertinents en rapport avec ce sujet:
- ☐ (hex:
☐/dec:☐): urne (vide, c'est ce que c'est censé être) - ☑ (hex:
☑/dec:☑): urne avec chèque - ☒ (hex:
☒/dec:☒): urne avec x - ✓ (hex:
✓/dec:✓): coche, équivalent à✓et✓dans la plupart des navigateurs - ✔ (hex:
✔/dec:✔): coche lourde - ✗ (hex:
✗/dec:✗): bulletin de vote x - ✘ (hex:
✘/dec:✘): bulletin de vote lourd x - ???? (⚠ hex:
🗸/dec🗸): coche légère (mal pris en charge à partir de 2017) - ✅ (⚠ hex:
✅/dec:✅): coche épaisse blanche (support mixte à partir de 2017) - ???? (⚠ hex:
🗴/dec:🗴): script de vote X (mal pris en charge en 2017) - ???? (⚠ hex:
🗶/dec:🗶): bulletin de vote en caractères gras X (mal pris en charge en 2017) - ⮽ (⚠ hex:
⮽/dec:⮽): urne avec lumière X (mal supportée à partir de 2017) - ???? (⚠ hex:
🗵/dec:🗵): urne avec script X (mal soutenue en 2017) - ???? (⚠ hex:
🗹/dec:🗹): urne avec chèque en gras (mal soutenu à partir de 2017) - ???? (⚠ hex:
🗷/dec:🗷): urne avec écriture en gras X (mal pris en charge en 2017)
Vérification des polices Web pour les symboles de coche? Voici un exemple prêt à l'emploi pour les plus courants: A☐B☑C☒D✓E✔F✗G✘H - copiez/collez-le simplement dans la zone de texte de votre fournisseur de polices Web et voyez quelles polices prennent en charge quels symboles de graduation.
L'ordinateur client a besoin d'une police appropriée comportant un glyphe pour que ce caractère puisse l'afficher. Mais Times New Roman ne le fait pas. Essayez Arial Unicode MS ou Lucida Grande à la place:
<span style="font-family: Arial Unicode MS, Lucida Grande">
✓ ✔
</span>
Cela fonctionne pour moi sous Windows XP dans IE 5.5, IE 6.0, FF 3.0.6.
J'utilise normalement la police fontawesome ( http://fontawesome.io/icon/check/ ), vous pouvez l'utiliser dans des fichiers html:
<i class="fa fa-check"></i>
ou en css:
content: "\f00c";
font-family: FontAwesome;
Pourquoi n'utilisez-vous pas l'élément de case à cocher d'entrée HTML en mode lecture seule?
<input type="checkbox" disabled="disabled" /> and
<input type="checkbox" checked="checked" disabled="disabled" />
Je suppose que cela fonctionnera sur tous les navigateurs.
Je rencontre le même problème et aucune des suggestions ne fonctionne (Firefox sous Windows XP).
J'ai donc trouvé un solution de contournement en utilisant des données d'image pour afficher une petite coche:
span:before {
content:url("data:image/gif;base64,R0lGODlhCgAKAJEAAAAAAP///////wAAACH5BAEAAAIALAAAAAAKAAoAAAISlG8AeMq5nnsiSlsjzmpzmj0FADs=");
}
Bien sûr, vous pouvez créer votre propre image cochée et utiliser un convertisseur pour l'ajouter en tant que données: image/gif. J'espère que cela t'aides.
Arrivé très tard à la fête, j’ai trouvé que ✓ (✓) fonctionnait à Opera. Je ne l'ai pas testé sur d'autres navigateurs, mais cela pourrait être utile pour certaines personnes.
bien que définit le codage du navigateur sur UTF-8
(Si vous utilisez des références de caractères numériques bien sûr, le codage utilisé n'a pas d'importance, les navigateurs obtiendront le point de code Unicode approprié directement à partir du numéro.)
<span style="font-family: wingdings; font-size: 200%;">ü</span>
J'apprécierais si quelqu'un pouvait vérifier sous FF sous Windows. Je suis à peu près sûr que cela ne fonctionnera pas sur une machine autre que Windows.
Échec pour moi dans Firefox 3, Opera et Safari. Curieusement, fonctionne dans l'autre navigateur Webkit, Chrome. Échec aussi sous Linux (évidemment, Wingdings n’y est pas installé; il est installé sur les Mac, mais cela ne vous aidera pas si Safari ne l’a pas).
En outre, il s’agit d’un vilain stratagème - ce caractère est à toutes fins pratiques "ü" et apparaîtra ainsi sous des formes telles que les moteurs de recherche ou si le texte est copié-collé. Les points de code Unicode appropriés sont la solution à moins que vous n’ayez vraiment aucune alternative.
Le problème est qu’aucune police fournie avec Windows ne fournit U + 2713 CHECK MARK (‘✓’). Le seul que vous êtes susceptible de trouver sur une machine Windows est "Arial Unicode MS", sur lequel il ne faut pas compter. Donc à la fin, je pense que vous devrez soit:
- utiliser un caractère différent qui est mieux pris en charge (par exemple. "●" - bullet , tel qu'utilisé par le SO), ou
- utilisez une image avec “✓” comme texte alternatif.
.className {
content: '\✓';
}
En utilisant le contenu CSS, vous pouvez afficher une coche avec une image ou un autre code.
√ (symbole de la racine carrée, # 8730;) serait-il suffisant?
Vous pouvez également vous assurer que vous définissez l'en-tête Content-Type:avant envoyer des données au navigateur. Spécifier simplement la balise <meta> content-type peut ne pas être suffisant pour inciter les navigateurs à utiliser le bon jeu de caractères.
Solution utilisant Wingdings qui n’est pas unicode et ne fonctionne pas sous Linux sans Wingdings installé.
Crossed Checkbox
<div style="font-family: Wingdings;">û</div> ☒
Checked Checkbox
<div style="font-family: Wingdings;">ü</div> ☑
Cross
<div style="font-family: Wingdings;">ý</div> ✗
Check
<div style="font-family: Wingdings;">þ</div> ✓
Vous pouvez en ajouter un petit blanc avec un fichier GIF codé en Base64 ( générateur en ligne ici ):
url("data:image/gif;base64,R0lGODlhCwAKAIABAP////3cnSH5BAEKAAEALAAAAAALAAoAAAIUjH+AC73WHIsw0UCjglraO20PNhYAOw==")
Avec Chrome, par exemple, je l'utilise pour styliser le contrôle de case à cocher:
INPUT[type=checkbox]:focus
{
outline:1px solid rgba(0,0,0,0.2);
}
INPUT[type=checkbox]
{
background-color: #DDD;
border-radius: 2px;
-webkit-appearance: button;
width: 17px;
height: 17px;
margin-top: 1px;
cursor:pointer;
}
INPUT[type=checkbox]:checked
{
background:#409fd6 url("data:image/gif;base64,R0lGODlhCwAKAIABAP////3cnSH5BAEKAAEALAAAAAALAAoAAAIUjH+AC73WHIsw0UCjglraO20PNhYAOw==") 3px 3px no-repeat;
}
Si vous le vouliez simplement dans une balise IMG, cochez la case suivante:
<img alt="" src="data:image/gif;base64,R0lGODlhCwAKAIABAP////3cnSH5BAEKAAEALAAAAAALAAoAAAIUjH+AC73WHIsw0UCjglraO20PNhYAOw==" width="11" height="10">
vous pouvez utiliser ⊕ ou