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,
— 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
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
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 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
Korzystając z naszej strony potwierdzasz, że przeczytałeś(-aś) i rozumiesz nasze zasady używania plików cookie i zasady ochrony prywatności.
Licensed under cc by-sa 3.0 with attribution required.