Assinale o símbolo em HTML / XHTML

279

Precisamos exibir um símbolo de marca de seleção (✓ ou ✔) em um aplicativo Web interno e, idealmente, evitamos usar uma imagem.

Tem que trabalhar a partir do IE 6.0.2900 em uma caixa XP, idealmente precisamos que ele seja entre navegadores (IE + versões recentes do FF).

O seguinte exibe caixas, embora defina a codificação do navegador para UTF-8 (o META funciona bem e não é o problema). A fonte padrão é Times New Roman (pode ser um problema, mas experimentar o Lucida Sans Unicode não ajuda e não tenho o Arial Unicode MS nem o Lucida Grande instalado).

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

Qualquer ajuda apreciada.

O seguinte funciona no IE 6.0 e IE 7:

<html>
<head>

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

Eu apreciaria se alguém pudesse verificar em FF no Windows. Tenho certeza de que não funcionará em uma caixa que não seja do Windows.

html  xhtml 
— Vlad Gudim
fonte
1
Como um símbolo de marca de seleção deve se parecer?
— 31119 John Feminella
— Sam Hasler
2
Sam, por favor, dê uma olhada na pergunta.
— Vlad Gudim 18/03/09
@Totophil, eu sei que ele fala sobre as mesmas entidades, mas também sugere que o servidor envie um cabeçalho HTTP real Tipo de Conteúdo: text / html; charset = utf-8, bem como o problema que a fonte em uso pode não conter glifos para os caracteres usados.
— Sam Hasler
Aqui estão algumas: amp-what.com/#q=check%20mark & # x2713 & # x2714
— ndp

Respostas:

454

Acho que você está usando valores Unicode com menos suporte, que nem sempre têm glifos para todos os pontos de código.
Tente os seguintes caracteres:

  • ☐ ( 0x2610 em hexadecimal Unicode [HTML decimal: &#9744;]): uma caixa de seleção vazia (desmarcada)
  • ☑ ( 0x2611 [HTML decimal: &#9745;]): a versão marcada da caixa de seleção anterior
  • ✓ ( 0x2713 [decimal em HTML: &#10003;])
  • ✔ ( 0x2714 [decimal em HTML: &#10004;])

Edit: Parece haver alguma confusão sobre o primeiro símbolo aqui, ☐ / 0x2610. Esta é uma caixa de seleção vazia (desmarcada); portanto, se você vir uma caixa, é assim que deve parecer. É a contrapartida de ☑ / 0x2611, que é a versão verificada.

— John Feminella
fonte
1
Configuração corporativa: Win XP Professional + IE 6.0.2900.2180.xpsp_sp2_qfe.070227-2300
— Vlad Gudim
O primeiro é uma caixa para mim, o resto funciona bem. Embora eu usasse uma imagem, apenas para ter certeza.
— mbillard
6
Só para esclarecer, a primeira imagem deve ser uma caixa - é uma caixa de seleção vazia!
— 31119 John Feminella
1
@Totophil: Ah, tudo bem. Estou usando o Ubuntu, e a fonte sans padrão que configurei no FF possui esses glifos. No Windows, basta usar o mapa de caracteres para procurar esses glifos e ver se a fonte desejada os possui. Caso contrário, você precisará escolher um diferente.
— 31119 John Feminella
5
Vazio código da caixa decimal: 0x2610 -> 9744. tão código HTML será semelhante &#9744;mesma forma para caixa marcada: 0x2611 -> 9745 & código HTML&#9745;
— Vikas
272

Primeiro, você deve perceber que não precisa realmente usar entidades HTML - desde que a codificação do seu documento HTML seja declarada corretamente como UTF-8, você pode simplesmente copiar / colar esses símbolos no arquivo / script no servidor / JavaScript / qualquer que seja.

Dito isto, aqui está a lista exaustiva de todos os caracteres UTF-8 / entidades HTML relevantes relacionados a este tópico:

  • Hex (hex: &#x2610;/ dec:): &#9744;urna (vazia, é assim que deve ser)
  • Hex (hex: &#x2611;/ dec:) &#9745;: urnas com cheque
  • Hex (hex: &#x2612;/ dec:) &#9746;: urna com x
  • ✓ (hex: &#x2713;/ dec:): &#10003;marca de seleção, equivalente à &checkmark;e &check;na maioria dos navegadores
  • ✔ (hex: &#x2714;/ dec:): &#10004;marca de seleção pesada
  • Hex (hex: &#x2717;/ dec:) &#10007;: cédula x
  • ✘ (hex: &#x2718;/ dec:): &#10008;cédula pesada x
  • 🗸 (⚠ hex: &#x1F5F8;/ dec &#128504;): marca de seleção leve (pouco suportada em 2017)
  • ✅ (⚠ hex: &#x2705;/ dec :): &#9989;marca de seleção branca pesada (suporte misto a partir de 2017)
  • ⚠ (⚠ hex: &#x1F5F4;/ dec :) &#128500;: script de cédula X (pouco suportado a partir de 2017)
  • ⚠ (⚠ hex: &#x1F5F6;/ dec :) &#128502;: cédula em negrito X (suporte insuficiente a partir de 2017)
  • ⮽ (⚠ hex: &#x2BBD;/ dec :) &#11197;: urna com luz X (pouco suportada em 2017)
  • ⚠ (⚠ hex: &#x1F5F5;/ dec :) &#128501;: urnas com o script X (pouco suportado em 2017)
  • ⚠ (⚠ hex: &#x1F5F9;/ dec :) &#128505;: urnas com cheque em negrito (pouco suporte a partir de 2017)
  • ⚠ (⚠ hex: &#x1F5F7;/ dec :) &#128503;: urna com script em negrito X (pouco suportado em 2017)

Verificando fontes da Web para símbolos de escala? Aqui está uma amostra pronta para usar para as mais comuns: A☐B☑C☒D✓E✔F✗G✘H- basta copiar / colar isso na caixa de texto de amostra do seu provedor de fontes da web e ver quais fontes suportam quais símbolos de marca.

— Bogdan Stăncescu
fonte
17

A máquina cliente precisa de uma fonte adequada que possua um glifo para que esse caractere seja exibido. Mas o Times New Roman não. Tente Arial Unicode MS ou Lucida Grande :

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

Isso funciona para mim no Windows XP no IE 5.5, IE 6.0, FF 3.0.6.

— quiabo
fonte
Não possui nenhuma das fontes, apenas o Lucida Sans Unicode que remotamente se parece com a fonte unicode, mas não possui os tiques.
— Vlad Gudim 18/03/09
Em seguida, listar algumas fontes que têm um glifo para este caráter: font-family: Arial Unicode MS, Lucida Sans Unicode, Lucida Grande.
— Gumbo
Gumbo, não funciona. Além disso, não tenho o Arial Unicode MS e o Lucida Grande instalados.
— Vlad Gudim
É o mais perto que você vai chegar, mas infelizmente Lucida Sans Unicode não fornece U + 2713/2714.
— bobince
11

Por que você não usa o elemento da caixa de seleção de entrada HTML no modo somente leitura

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

Presumo que isso funcione em todos os navegadores.

— Drejc
fonte
6
Não precisamos de um controle, apenas uma indicação de que uma certa opção está disponível dentro de uma matriz. Usar um controle desabilitado estaria errado nesse caso.
— Vlad Gudim
11

Eu me deparo com o mesmo problema e nenhuma das sugestões funcionou (Firefox no Windows XP).

Então, eu encontrei uma possível solução alternativa usando dados de imagem para exibir uma pequena marca de seleção:

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

Claro que você pode criar sua própria imagem de marca de seleção e usar um conversor para adicioná-la como dados: imagem / gif. Espero que isto ajude.

— Kai Noack
fonte
8

embora defina a codificação do navegador para UTF-8

(Se você estiver usando referências de caracteres numéricos, é claro, não importa qual codificação está sendo usada, os navegadores obterão o ponto de código Unicode correto diretamente do número.)

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

Eu apreciaria se alguém pudesse verificar em FF no Windows. Tenho certeza de que não funcionará em uma caixa que não seja do Windows.

Me falha no Firefox 3, Opera e Safari. Curiosamente, funciona no outro navegador Webkit, o Chrome. Também falha no Linux (obviamente, como o Wingdings não está instalado lá; está instalado nos Macs, mas isso não ajuda se o Safari não o tiver).

Também é um truque bastante desagradável - esse personagem é para todos os efeitos "ü" e aparecerá assim para coisas como mecanismos de pesquisa ou se o texto for copiado e colado. Os pontos de código Unicode adequados são o caminho a menos, a menos que você realmente não tenha alternativa.

O problema é que nenhuma fonte incluída no Windows fornece U + 2713 CHECK MARK ('✓'). O único que você provavelmente encontrará em uma máquina Windows é o "Arial Unicode MS", do qual não se pode confiar. Então, no final, acho que você terá que:

  • use um caractere diferente que seja melhor suportado (por exemplo, '●' - marcador , conforme usado pelo SO), ou
  • use uma imagem, com '✓' como texto alternativo.
— bobince
fonte
8

Chegando muito tarde à festa, descobri que &check;(✓) funcionava no Opera. Não testei em nenhum outro navegador, mas pode ser útil para algumas pessoas.

— rossum
fonte
4
Vale a pena notar que &check;(e &checkmark;) ambos avaliam &#10003;, qual é o que a resposta principal usa. É uma entidade de caracteres HTML5 e não funcionaria no IE6.
— James Donnelly
5 
.className {
   content: '\&#x2713';
}

Usando a propriedade CSS content, você pode mostrar carrapato com uma imagem ou outro código.

— s-sharma
fonte
Não tenho certeza: w3schools.com/cssref/pr_gen_content.asp mostra comapatibily com firefox
— s-sharma
todomvc.com/labs/architecture-examples/react verifica se está funcionando ou não, pois está usando conteúdo para marcar.
— S-sharma
4
Se você deseja usar códigos utf-8 no conteúdo css, é possível:.class{ content: "\2713"; }
— Morteza Ziyae 8/14
4

√ (símbolo de raiz quadrada, & # 8730;) seria suficiente?

Como alternativa, verifique se você está configurando o Content-Type:cabeçalho antes de enviar dados para o navegador. Apenas especificar a <meta>tag do tipo de conteúdo pode não ser suficiente para incentivar os navegadores a usar o conjunto de caracteres correto.

— Ian Kemp
fonte
Obrigado! Raiz quadrada funciona, mas parece um pouco com err ... raiz quadrada? Mas acho que na ausência de alternativas isso provavelmente seria o mais próximo possível.
— Vlad Gudim
1
Btw, especificar a meta tag define UTF-8 muito bem no meu IE, portanto, neste caso, esse não é o problema.
— Vlad Gudim
1
Uma raiz quadrada é uma raiz quadrada e uma marca de seleção é uma marca de seleção. Parece-me como colocar um pictograma de banheiro na porta do vestiário.
— Volker E.
1
@VolkerE. Mas isso seria hilário!
— Dave Newton
3

Solução usando Wingdings que não é baseado em unicode e não funciona no Linux sem o Wingdings instalado.

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

Você pode adicionar um pouco de branco com um GIF codificado em Base64 ( gerador on-line aqui ):

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

Com o Chrome, por exemplo, eu o uso para estilizar o controle da caixa de seleção:

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 você apenas quisesse isso em uma tag IMG, faria a marca de seleção / marca de seleção como:

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

Usando Webding ou Wingding fontes é a única maneira de alcançar o objetivo deste tópico: ele tem que começar a trabalhar com o IE 6.0.2900 . Portanto, eu publicaria alguns aqui, bem como algumas correções postadas acima:

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>
Expandir snippet

Referência aqui: wingdings webdings

— Dmitry Babich
fonte
Ao utilizar nosso site, você reconhece que leu e compreendeu nossa Política de Cookies e nossa Política de Privacidade.
Licensed under cc by-sa 3.0 with attribution required.