Zaznacz symbol w HTML / XHTML

279

Musimy wyświetlić symbol zaznaczenia (✓ lub ✔) w wewnętrznej aplikacji internetowej i idealnie chcielibyśmy uniknąć używania obrazu.

Musi działać począwszy od IE 6.0.2900 na pudełku XP, najlepiej jest to przeglądarka internetowa (IE + najnowsze wersje FF).

Poniższe pola wyświetlają, chociaż ustawia kodowanie przeglądarki na UTF-8 (META działa dobrze, a nie problem). Domyślną czcionką jest Times New Roman (może to być problem, ale próba Lucida Sans Unicode nie pomaga i nie mam zainstalowanego ani Arial Unicode MS, ani Lucida Grande).

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

Każda pomoc doceniona.

Poniższe działa w IE 6.0 i IE 7:

<html>
<head>

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

Byłbym wdzięczny, gdyby ktoś mógł sprawdzić w FF na Windowsie. Jestem pewien, że to nie będzie działać na systemie innym niż Windows.

html xhtml Vlad Gudim
źródło
1
Jak powinien wyglądać symbol kleszcza?
John Feminella,
czy widziałeś to: html-faq.com/htmlbasics/?specialcharacters
Sam Hasler
2
Sam, proszę spojrzeć na pytanie.
Vlad Gudim
@Totophil, wiem, że mówi o tych samych bytach, ale sugeruje także, aby serwer wysłał rzeczywisty nagłówek HTTP Content-Type: text / html; charset = utf-8, a także problem, że używana czcionka może nie zawierać glify dla użytych znaków.
Sam Hasler
Oto kilka: amp-what.com/#q=check%20mark & # x2713 & # x2714
NPR

Odpowiedzi:

454

Myślę, że używasz mniej obsługiwanych wartości Unicode, które nie zawsze zawierają glify dla wszystkich punktów kodowych.
Wypróbuj następujące postacie:

  • ☐ ( 0x2610 w formacie szesnastkowym Unicode [dziesiętny HTML: &#9744;]): puste pole wyboru (niezaznaczone)
  • 0x ( 0x2611 [dziesiętny HTML: &#9745;]): sprawdzona wersja poprzedniego pola wyboru
  • ✓ ( 0x2713 [dziesiętny HTML: &#10003;])
  • ✔ ( 0x2714 [dziesiętny HTML: &#10004;])

Edycja: Wydaje się, że istnieją pewne nieporozumienia dotyczące pierwszego symbolu tutaj ☐ / 0x2610. To jest puste (niezaznaczone) pole wyboru, więc jeśli zobaczysz pole, tak to powinno wyglądać. Jest to odpowiednik ☑ / 0x2611, która jest wersją sprawdzoną.

John Feminella
źródło
1
Konfiguracja korporacyjna: Win XP Professional + IE 6.0.2900.2180.xpsp_sp2_qfe.070227-2300
Vlad Gudim
Pierwszy to dla mnie pudełko, reszta działa dobrze. Chociaż dla pewności użyłbym zamiast tego obrazu.
mbillard
6
Żeby było jasne, pierwszy obraz ma być polem - to puste pole wyboru!
John Feminella,
1
@Totophil: Ach, dobrze. Używam Ubuntu, a domyślna czcionka sans skonfigurowana w FF ma te glify. W systemie Windows wystarczy użyć mapy znaków, aby wyszukać te glify i sprawdzić, czy ma je żądana czcionka. Jeśli nie, musisz wybrać inny.
John Feminella,
5
Kod dziesiętny pustego pola: 0x2610 -> 9744. więc kod HTML będzie wyglądał podobnie &#9744;Podobnie jak pole zaznaczone: 0x2611 -> 9745 i kod HTML&#9745;
Vikas
272

Po pierwsze, powinieneś zdać sobie sprawę, że tak naprawdę nie musisz używać encji HTML - dopóki kodowanie dokumentu HTML jest zadeklarowane poprawnie jako UTF-8, możesz po prostu skopiować / wkleić te symbole do pliku / skryptu po stronie serwera / JavaScript / cokolwiek.

Powiedziawszy to, oto wyczerpująca lista wszystkich odpowiednich znaków UTF-8 / encji HTML związanych z tym tematem:

  • ☐ (hex: &#x2610;/ dec:): &#9744;urna wyborcza (pusta, tak ma być)
  • ☑ (hex: &#x2611;/ dec:) &#9745;: urna z czekiem
  • ☒ (hex: &#x2612;/ dec:) &#9746;: urna z x
  • ✓ (hex: &#x2713;/ DEC: &#10003;): znacznik wyboru, równoważne &checkmark;i &check;w większości przeglądarek
  • ✔ (hex: &#x2714;/ dec:) &#10004;: ciężki znacznik wyboru
  • ✗ (hex: &#x2717;/ dec:) &#10007;: głosowanie x
  • ✘ (hex: &#x2718;/ dec:) &#10008;: ciężkie głosowanie x
  • 🗸 (⚠ hex: &#x1F5F8;/ dec &#128504;): lekki znacznik wyboru (słabo obsługiwany od 2017 r.)
  • ✅ (⚠ hex: &#x2705;/ dec :) &#9989;: biały ciężki znacznik wyboru (obsługa mieszana od 2017 r.)
  • 🗴 (⚠ hex: &#x1F5F4;/ dec :): &#128500;skrypt głosowania X (słabo obsługiwany od 2017 r.)
  • 🗶 (⚠ hex: &#x1F5F6;/ dec :): &#128502;pogrubienie skryptu głosowania X (słabo obsługiwane od 2017 r.)
  • ⮽ (⚠ hex: &#x2BBD;/ dec :): urna wyborcza &#11197;ze światłem X (słabo obsługiwana od 2017 r.)
  • 🗵 (⚠ hex: &#x1F5F5;/ dec :) &#128501;: urna ze skryptem X (słabo obsługiwana od 2017 r.)
  • 🗹 (⚠ hex: &#x1F5F9;/ dec :) &#128505;: urna z pogrubioną czcionką (słabo obsługiwana od 2017 r.)
  • 🗷 (⚠ hex: &#x1F5F7;/ dec :): urna wyborcza &#128503;z pogrubionym skryptem X (słabo obsługiwana od 2017 r.)

Sprawdzasz czcionki internetowe dla symboli kleszcza? Oto gotowy do użycia przykład dla najpopularniejszych: A☐B☑C☒D✓E✔F✗G✘H- po prostu skopiuj / wklej to do przykładowego pola tekstowego dostawcy strony internetowej i zobacz, które czcionki obsługują symbole tykania.

Bogdan Stăncescu
źródło
17

Maszyna kliencka potrzebuje odpowiedniej czcionki, która ma glif do wyświetlenia tego znaku. Ale Times New Roman nie. Zamiast tego wypróbuj Arial Unicode MS lub Lucida Grande :

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

Działa to dla mnie w systemie Windows XP w IE 5.5, IE 6.0, FF 3.0.6.

Gumbo
źródło
Nie mam żadnej czcionki, tylko Lucida Sans Unicode, która zdalnie wygląda jak czcionka Unicode, ale nie ma tyknięć.
Vlad Gudim
Następnie listy kilka czcionek, które mają glifów dla tej postaci: font-family: Arial Unicode MS, Lucida Sans Unicode, Lucida Grande.
Gumbo,
Gumbo nie działa. Poza tym nie mam zainstalowanych Arial Unicode MS i Lucida Grande.
Vlad Gudim
Jest tak blisko, jak to tylko możliwe, ale niestety Lucida Sans Unicode nie zapewnia U + 2713/2714.
Bobin
13

Zwykle używam czcionki fontawesome ( http://fontawesome.io/icon/check/ ), możesz używać jej w plikach HTML: 

 <i class="fa fa-check"></i>

lub w css:

content: "\f00c";
font-family: FontAwesome;
Stefan
źródło
11

Dlaczego nie używasz pola wyboru wejściowego HTML w trybie tylko do odczytu

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

Zakładam, że to zadziała we wszystkich przeglądarkach.

Drejc
źródło
6
Nie potrzebujemy kontroli, tylko wskazanie, że pewna opcja jest dostępna w matrycy. W takim przypadku użycie wyłączonej kontroli byłoby niewłaściwe.
Vlad Gudim
11

Wystąpił ten sam problem i żadna z sugestii nie zadziałała (Firefox na Windows XP).

Znalazłem więc możliwe obejście problemu, używając danych obrazu do wyświetlenia małego znacznika wyboru:

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

Oczywiście możesz utworzyć własny obraz zaznaczenia i użyć konwertera, aby dodać go jako dane: image / gif. Mam nadzieję że to pomoże.

Kai Noack
źródło
8

chociaż ustawia kodowanie przeglądarki na UTF-8

(Jeśli używasz odniesień do znaków numerycznych, oczywiście nie ma znaczenia, jakie kodowanie jest używane, przeglądarki otrzymają prawidłowy punkt kodowy Unicode bezpośrednio z numeru).

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

Byłbym wdzięczny, gdyby ktoś mógł sprawdzić w FF na Windowsie. Jestem pewien, że to nie będzie działać na systemie innym niż Windows.

Zawodzi mnie w Firefoksie 3, Operze i Safari. Co ciekawe, działa w innej przeglądarce Webkit, Chrome. Również zawiesza się w systemie Linux (oczywiście, ponieważ Wingdings nie jest tam zainstalowany; jest zainstalowany na komputerach Mac, ale to nie pomaga, jeśli Safari go nie ma).

Jest to również dość nieprzyjemny hack - ta postać jest przeznaczona do wszystkich celów i ma postać „ü” i pojawi się w ten sposób w wyszukiwarkach lub jeśli tekst jest kopiowany i wklejany. Właściwe punkty kodu Unicode są właściwą drogą, chyba że naprawdę nie masz alternatywy.

Problem polega na tym, że żadna czcionka dołączona do materiałów eksploatacyjnych systemu Windows U + 2713 SPRAWDŹ ZNAK („✓”). Jedynym, który w ogóle możesz znaleźć na komputerze z systemem Windows, jest „Arial Unicode MS”, na którym tak naprawdę nie można polegać. Na koniec myślę, że będziesz musiał albo:

  • użyj innego znaku, który jest lepiej obsługiwany (np. „●” - punktor używany przez SO), lub
  • użyj obrazu z „✓” jako tekstem alternatywnym.
Bobin
źródło
8

Spóźniając się na przyjęcie zauważyłem, że &check;(✓) pracował w Operze. Nie testowałem go w żadnej innej przeglądarce, ale może być przydatny dla niektórych osób.

Rossum
źródło
4
Warto zauważyć, że &check;(i &checkmark;) oba oceniają, do &#10003;czego używa najlepsza odpowiedź. Jest to jednostka znaków HTML5 i nie będzie działać w IE6.
James Donnelly
5 
.className {
   content: '\&#x2713';
}

Za pomocą właściwości CSS możesz pokazać tik z obrazem lub innym znakiem.

s-sharma
źródło
Nie jestem pewien: w3schools.com/cssref/pr_gen_content.asp pokazuje zgodny z firefox
s-sharma
todomvc.com/labs/architecture-examples/react sprawdź, czy działa, czy nie, ponieważ używają treści do zaznaczania.
s-sharma
4
Jeśli chcesz używać kodów utf-8 w treści css, jest to możliwe:.class{ content: "\2713"; }
Morteza Ziyae
4

Czy wystarczy √ (symbol pierwiastka kwadratowego, & # 8730;)?

Ewentualnie upewnij się, że ustawiasz Content-Type:nagłówek przed wysłaniem danych do przeglądarki. Samo określenie <meta>tagu typu treści może nie wystarczyć, aby zachęcić przeglądarki do używania prawidłowego zestawu znaków.

Ian Kemp
źródło
Dzięki! Pierwiastek kwadratowy działa, ale wygląda trochę jak errr ... pierwiastek kwadratowy? Ale chyba brak alternatywy, która prawdopodobnie byłaby tak bliska, jak to tylko możliwe.
Vlad Gudim
1
A tak przy okazji, ładnie określając zestaw metatagów UTF-8 na moim IE, więc w tym przypadku to nie problem.
Vlad Gudim
1
Pierwiastek kwadratowy jest pierwiastkiem kwadratowym, a znacznik wyboru jest znacznikiem wyboru. Wydaje mi się, że umieszczam piktogram toalety na drzwiach do szatni.
Volker E.,
1
@VolkerE. Ale to byłoby przezabawne!
Dave Newton,
3

Rozwiązanie wykorzystujące Wingdings, który nie jest oparty na Unicode i nie działa w systemie Linux bez zainstalowanego Wingdings.

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
źródło
0

możesz użyć ⊕ lub ⊗

Gabriel Solomon
źródło
1
To nie są znaki tyka, są zakreślone plus / minus.
GKFX
0

Możesz dodać mały biały z kodowaniem Base64 GIF ( tutaj generator online ):

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

Na przykład w Chrome używam go do stylowania kontrolki pola wyboru:

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

Jeśli chcesz go tylko w tagu IMG, zrobiłbyś znacznik wyboru / znacznik jako:

<img alt="" src="data:image/gif;base64,R0lGODlhCwAKAIABAP////3cnSH5BAEKAAEALAAAAAALAAoAAAIUjH+AC73WHIsw0UCjglraO20PNhYAOw==" width="11" height="10">
Volomike
źródło
0

Korzystanie z czcionek WebDing lub WingDing jest jedynym sposobem na osiągnięcie celu tego tematu: musi działać od wersji IE 6.0.2900 . Dlatego zamieściłbym tu trochę, a także poprawkę do zamieszczonej powyżej:

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>
Rozwiń fragment kodu

Odwoływać się tutaj: WingDings Webdings

Dmitrij Babich
źródło