HTML / XHTML'de onay sembolü

279

Dahili bir web uygulamasında bir onay sembolü (✓ veya ✔) göstermemiz gerekir ve ideal olarak bir görüntü kullanmaktan kaçınmak isteriz.

Bir XP kutusunda IE 6.0.2900 ile başlaması gerekir, ideal olarak çapraz tarayıcı (IE + FF'nin son sürümleri) olması gerekir.

Aşağıda, tarayıcı kodlamasını UTF-8 olarak ayarlasa da kutular görüntülenir (META sorun değil, iyi çalışır). Varsayılan yazı tipi Times New Roman'dır (bir sorun olabilir, ancak Lucida Sans Unicode'u denemek yardımcı olmaz ve ne Arial Unicode MS ne de Lucida Grande yüklü değil).

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

Herhangi bir yardım takdir.

IE 6.0 ve IE 7 altında aşağıdakiler çalışır:

<html>
<head>

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

Birisi Windows FF altında kontrol eğer takdir ediyorum. Windows olmayan bir kutuda çalışmayacağından eminim.

html  xhtml 
— Vlad Gudim
kaynak
1
Kene sembolü neye benziyor?
— John Feminella
Bunu gördün mü
— Sam Hasler
2
Sam, lütfen soruya bir göz at.
— Vlad Gudim
@Totophil, aynı varlıklar hakkında konuştuğunu biliyorum, ama aynı zamanda sunucunun gerçek bir HTTP üstbilgisi göndermesini öneriyor Content-Type: text / html; charset = utf-8 ve kullanılan yazı tipinin içermeyebileceği sorun kullanılan karakterler için glifler.
— Sam Hasler
İşte bir çift: amp-what.com/#q=check%20mark & # x2713 & # x2714
— ndp

Yanıtlar:

454

Tüm kod noktaları için her zaman glif içermeyen daha az destekli Unicode değerleri kullandığınızı düşünüyorum.
Aşağıdaki karakterleri deneyin:

  • ☐ ( Unicode onaltılık 0x2610 [HTML ondalık: &#9744;]): boş (işaretlenmemiş) onay kutusu
  • ☑ ( 0x2611 [HTML ondalık: &#9745;]): önceki onay kutusunun işaretli sürümü
  • ✓ ( 0x2713 [HTML ondalık: &#10003;])
  • ✔ ( 0x2714 [HTML ondalık: &#10004;])

Düzenleme: Buradaki ilk sembolle ilgili bazı karışıklıklar var gibi görünüyor, ☐ / 0x2610. Bu boş (işaretlenmemiş) bir onay kutusudur, bu nedenle bir kutu görürseniz, bu şekilde görünmesi gerekir. Kontrol edilen sürüm olan ☑ / 0x2611'in karşılığıdır.

— John Feminella
kaynak
1
Kurumsal kurulum: Win XP Professional + IE 6.0.2900.2180.xpsp_sp2_qfe.070227-2300
— Vlad Gudim
Birincisi bana bir kutu, gerisi iyi çalışıyor. Yine de, bunun yerine bir görüntü kullanırdım, sadece emin olmak için.
— mbillard
6
Açık olmak gerekirse, ilk görüntünün bir kutu olması gerekiyor - boş bir onay kutusu!
— John Feminella
1
@Totophil: Ah, tamam. Ubuntu kullanıyorum ve FF'de yapılandırdığım varsayılan sans yazı tipi bu gliflere sahip. Windows'da, bu glifleri aramak ve istediğiniz yazı tipinde bunlara sahip olup olmadığını görmek için karakter haritasını kullanın. Değilse, farklı bir tane seçmeniz gerekir.
— John Feminella
5
Boş kutu ondalık kodu: 0x2610 -> 9744. HTML kodu aşağıdaki gibi görünecektir &#9744;İşaretli kutu için benzer: 0x2611 -> 9745 ve HTML kodu&#9745;
— Vikas
272

Öncelikle, HTML varlıklarını kullanmanız gerekmediğini fark etmelisiniz - HTML belgenizin kodlaması UTF-8 olarak düzgün bir şekilde bildirildiği sürece, bu sembolleri dosya / sunucu tarafı komut dosyasına / JavaScript / neyse.

Bunu söyledikten sonra, bu konuyla ilgili tüm ilgili UTF-8 karakterlerinin / HTML varlıklarının kapsamlı listesi :

  • ☐ (hex: &#x2610;/ dec:): &#9744;oy sandığı (boş, böyle olması gerekiyor)
  • Hex (hex: &#x2611;/ dec:) &#9745;: çekli oy sandığı
  • Hex (hex: &#x2612;/ dec:): &#9746;x ile oy sandığı
  • ✓ (onaltılık: &#x2713;/ Aralık: &#10003;): onay işareti, eşdeğer &checkmark;ve &check;içinde çoğu tarayıcı
  • Hex (altıgen: &#x2714;/ dec:) &#10004;: ağır onay işareti
  • ✗ (onaltılık: &#x2717;/ dec :) &#10007;: oy pusulası x
  • ✘ (altıgen: &#x2718;/ dec :) &#10008;: ağır oy pusulası x
  • 🗸 (⚠ hex: &#x1F5F8;/ dec &#128504;): ışık onay işareti (2017 itibariyle zayıf desteklenir)
  • ✅ (⚠ hex: &#x2705;/ dec :) &#9989;: beyaz ağır onay işareti (2017 itibariyle karışık destek)
  • 🗴 (⚠ hex: &#x1F5F4;/ dec :) &#128500;: oy pusulası X (2017 itibariyle zayıf desteklenir)
  • 🗶 (⚠ hex: &#x1F5F6;/ dec :) &#128502;: oy pusulası kalın harf X (2017 itibarıyla zayıf destekleniyor)
  • ⮽ (⚠ altıgen: &#x2BBD;/ dec :): &#11197;X ışıklı oy sandığı (2017 itibariyle zayıf destekleniyor)
  • 🗵 (⚠ hex: &#x1F5F5;/ dec :): &#128501;komut dosyası X içeren oy sandığı (2017 itibariyle zayıf destekleniyor)
  • 🗹 (⚠ altıgen: &#x1F5F9;/ dec :): &#128505;cesur kontrole sahip oy sandığı (2017 itibariyle zayıf destekleniyor)
  • 🗷 (⚠ hex: &#x1F5F7;/ dec :): &#128503;kalın harfli X ile oy sandığı (2017 itibariyle zayıf destekleniyor)

Web yazı tiplerini kene sembolleri için kontrol etmek ister misiniz? Daha sık kullanılanlar için kullanıma hazır bir örnek: A☐B☑C☒D✓E✔F✗G✘H- bunu kopyalayıp web yazı tipi sağlayıcınızın örnek metin kutusuna yapıştırın ve hangi yazı tiplerinin hangi kene sembollerini desteklediğini görün.

— Bogdan Stăncescu
kaynak
17

İstemci makinesinin, bu karakterin görüntülemesi için glif içeren uygun bir yazı tipine ihtiyacı vardır. Ama Times New Roman öyle değil. Bunun yerine Arial Unicode MS veya Lucida Grande'yi deneyin :

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

Bu benim için IE 5.5, IE 6.0, FF 3.0.6 Windows XP'de çalışır.

— Bamya
kaynak
Her iki yazı tipine de sahip değilsiniz, sadece uzaktan unicode yazı tipine benzeyen Lucida Sans Unicode, ancak keneleri yok.
— Vlad Gudim
Sonra bu karakter için bir glif olan bazı fontları listelemek: font-family: Arial Unicode MS, Lucida Sans Unicode, Lucida Grande.
— Gumbo
Gumbo, çalışmıyor. Ayrıca Arial Unicode MS ve Lucida Grande yüklü değil.
— Vlad Gudim
Neredeyse alacağınız kadar yakın, ama ne yazık ki Lucida Sans Unicode U + 2713/2714 sağlamaz.
— bobince
13

Normalde fontawesome yazı tipini kullanıyorum ( http://fontawesome.io/icon/check/ ), html dosyalarında kullanabilirsiniz: 

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

veya css cinsinden:

content: "\f00c";
font-family: FontAwesome;
— stefan
kaynak
11

HTML girişi onay kutusu öğesini neden salt okunur modda kullanmıyorsunuz?

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

Bunun tüm tarayıcılarda çalışacağını varsayıyorum.

— Drejc
kaynak
6
Bir kontrole ihtiyacımız yok, sadece bir matris içinde belirli bir seçeneğin mevcut olduğunun bir göstergesi. Bu durumda devre dışı bir denetim kullanmak yanlış olur.
— Vlad Gudim
11

Aynı sorunla karşılaşıyorum ve önerilerin hiçbiri işe yaramadı (Windows XP'de Firefox).

Bu yüzden küçük bir onay işareti görüntülemek için görüntü verilerini kullanarak olası bir geçici çözüm buldum :

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

Tabii ki kendi onay işareti görüntünüzü oluşturabilir ve bunu veri olarak eklemek için bir dönüştürücü kullanabilirsiniz: image / gif. Bu yardımcı olur umarım.

— Kai Noack
kaynak
8

tarayıcı kodlamasını UTF-8 olarak ayarlar

(Elbette sayısal karakter referanslarını kullanıyorsanız, hangi kodlamanın kullanıldığı önemli değildir, tarayıcılar doğrudan sayıdan doğru Unicode kod noktasını alacaktır.)

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

Birisi Windows FF altında kontrol eğer takdir ediyorum. Windows olmayan bir kutuda çalışmayacağından eminim.

Firefox 3, Opera ve Safari'de başarısız oluyor. Merakla, diğer Webkit tarayıcısı Chrome'da çalışıyor. Linux'ta da başarısız oluyor (açıkçası, Wingdings orada yüklü olmadığı için; Mac'lerde yüklü, ancak Safari'de yoksa size yardımcı olmaz).

Ayrıca oldukça kötü bir hack - bu karakter tüm niyet ve amaçlara “ü” ve arama motorları gibi şeylere veya metin kopyalayıp yapıştırılmışsa bu şekilde görünecektir. Doğru Unicode kod noktaları, gerçekten alternatifiniz yoksa gitmenin yoludur.

Sorun, Windows ile birlikte gelen hiçbir yazı tipinin U + 2713 CHECK MARK ('✓') içermemesidir. Bir Windows makinesinde bulabileceğiniz tek şey, gerçekten güvenilmeyecek olan “Arial Unicode MS” dir. Yani sonunda bence ikisinden biri:

  • daha iyi desteklenen farklı bir karakter kullanın (örn. '●' - SO tarafından kullanılan madde işareti ) veya
  • alternatif metin olarak '✓' olan bir resim kullanın.
— bobince
kaynak
8

Partiye çok geç gelince, &check;(✓) 'nin Opera'da çalıştığını gördüm . Başka bir tarayıcıda test etmedim, ancak bazı insanlar için yararlı olabilir.

— Rossum'un
kaynak
4
En iyi cevabın kullandığı bu &check;(ve &checkmark;) hem de değerlendirir &#10003;. Bu bir HTML5 karakter varlığıdır ve IE6'da çalışmaz.
— James Donnelly
5 
.className {
   content: '\&#x2713';
}

CSS içeriği özelliğini kullanarak bir görüntü veya başka bir kod işaretiyle onay işareti gösterebilirsiniz.

— s-Sharma
kaynak
Emin değilim: w3schools.com/cssref/pr_gen_content.asp comapatibily firefox ile gösterileri
— s-Sharma
todomvc.com/labs/architecture-examples/react onay işareti için içerik kullandıkları için çalışıp çalışmadığını kontrol edin.
— s-sharma
4
Utf-8 kodlarını css içeriğinde kullanmak istiyorsanız, bu şekilde mümkündür:.class{ content: "\2713"; }
— Morteza Ziyae
4

√ (karekök sembolü, & # 8730;) yeterli olur mu?

Alternatif olarak, tarayıcıya veri göndermeden önceContent-Type: başlığı ayarladığınızdan emin olun . Yalnızca içerik türü etiketini belirtmek, tarayıcıları doğru karakter kümesini kullanmaya teşvik etmek için yeterli olmayabilir.<meta>

— Ian Kemp
kaynak
Teşekkürler! Karekök çalışır, ama errr ... kare kök gibi görünüyor? Ama muhtemelen olabildiğince yakın olacak bir alternatifin yokluğunda sanırım.
— Vlad Gudim
1
Btw, meta etiketi belirtmek UTF-8'i mayın IE'sinde güzel bir şekilde ayarlar, bu durumda bu sorun değildir.
— Vlad Gudim
1
Kare kök kare köküdür ve onay işareti onay işareti bir onay işareti işaretidir. Soyunma odasının kapısına tuvalet piktogramı koymak gibi geliyor.
— Volker
1
@VolkerE. Ama bu komik olurdu!
— Dave Newton
3

Unicode tabanlı olmayan ve Wingdings yüklü olmadan Linux'ta çalışmayan Wingdings kullanan çözüm.

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
kaynak
0

Base64 Şifreli GIF ( burada çevrimiçi jeneratör ) ile küçük beyaz bir tane ekleyebilirsiniz :

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

Örneğin Chrome ile, onay kutusu denetimini biçimlendirmek için kullanıyorum:

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

Sadece bir IMG etiketinde isteseydiniz, onay işaretini / onay işaretini şu şekilde yaparsınız:

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

Bu konunun amacına ulaşmanın tek yolu WebDing veya WingDing yazı tiplerini kullanmaktır : IE 6.0.2900'den başlayarak çalışması gerekir . Bu nedenle, burada bazı yayınlar yanı sıra yukarıda yayınlanmıştır bazı düzeltme:

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>
Snippet'i genişlet

Burada referans: kanat kanatları webdings

— Dmitry Babich
kaynak
Sitemizi kullandığınızda şunları okuyup anladığınızı kabul etmiş olursunuz: Çerez Politikası ve Gizlilik Politikası.
Licensed under cc by-sa 3.0 with attribution required.