Segno di spunta in HTML / XHTML

279

Dobbiamo visualizzare un simbolo di spunta (✓ o ✔) all'interno di un'app Web interna e vorremmo idealmente evitare di utilizzare un'immagine.

Deve funzionare a partire da IE 6.0.2900 su una scatola XP, idealmente abbiamo bisogno che sia cross-browser (IE + versioni recenti di FF).

Di seguito vengono visualizzate le caselle anche se imposta la codifica del browser su UTF-8 (META funziona bene e non il problema). Il carattere predefinito è Times New Roman (potrebbe essere un problema, ma provare Lucida Sans Unicode non aiuta e non ho installato Arial Unicode MS, né Lucida Grande).

<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
</head>
<body>
 &#10003; &#10004;
</body>
</html>

Qualsiasi aiuto apprezzato.

I seguenti lavori funzionano con IE 6.0 e IE 7:

<html>
<head>

</head>
<body>
 <span style="font-family: wingdings; font-size: 200%;">&#252;</span>
</body>
</html>

Gradirei se qualcuno potesse controllare sotto FF su Windows. Sono abbastanza sicuro che non funzionerà su una scatola non Windows.

html  xhtml 
— Vlad Gudim
fonte
1
Come dovrebbe essere un simbolo di spunta?
— John Feminella,
— Sam Hasler
2
Sam, per favore, dai un'occhiata alla domanda.
— Vlad Gudim,
@Totophil, so che parla delle stesse entità, ma suggerisce anche che il server invii un'intestazione HTTP effettiva Content-Type: text / html; charset = utf-8 e il problema che il font in uso potrebbe non contenere glifi per i personaggi utilizzati.
— Sam Hasler,
Qui ci sono un paio: amp-what.com/#q=check%20mark & # x2713 & # x2714
— NDP

Risposte:

454

Penso che tu stia usando valori Unicode meno ben supportati, che non hanno sempre glifi per tutti i punti di codice.
Prova i seguenti caratteri:

  • ☐ ( 0x2610 in Unicode esadecimale [HTML decimale: &#9744;]): una casella di controllo vuota (non selezionata)
  • ☑ ( 0x2611 [HTML decimale: &#9745;]): la versione selezionata della casella di controllo precedente
  • ✓ ( 0x2713 [HTML decimale: &#10003;])
  • ✔ ( 0x2714 [decimale HTML: &#10004;])

Modifica: sembra esserci un po 'di confusione sul primo simbolo qui, ☐ / 0x2610. Questa è una casella di controllo vuota (non selezionata), quindi se vedi una casella, è così che dovrebbe apparire. È la controparte di ☑ / 0x2611, che è la versione controllata.

— John Feminella
fonte
1
Configurazione aziendale: Win XP Professional + IE 6.0.2900.2180.xpsp_sp2_qfe.070227-2300
— Vlad Gudim
La prima è una scatola per me, il resto funziona bene. Tuttavia, vorrei usare un'immagine, solo per essere sicuro.
— mbillard,
6
Per essere chiari, la prima immagine dovrebbe essere una casella - è una casella vuota!
— John Feminella,
1
@Totophil: Ah, ok. Sto usando Ubuntu e il font sans predefinito che ho configurato in FF ha questi glifi. In Windows, basta usare la mappa dei caratteri per cercare questi glifi e vedere se il font desiderato li possiede. In caso contrario, dovrai sceglierne uno diverso.
— John Feminella,
5
Codice decimale casella vuota: 0x2610 -> 9744. quindi il codice HTML sarà simile allo &#9744;stesso modo per la casella selezionata: 0x2611 -> 9745 e codice HTML&#9745;
— Vikas,
272

Prima di tutto, dovresti capire che in realtà non hai bisogno di usare entità HTML - fintanto che la codifica del tuo documento HTML è dichiarata correttamente come UTF-8, puoi semplicemente copiare / incollare questi simboli nel tuo file / script lato server / JavaScript / qualunque cosa.

Detto questo, ecco l' elenco esaustivo di tutti i caratteri UTF-8 / entità HTML pertinenti relativi a questo argomento:

  • ☐ (hex: &#x2610;/ dec:): &#9744;urne (vuoto, ecco come dovrebbe essere)
  • ☑ (esadecimale: &#x2611;/ dec:) &#9745;: urna con controllo
  • ☒ (esadecimale: &#x2612;/ dec:) &#9746;: urna con x
  • ✓ (esadecimale: &#x2713;/ dec:): &#10003;segno di spunta, equivalente &checkmark;e &check;nella maggior parte dei browser
  • ✔ (hex: &#x2714;/ dec:): &#10004;segno di spunta pesante
  • ✗ (esadecimale: &#x2717;/ dec:) &#10007;: scrutinio x
  • ✘ (esadecimale: &#x2718;/ dec:): &#10008;voto pesante x
  • 🗸 (⚠ hex: &#x1F5F8;/ dec &#128504;): segno di spunta chiaro (scarsamente supportato dal 2017)
  • ✅ (⚠ esadecimale: &#x2705;/ dec :): &#9989;segno di spunta pesante bianco (supporto misto a partire dal 2017)
  • 🗴 (⚠ hex: &#x1F5F4;/ dec :) &#128500;: scheda elettorale X (scarsamente supportata a partire dal 2017)
  • 🗶 (⚠ hex: &#x1F5F6;/ dec :) &#128502;: scrutinio grassetto X (scarsamente supportato a partire dal 2017)
  • ⮽ (⚠ hex: &#x2BBD;/ dec :) &#11197;: urna con luce X (scarsamente supportata a partire dal 2017)
  • 🗵 (⚠ hex: &#x1F5F5;/ dec :) &#128501;: urna con script X (scarsamente supportata a partire dal 2017)
  • 🗹 (⚠ hex: &#x1F5F9;/ dec :) &#128505;: urna con controllo in grassetto (scarsamente supportato a partire dal 2017)
  • 🗷 (⚠ hex: &#x1F5F7;/ dec :) &#128503;: urna con grassetto X (scarsamente supportato a partire dal 2017)

Dai un'occhiata ai font web per i simboli di spunta? Ecco un esempio pronto per l'uso per quelli più comuni: A☐B☑C☒D✓E✔F✗G✘H- basta copiarlo / incollarlo nella casella di testo di esempio del proprio provider webfont e vedere quali caratteri supportano i simboli di spunta.

— Bogdan Stăncescu
fonte
17

Il computer client necessita di un carattere appropriato che contenga un glifo affinché questo personaggio possa visualizzarlo. Ma Times New Roman no. Prova invece Arial Unicode MS o Lucida Grande :

<span style="font-family: Arial Unicode MS, Lucida Grande">
    &#10003; &#10004;
</span>

Questo funziona per me su Windows XP in IE 5.5, IE 6.0, FF 3.0.6.

— Gumbo
fonte
Non ho ricevuto nessuno dei due font, solo Lucida Sans Unicode che da remoto sembra un font Unicode ma non ha i segni di spunta.
— Vlad Gudim,
Poi elencare alcuni tipi di carattere che hanno un glifo per questo personaggio: font-family: Arial Unicode MS, Lucida Sans Unicode, Lucida Grande.
— Gumbo,
Gumbo, non funziona. Inoltre non ho installato Arial Unicode MS e Lucida Grande.
— Vlad Gudim,
Si tratta del più vicino possibile, ma sfortunatamente Lucida Sans Unicode non fornisce U + 2713/2714.
— Bobince,
11

Perché non usi l'elemento della casella di controllo di input HTML in modalità di sola lettura

<input type="checkbox" disabled="disabled" /> and
<input type="checkbox" checked="checked" disabled="disabled" />

Presumo che questo funzionerà su tutti i browser.

— DREJC
fonte
6
Non abbiamo bisogno di un controllo, solo un'indicazione che una certa opzione è disponibile all'interno di una matrice. L'uso di un controllo disabilitato sarebbe sbagliato in questo caso.
— Vlad Gudim,
11

Ho riscontrato lo stesso problema e nessuno dei suggerimenti ha funzionato (Firefox su Windows XP).

Quindi ho trovato una possibile soluzione utilizzando i dati delle immagini per visualizzare un piccolo segno di spunta:

span:before {
    content:url("data:image/gif;base64,R0lGODlhCgAKAJEAAAAAAP///////wAAACH5BAEAAAIALAAAAAAKAAoAAAISlG8AeMq5nnsiSlsjzmpzmj0FADs=");
}

Ovviamente puoi creare la tua immagine del segno di spunta e usare un convertitore per aggiungerla come dati: image / gif. Spero che questo ti aiuti.

— Kai Noack
fonte
8

sebbene imposta la codifica del browser su UTF-8

(Se stai usando riferimenti a caratteri numerici, ovviamente, non importa quale codifica venga utilizzata, i browser otterranno il punto di codice Unicode corretto direttamente dal numero.)

<span style="font-family: wingdings; font-size: 200%;">&#252;</span>

Gradirei se qualcuno potesse controllare sotto FF su Windows. Sono abbastanza sicuro che non funzionerà su una scatola non Windows.

Non funziona per me in Firefox 3, Opera e Safari. Curiosamente, funziona nell'altro browser Webkit, Chrome. Fallisce anche su Linux (ovviamente, poiché Wingdings non è installato lì; è installato su Mac, ma ciò non ti aiuta se Safari non lo ha).

Inoltre è un trucco piuttosto brutto - quel personaggio è a tutti gli effetti "ü" e apparirà in quel modo a cose come i motori di ricerca, o se il testo è stato incollato. I punti di codice Unicode corretti sono la strada da percorrere a meno che tu non abbia davvero alcuna alternativa.

Il problema è che nessun font in bundle con Windows fornisce U + 2713 CHECK MARK ('✓'). L'unico che probabilmente troverai su un computer Windows è "Arial Unicode MS", sul quale non si può fare affidamento. Quindi alla fine penso che dovrete:

  • utilizzare un carattere diverso che sia meglio supportato (ad es. '●' - bullet , come utilizzato da SO), oppure
  • usa un'immagine, con '✓' come testo alternativo.
— bobince
fonte
8

Arrivando molto tardi alla festa, ho scoperto che &check;(✓) ha lavorato in Opera. Non l'ho provato su nessun altro browser, ma potrebbe essere utile per alcune persone.

— Rossum
fonte
4
Vale la pena notare che &check;(e &checkmark;) entrambi valutano &#10003;, che è quello che utilizza la risposta principale. È un'entità carattere HTML5 e non funzionerebbe in IE6.
— James Donnelly,
5 
.className {
   content: '\&#x2713';
}

Utilizzando la proprietà del contenuto CSS puoi mostrare il segno di spunta con un'immagine o un altro segno di codice.

— s-Sharma
fonte
Non sono sicuro: w3schools.com/cssref/pr_gen_content.asp mostra la comapatibily con firefox
— s-sharma,
todomvc.com/labs/architecture-examples/react controlla se funziona o meno poiché utilizza il contenuto per il segno di spunta.
— s-sharma,
4
Se vuoi usare i codici utf-8 nei contenuti CSS, in questo modo è possibile:.class{ content: "\2713"; }
— Morteza Ziyae
4

Basterebbe √ (simbolo della radice quadrata, & # 8730;)?

In alternativa, assicurati di impostare l' Content-Type:intestazione prima di inviare i dati al browser. Specificare semplicemente il <meta>tag del tipo di contenuto potrebbe non essere sufficiente per incoraggiare i browser a utilizzare il set di caratteri corretto.

— Ian Kemp
fonte
Grazie! La radice quadrata funziona, ma sembra un po 'errr ... radice quadrata? Ma suppongo in assenza di un'alternativa che probabilmente sarebbe il più vicino possibile.
— Vlad Gudim,
1
A proposito, specificando il meta tag si imposta bene UTF-8 sul mio IE, quindi in questo caso non è questo il problema.
— Vlad Gudim,
1
Una radice quadrata è una radice quadrata e un segno di spunta è un segno di spunta. Mi sembra di mettere un pittogramma sul water in una porta dello spogliatoio.
— Volker E.
1
@VolkerE. Ma sarebbe divertente!
— Dave Newton,
3

Soluzione che utilizza Wingdings che non è basato su Unicode e che non funziona in Linux senza Wingdings installato.

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> ✓
— Nishant
fonte
0

Puoi aggiungerne uno bianco con una GIF codificata Base64 ( generatore online qui ):

url("data:image/gif;base64,R0lGODlhCwAKAIABAP////3cnSH5BAEKAAEALAAAAAALAAoAAAIUjH+AC73WHIsw0UCjglraO20PNhYAOw==")

Con Chrome, ad esempio, lo uso per definire il controllo della casella di controllo:

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;
}

Se lo volevi solo in un tag IMG, dovresti fare il segno di spunta / segno di spunta come:

<img alt="" src="data:image/gif;base64,R0lGODlhCwAKAIABAP////3cnSH5BAEKAAEALAAAAAALAAoAAAIUjH+AC73WHIsw0UCjglraO20PNhYAOw==" width="11" height="10">
— Volomike
fonte
0

L'uso dei caratteri WebDing o WingDing è l'unico modo per raggiungere l'obiettivo di questo argomento: deve funzionare a partire da IE 6.0.2900 . Pertanto ne pubblicherei alcuni qui, nonché alcune correzioni postate sopra:

Cross
<span style="font-family: Wingdings;">&#251;</span><br>
    
Check
<span style="font-family: Wingdings;">&#252;</span><br>

Crossed Checkbox
<span style="font-family: Wingdings;">&#253;</span><br>
    
Checked Checkbox
<span style="font-family: Wingdings;">&#254;</span><br>
    
Empty Checkbox
<span style="font-family: Wingdings;">&#168;</span><br>
    
Thick Check
<span style="font-family: Webdings;">&#97;</span>
Espandi frammento

Riferimento qui: webings di wingdings

— Dmitry Babich
fonte
Utilizzando il nostro sito, riconosci di aver letto e compreso le nostre Informativa sui cookie e Informativa sulla privacy.
Licensed under cc by-sa 3.0 with attribution required.