Simbolul căpușă în HTML/XHTML (Programare, Html, Xhtml)

Vlad Gudim a intrebat.

Avem nevoie să afișăm un simbol simbol de bifurcație (✓ sau ✔) în cadrul unei aplicații web interne și am dori, în mod ideal, să evităm utilizarea unei imagini.

Trebuie să funcționeze pornind de la IE 6.0.2900 pe un box XP, ideal ar fi să fie cross-browser (IE + versiuni recente de FF).

Următoarele afișează casetele, deși setează codificarea browserului la UTF-8 (META funcționează bine și nu reprezintă o problemă). Fontul implicit este Times New Roman (ar putea fi o problemă, dar încercarea cu Lucida Sans Unicode nu ajută și nu am instalat nici Arial Unicode MS, nici Lucida Grande).

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

Orice ajutor este apreciat.


Ceea ce urmează funcționează în IE 6.0 și IE 7:

<html>
<head>

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

Aș aprecia dacă cineva ar putea verifica sub FF pe Windows. Sunt destul de sigur că nu va funcționa pe o cutie fără Windows.

Comentarii

  • Cum ar trebui să arate un simbol de bifă? –  > Por John Feminella.
  • ați văzut asta: html-faq.com/htmlbasics/?specialcharacters –  > Por Sam Hasler.
  • Sam, te rog să te uiți la întrebare. –  > Por Vlad Gudim.
  • @Totophil, știu că se vorbește despre aceleași entități, dar sugerează, de asemenea, ca serverul să trimită un header HTTP real Content-Type: text/html;charset=utf-8, precum și problema că fontul utilizat ar putea să nu conțină glife pentru caracterele folosite. –  > Por Sam Hasler.
  • Iată câteva: amp-what.com/#q=check%20mark &#x2713 &#x2714 –  > Por ndp.
14 răspunsuri
John Feminella

Cred că folosiți valori Unicode mai puțin bine suportate, care nu au întotdeauna glife pentru toate punctele de cod.
Încercați următoarele caractere:

  • ☐ (0x2610 în hexazecimal Unicode [HTML decimal: &#9744;]): o căsuță de selectare goală (necompletată)
  • ☑ (0x2611 [HTML decimal: &#9745;]): versiunea bifată a căsuței de selectare anterioare
  • ✓ (0x2713 [HTML decimal: &#10003;])
  • ✔ (0x2714 [HTML decimal: &#10004;])

Editați: Se pare că există o confuzie cu privire la primul simbol de aici, ☐ / 0x2610. Aceasta este o casetă de selectare goală (necomandată), așa că dacă vedeți o casetă, așa ar trebui să arate. Este echivalentul lui ☑ / 0x2611, care este versiunea bifată.

Comentarii

  • Configurație corporativă: Win XP Professional + IE 6.0.2900.2180.xpsp_sp2_qfe.070227-2300 –  > Por Vlad Gudim.
  • Prima este o cutie pentru mine, restul funcționează bine. Deși, eu aș folosi o imagine în locul ei, ca să fiu sigur. –  > Por mbillard.
  • Doar pentru a fi clar, prima imagine ar trebui să fie o cutie – este o casetă de selectare goală! –  > Por John Feminella.
  • @Totophil: Ah, bine. Folosesc Ubuntu, iar fontul sans implicit pe care l-am configurat în FF are aceste glife. În Windows, trebuie doar să folosiți harta caracterelor pentru a căuta aceste glife și să vedeți dacă fontul dorit le are. Dacă nu, va trebui să alegeți un alt font. –  > Por John Feminella.
  • Cod zecimal de cutie goală: 0x2610 –> 9744. deci codul HTML va arăta astfel &#9744; În mod similar pentru caseta bifată: 0x2611 –> 9745 & Codul HTML &#9745; –  > Por Vikas.
Bogdan Stăncescu

În primul rând, ar trebui să vă dați seama că, de fapt, nu este nevoie să folosiți entități HTML – atâta timp cât codificarea documentului HTML este declarată corect ca UTF-8, puteți pur și simplu să copiați/lipiți aceste simboluri în fișierul/scriptul de pe server/JavaScript/whatever.

Acestea fiind spuse, iată listă exhaustivă a tuturor caracterelor UTF-8 relevante / entităților HTML relevante legate de acest subiect:

  • ☐ (hex: &#x2610; / dec: &#9744;): urnă de vot (goală, așa ar trebui să fie)
  • ☑ (hex: &#x2611; / dec: &#9745;): urnă de vot cu bifă
  • ☒ (hex: &#x2612; / dec: &#9746;): urnă de vot cu x
  • ✓ (hex: &#x2713; / dec: &#10003;): semn de control, echivalent cu &checkmark; și &check; în majoritatea browserelor
  • ✔ (hex: &#x2714; / dec: &#10004;): semn de bifă greu
  • ✗ (hex: &#x2717; / dec: &#10007;): buletin de vot x
  • ✘ (hex: &#x2718; / dec: &#10008;): buletin de vot greu x
  • (⚠ hex: &#x1F5F8; / dec &#128504;): bifă ușoară (slab suportată începând cu 2017)
  • ✅ (⚠ hex: &#x2705; / dec: &#9989;): bifă albă grea (suport mixt începând cu 2017)
  • (⚠ hex: &#x1F5F4; / dec: &#128500;): scriptul X pentru buletinul de vot (suport slab din 2017)
  • (⚠ hex: &#x1F5F6; / dec: &#128502;): scriptul bold al buletinului de vot X (slab suportat începând cu 2017)
  • ⮽ (⚠ hex: &#x2BBD; / dec: &#11197;): buletin de vot cu litere X (slab suportat începând cu 2017)
  • (⚠ hex: &#x1F5F5; / dec: &#128501;): urnă de vot cu X scris (slab susținută începând cu 2017)
  • (⚠ hex: &#x1F5F9; / dec: &#128505;): urnă de vot cu bold check (slab suportat începând cu 2017)
  • (⚠ hex: &#x1F5F7; / dec: &#128503;): urnă de vot cu litere de tipar bold X (slab suportat începând cu 2017)

Verificarea fonturilor web pentru simbolurile de bifă? Iată o mostră gata de utilizare pentru cele mai comune: A☐B☑C☒D✓E✔F✗G✘H — copiați și lipiți acest text în caseta de text de probă a furnizorului dvs. de fonturi web și vedeți ce fonturi acceptă ce simboluri de bifare.

Gumbo

Mașina client are nevoie de un font corespunzător care să aibă o glifă pentru acest caracter pentru a-l afișa. Dar Times New Roman nu are. Încercați Arial Unicode MS sau Lucida Grande în schimb:

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

Acest lucru funcționează pentru mine pe Windows XP în IE 5.5, IE 6.0, FF 3.0.6.

Comentarii

  • Nu am niciunul dintre cele două fonturi, doar Lucida Sans Unicode care seamănă de la distanță cu fontul Unicode, dar nu are căpușele. –  > Por Vlad Gudim.
  • Apoi enumerați câteva fonturi care au glifa pentru acest caracter: font-family: Arial Unicode MS, Lucida Sans Unicode, Lucida Grande. –  > Por Gumbo.
  • Gumbo, nu merge. În plus, nu am instalate Arial Unicode MS și Lucida Grande. –  > Por Vlad Gudim.
  • Este cât se poate de aproape, dar din păcate Lucida Sans Unicode nu furnizează U+2713/2714. –  > Por bobince.
stefan

În mod normal, eu folosesc fontul fontawesome(http://fontawesome.io/icon/check/), îl puteți folosi în fișierele html:

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

sau în css:

content: "f00c";
font-family: FontAwesome;

Drejc

De ce nu folosești elementul HTML input checkbox în modul read only

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

Presupun că acest lucru va funcționa pe toate browserele.

Comentarii

  • Nu avem nevoie de un control, ci doar de o indicație că o anumită opțiune este disponibilă în cadrul unei matrice. Folosirea unui control dezactivat ar fi greșit în acest caz. –  > Por Vlad Gudim.
Avatar

Mă confrunt cu aceeași problemă și niciuna dintre sugestii nu a funcționat (Firefox pe Windows XP).

Așa că am găsit o posibilă soluție de rezolvare folosind date de imagine pentru a afișa un mic semn de control:

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

Bineînțeles că puteți crea propria imagine cu semnul de control și să folosiți un convertor pentru a o adăuga ca data:image/gif. Sper că vă ajută.

rossum

Venind foarte târziu la petrecere, am descoperit că &check; (&check;) a funcționat în Opera. Nu am testat-o pe alte browsere, dar ar putea fi utilă pentru unii oameni.

Comentarii

  • Merită să rețineți că &check; (și &checkmark;) se evaluează atât la &#10003;, care este ceea ce folosește răspunsul de sus. Este un HTML5 entitate de caractere și nu ar funcționa în IE6. –  > Por James Donnelly.
bobince

deși setează codificarea browserului la UTF-8

(Dacă folosiți referințe numerice de caractere, desigur, nu contează ce codificare este folosită, browserele vor obține punctul de cod Unicode corect direct din număr).

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

Aș aprecia dacă cineva ar putea verifica sub FF pe Windows. Sunt destul de sigur că nu va funcționa pe o cutie care nu este Windows.

Pentru mine nu funcționează în Firefox 3, Opera și Safari. În mod curios, funcționează în celălalt browser Webkit, Chrome. De asemenea, eșuează pe Linux (evident, deoarece Wingdings nu este instalat acolo; este instalat pe Mac-uri, dar asta nu vă ajută dacă Safari nu îl are).

De asemenea, este un hack destul de urât – acel caracter este, în toate scopurile, „ü” și așa va apărea în fața unor lucruri precum motoarele de căutare sau dacă textul este copiat și lipit. Punctele de cod Unicode corecte sunt cele mai bune, cu excepția cazului în care nu aveți altă soluție.

Problema este că niciun font inclus în Windows nu furnizează U+2713 CHECK MARK („✓”). Singurul pe care aveți toate șansele să-l găsiți pe o mașină cu Windows este „Arial Unicode MS”, pe care nu trebuie să vă bazați cu adevărat. Așa că, în cele din urmă, cred că va trebui să fie:

  • să folosiți un alt caracter care este mai bine suportat (de exemplu, „●” – bullet, așa cum este folosit de SO), sau
  • să folosiți o imagine, cu ‘✓’ ca text alternativ.

Ian Kemp

Ar fi suficient √ (simbolul rădăcinii pătrate, &#8730;)?

Alternativ, asigurați-vă că setați opțiunea Content-Type: header înainte de trimiterea datelor către browser. Specificarea simplă a câmpului <meta> content-type s-ar putea să nu fie suficientă pentru a încuraja browserele să utilizeze setul de caractere corect.

Comentarii

  • Vă mulțumim! Rădăcina pătrată funcționează, dar seamănă puțin cu errr… rădăcina pătrată? Dar cred că, în lipsa unei alternative, probabil că asta ar fi cel mai apropiat. –  > Por Vlad Gudim.
  • Btw, specificând meta tag-ul setează UTF-8 frumos pe IE-ul meu, deci în acest caz nu asta e problema. –  > Por Vlad Gudim.
  • O rădăcină pătrată este o rădăcină pătrată, iar o bifă de bifă este o bifă de bifă. Mie mi se pare ca și cum ai pune o pictogramă de toaletă pe ușa vestiarului. –  > Por Volker E..
  • @VolkerE. Dar asta ar fi hilar! –  > Por Dave Newton.
s-sharma
.className {
   content: '&#x2713';
}

Folosind conținutul CSS Proprietatea puteți arăta căpușa cu o imagine sau alt cod.

Comentarii

  • Nu sunt sigur: w3schools.com/cssref/pr_gen_content.asp arată comapatibilitate cu firefox –  > Por s-sharma.
  • todomvc.com/labs/architecture-examples/react verificați dacă funcționează sau nu, deoarece folosesc conținutul pentru marcajul de bifare. –  > Por s-sharma.
  • Dacă doriți să utilizați coduri utf-8 în conținutul css, în acest mod este posibil: .class{ content: "2713"; } –  > Por Morteza Ziyae.
Nishant

Soluție care utilizează Wingdings, care nu se bazează pe Unicode și nu funcționează în Linux fără Wingdings instalat.

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> ✓

Dmitry Babich

Folosind WebDing sau WingDing este singura modalitate de a atinge obiectivul acestei teme: trebuie să funcționeze începând cu IE 6.0.2900.. Prin urmare, aș posta câteva aici, precum și unele corecții la cele postate mai sus:

Referință aici:wingdingswebdings

Comentarii

  • Bună ziua Dmitry! Este posibil să modificăm „Checkbox-ul bifat” astfel încât caseta să fie albă, iar semnul de bifare să fie negru, adică așa cum este mai sus, deși când avem un fundal albastru? –  > Por Mary Star.
  • Sigur, folosiți în schimb tag-ul div și adăugați border (vezi ultimul exemplu). Dacă doriți apoi să o faceți goală, setați culoarea la transparent. –  > Por Dmitry Babich.
Gabriel Solomon

ați putea folosi ⊕ sau ⊗.

Comentarii

  • Acestea nu sunt semne de bifă, sunt semne de plus/minus încercuite. –  > Por GKFX.
Volomike

Poți adăuga unul mic și alb cu un GIF codificat în Base64 (generator online aici):

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

Cu Chrome, de exemplu, îl folosesc pentru a stiliza controlul casetei de selectare:

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

Dacă doreați doar într-o etichetă IMG, ar trebui să faceți semnul de verificare/marcare ca:

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

Tags:,