HTML / XHTML में टिक प्रतीक

279

हमें एक आंतरिक वेब ऐप के भीतर एक टिक प्रतीक (✓ या tick) प्रदर्शित करने की आवश्यकता है और आदर्श रूप से एक छवि का उपयोग करने से बचना होगा।

एक्सबॉक्स बॉक्स पर IE 6.0.2900 के साथ काम करना शुरू करना है, आदर्श रूप से हमें इसे क्रॉस-ब्राउज़र (IE + FF के हाल के संस्करण) की आवश्यकता है।

निम्न बॉक्स प्रदर्शित करता है, हालांकि ब्राउज़र एन्कोडिंग को UTF-8 (META अच्छी तरह से काम करता है और समस्या नहीं) सेट करता है। डिफ़ॉल्ट फ़ॉन्ट टाइम्स न्यू रोमन है (एक मुद्दा हो सकता है, लेकिन ल्यूसिडा सैन्स यूनिकोड की कोशिश करना मदद नहीं करता है और मेरे पास न तो एरियल यूनिकोड एमएस है, न ही ल्यूसिडा ग्रांडे स्थापित है)।

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

किसी भी मदद की सराहना की।

निम्नलिखित IE 6.0 और IE 7 के तहत काम करता है:

<html>
<head>

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

अगर कोई विंडोज पर एफएफ के तहत जांच कर सकता है तो मैं सराहना करूंगा। मुझे पूरा यकीन है कि यह एक गैर विंडोज बॉक्स पर काम नहीं करेगा।

html xhtml

— व्लाद गुदिम
स्रोत

1

टिक चिन्ह कैसा दिखता है?

— जॉन फेमिनेला

क्या आपने इसे देखा है: html-faq.com/htmlbasics/?specialcharacters

— सैम हस्लर

2

सैम, कृपया प्रश्न पर एक नज़र डालें।

— व्लाद गुदिम

@Totophil, मुझे पता है कि यह एक ही संस्थाओं के बारे में बात करता है, लेकिन यह भी सुझाव देता है कि सर्वर एक वास्तविक HTTP हेडर को भेजता है सामग्री-प्रकार: पाठ / एचटीएमएल; चारसेट = यूटीएफ -8 और साथ ही समस्या यह है कि उपयोग में फ़ॉन्ट नहीं हो सकता है उपयोग किए गए पात्रों के लिए ग्लिफ़।

— सैम हसलर

यहाँ कुछ जोड़े हैं: amp-what.com/#q=check%20mark & # x2713 & # x2714

— ndp

454

मुझे लगता है कि आप कम-अच्छी तरह से समर्थित यूनिकोड मूल्यों का उपयोग कर रहे हैं, जिसमें हमेशा सभी कोड बिंदुओं के लिए ग्लिफ़ नहीं होते हैं।
निम्नलिखित वर्ण आज़माएँ:

26 ( यूनिकोड हेक्साडेसिमल (HTML दशमलव: ☐]) में 0x2610 : एक खाली (अनियंत्रित) चेकबॉक्स
26 ( 0x2611 [HTML दशमलव: ☑]): पिछले चेकबॉक्स का चेक किया हुआ संस्करण
27 ( 0x2713 [HTML दशमलव: ✓])
27 ( 0x2714 [HTML दशमलव: ✔])

संपादित करें: यहां पहले प्रतीक के बारे में कुछ भ्रम प्रतीत होता है, 0 / 0x2610। यह एक खाली (अनियंत्रित) चेकबॉक्स है, इसलिए यदि आप एक बॉक्स देखते हैं, तो यह उसी तरह है जैसे कि यह देखना चाहिए। यह ☑ / 0x2611 का प्रतिरूप है, जो कि जांचा गया संस्करण है।

— जॉन फेमिनाला
स्रोत

1

कॉर्पोरेट सेटअप: विन XP प्रोफेशनल + IE 6.0.2900.2180.xpsp_sp2_qfe.070227-2300

— व्लादि गुदिम

पहला मेरे लिए एक बॉक्स है, बाकी काम ठीक है। हालाँकि, मैं इसके बजाय एक छवि का उपयोग करूँगा, बस सुनिश्चित करने के लिए।

— mbillard

6

बस स्पष्ट होने के लिए, पहली छवि को एक बॉक्स माना जाता है - यह एक खाली चेकबॉक्स है!

— जॉन फेमिनाला

1

@ ततोफिल: आह, ठीक है। मैं उबंटू का उपयोग कर रहा हूं, और एफएफ़ में कॉन्फ़िगर किए गए डिफ़ॉल्ट सैंस फ़ॉन्ट में ये ग्लिफ़ हैं। विंडोज में, इन ग्लिफ़ को देखने के लिए चरित्र मानचित्र का उपयोग करें और देखें कि क्या आपका इच्छित फ़ॉन्ट है। यदि नहीं, तो आपको एक अलग चुनना होगा।

— जॉन फेमिनेला

5

खाली बॉक्स दशमलव कोड: 0x2610 -> 9744. इसलिए HTML कोड ☐चेक बॉक्स के लिए इसी तरह दिखेगा : 0x2611 -> 9745 और HTML कोड☑

— विकास

272

सबसे पहले, आपको महसूस करना चाहिए कि आपको वास्तव में HTML संस्थाओं का उपयोग करने की आवश्यकता नहीं है - जब तक कि आपके HTML दस्तावेज़ के एन्कोडिंग को UTF-8 के रूप में ठीक से घोषित नहीं किया जाता है, आप बस इन प्रतीकों को अपनी फ़ाइल / सर्वर-साइड स्क्रिप्ट में कॉपी / पेस्ट कर सकते हैं / जावास्क्रिप्ट / जो कुछ भी।

कहा जा रहा है कि, इस विषय से संबंधित सभी संबंधित UTF-8 वर्णों / HTML संस्थाओं की संपूर्ण सूची यहां दी गई है :

: (हेक्स: ☐/ डेक्स:) ☐: बैलेट बॉक्स (खाली, यह है कि यह कैसे माना जाता है)
: (Hex: ☑/ dec:): ☑चेक के साथ मतपेटी बॉक्स
: (हेक्स: ☒/ डेक्स:): ☒एक्स के साथ मतपेटी बॉक्स
✓ (हेक्स: ✓/ दिसम्बर: ✓): चेक मार्क, के बराबर &checkmark;और &check;में अधिकांश ब्राउज़र
: (हेक्स: ✔/ डिक:) ✔: भारी चेक मार्क
: (हेक्स: ✗/ डेस:) ✗: बैलट एक्स
: (Hex: ✘/ dec:) ✘: भारी मतलबी x
X (check हेक्स: 🗸/ डिक 🗸): लाइट चेक मार्क (2017 के रूप में खराब रूप से समर्थित)
⚠ (white hex: ✅/ dec :) ✅: सफेद भारी चेक मार्क (2017 के रूप में मिश्रित समर्थन)
⚠ (ball hex: 🗴/ dec :) 🗴: बैलट स्क्रिप्ट एक्स (2017 के रूप में खराब रूप से समर्थित)
X (ball hex: 🗶/ dec :) 🗶: बैलट बोल्ड स्क्रिप्ट एक्स (2017 के रूप में खराब रूप से समर्थित)
X (ball hex: ⮽/ dec :): ⮽प्रकाश एक्स के साथ मतपेटी बॉक्स (2017 के रूप में खराब रूप से समर्थित)
X (ball hex: 🗵/ dec :): 🗵स्क्रिप्ट एक्स के साथ बैलेट बॉक्स (2017 के रूप में खराब रूप से समर्थित)
X (ball hex: 🗹/ dec :): 🗹बोल्ड बॉक्स के साथ बोल्ड चेक (2017 के रूप में खराब रूप से समर्थित)
X (ball हेक्स: 🗷/ डिक:): 🗷बोल्ड स्क्रिप्ट एक्स के साथ बैलेट बॉक्स (2017 के रूप में खराब रूप से समर्थित)

टिक प्रतीकों के लिए वेब फोंट की जाँच? यहां और अधिक सामान्य लोगों के लिए नमूना का उपयोग करने के लिए तैयार है: A☐B☑C☒D✓E✔F✗G✘H- बस इसे अपने वेबफ़ॉन्ट प्रदाता के नमूना टेक्स्ट बॉक्स में कॉपी / पेस्ट करें और देखें कि कौन से फ़ॉन्ट प्रतीकों का समर्थन करते हैं।

— बोगदान स्टैन्सिस्कु
स्रोत

17

क्लाइंट मशीन को एक उचित फ़ॉन्ट की आवश्यकता होती है जो इस चरित्र को प्रदर्शित करने के लिए ग्लिफ़ रखता है। लेकिन टाइम्स न्यू रोमन नहीं है। इसके बजाय एरियल यूनिकोड एमएस या लुसिडा ग्रांड आज़माएँ :

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

यह IE 5.5, IE 6.0, FF 3.0.6 में Windows XP पर मेरे लिए काम करता है।

— Gumbo
स्रोत

या तो फ़ॉन्ट नहीं मिला, केवल लुसिडा सैंस यूनिकोड जो दूरस्थ रूप से यूनिकोड फ़ॉन्ट की तरह दिखता है लेकिन इसमें टिक नहीं है।

— व्लाद गुदिम

फिर कुछ फोंट सूचीबद्ध करें जिनके पास इस चरित्र के लिए एक ग्लिफ़ है font-family: Arial Unicode MS, Lucida Sans Unicode, Lucida Grande:।

— गुम्बो

Gumbo, काम नहीं करता है। इसके अलावा मेरे पास एरियल यूनिकोड एमएस और लुसिडा ग्रांडे स्थापित नहीं है।

— व्लादिमीर मरिम

यह लगभग उतना ही है जितना आप पाने जा रहे हैं, लेकिन दुर्भाग्य से Lucida Sans Unicode U + 2713/2714 की आपूर्ति नहीं करता है।

— बॉब

13

मैं सामान्य रूप से फ़ॉन्ट फ़ॉन्ट का उपयोग करता हूं ( http://fontawesome.io/icon/check/ ), आप इसे html फ़ाइलों में उपयोग कर सकते हैं:

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

या सीएसएस में:

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

— स्टीफन
स्रोत

11

आप केवल पढ़े जाने वाले मोड में HTML इनपुट चेकबॉक्स तत्व का उपयोग क्यों नहीं करते हैं

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

मुझे लगता है कि यह सभी ब्राउज़रों पर काम करेगा।

— Drejc
स्रोत

6

हमें नियंत्रण की आवश्यकता नहीं है, बस एक संकेत है कि मैट्रिक्स के भीतर एक निश्चित विकल्प उपलब्ध है। इस मामले में अक्षम नियंत्रण का उपयोग करना गलत होगा।

— व्लादिमीर मरिम

11

मैं एक ही समस्या में चलता हूं और कोई भी सुझाव काम नहीं करता है (फ़ायरफ़ॉक्स विंडोज़ विंडोज पर)।

इसलिए मुझे थोड़ा चेकमार्क प्रदर्शित करने के लिए छवि डेटा का उपयोग करके एक संभावित समाधान मिला :

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

बेशक आप अपनी स्वयं की चेकमार्क छवि बना सकते हैं और इसे डेटा के रूप में जोड़ने के लिए एक कनवर्टर का उपयोग कर सकते हैं: छवि / जीआईएफ। उम्मीद है की यह मदद करेगा।

— काई नैक
स्रोत

8

हालांकि ब्राउज़र एन्कोडिंग को UTF-8 में सेट करता है

(यदि आप संख्यात्मक चरित्र संदर्भों का उपयोग कर रहे हैं, तो इससे कोई फर्क नहीं पड़ता कि एन्कोडिंग का क्या उपयोग किया जा रहा है, ब्राउज़र को सीधे संख्या से सही यूनिकोड कोडपॉइंट मिलेगा।)

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

अगर कोई विंडोज पर एफएफ के तहत जांच कर सकता है तो मैं सराहना करूंगा। मुझे पूरा यकीन है कि यह एक गैर विंडोज बॉक्स पर काम नहीं करेगा।

फ़ायरफ़ॉक्स 3, ओपेरा और सफारी में मेरे लिए विफल रहता है। उत्सुकता से, अन्य वेबकिट ब्राउज़र, क्रोम में काम करता है। लिनक्स पर भी विफल रहता है (जाहिर है, जैसा कि विंगडिंग्स वहां स्थापित नहीं है; यह मैक पर स्थापित है, लेकिन अगर सफारी नहीं है तो यह आपकी मदद नहीं करता है)।

इसके अलावा यह एक बहुत बुरा हैक है - यह चरित्र सभी इरादों और उद्देश्यों "ü" के लिए है और खोज इंजन जैसी चीजों के लिए इस तरह दिखाई देगा, या यदि पाठ कॉपी-और-पेस्ट किया गया है। जब तक आपके पास वास्तव में कोई विकल्प न हो, उचित यूनिकोड कोड पॉइंट जाने का तरीका है।

समस्या यह है कि विंडोज की आपूर्ति U + 2713 CHECK MARK ('✓') के साथ कोई फॉन्ट बंडल नहीं है। केवल एक जो आप विंडोज मशीन पर पा सकते हैं, वह है "एरियल यूनिकोड एमएस", जो वास्तव में निर्भर नहीं है। इसलिए अंत में मुझे लगता है कि आपको या तो करना होगा:

एक अलग चरित्र का उपयोग करें जो बेहतर समर्थित है (जैसे। '●' - बुलेट , जैसा कि एसओ द्वारा उपयोग किया जाता है), या
ऑल्ट टेक्स्ट के रूप में '✓' के साथ एक इमेज का उपयोग करें।

— bobince
स्रोत

8

पार्टी के बहुत देर से आने पर, मैंने पाया कि &check;(in) ओपेरा में काम किया था। मैंने इसे किसी अन्य ब्राउज़र पर परीक्षण नहीं किया है, लेकिन यह कुछ लोगों के लिए उपयोगी हो सकता है।

— Rossum
स्रोत

4

वर्थ नोटिंग &check;(और &checkmark;) दोनों का मूल्यांकन करते हैं ✓, जो कि शीर्ष उत्तर का उपयोग करता है। यह एक HTML5 चरित्र इकाई है और IE6 में काम नहीं करेगा।

— जेम्स डोनली

5

.className {
   content: '\&#x2713';
}

CSS कंटेंट प्रॉपर्टी का उपयोग करके आप एक इमेज या अन्य कोडसाइन के साथ टिक दिखा सकते हैं।

— एस शर्मा
स्रोत

निश्चित नहीं है: w3schools.com/cssref/pr_gen_content.asp फ़ायरफ़ॉक्स के साथ comapatibily से पता चलता है

— s-sharma

todomvc.com/labs/altecture-examples/react जाँच करें कि क्या इसका काम है या नहीं क्योंकि वे टिक मार्क के लिए सामग्री का उपयोग कर रहे हैं।

— एस-शर्मा

4

यदि आप css सामग्री में utf-8 कोड का उपयोग करना चाहते हैं, तो यह संभव है:.class{ content: "\2713"; }

— मोर्टेज़ा ज़ीए

4

क्या Would (वर्गमूल चिह्न, & # 8730?) पर्याप्त होगा?

वैकल्पिक रूप से, सुनिश्चित करें कि आप ब्राउज़र को डेटा भेजने से पहलेContent-Type: हेडर सेट कर रहे हैं । सामग्री-प्रकार टैग को केवल निर्दिष्ट करने से ब्राउज़र को सही वर्ण सेट का उपयोग करने के लिए प्रोत्साहित करने के लिए पर्याप्त नहीं हो सकता है।<meta>

— इयान केम्प
स्रोत

धन्यवाद! वर्गमूल काम करता है, लेकिन इर्रिट जैसा कुछ दिखता है ... वर्गमूल? लेकिन मैं विकल्प की अनुपस्थिति में अनुमान लगाता हूं कि यह जितना संभव हो उतना करीब होगा।

— व्लादिमीर मरिम

1

Btw, मेटा टैग निर्दिष्ट करते हुए मेरा IE पर अच्छी तरह से UTF-8 सेट करता है, इसलिए इस मामले में यह मुद्दा नहीं है।

— व्लादिमीर मरिम

1

एक वर्गमूल एक वर्गमूल है और एक चेकमार्क टिक एक चेकमार्क टिक है। मुझे एक चेंजिंग रूम के दरवाज़े पर टॉयलेट पोर्ट्रेट लगाने जैसा लगता है।

— वोल्कर ई।

1

@VolkerE। लेकिन यह प्रफुल्लित करने वाला होगा!

— डेव न्यूटन

3

Wingdings का उपयोग करके समाधान जो यूनिकोड आधारित नहीं है और 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> ✓

— निशांत
स्रोत

0

आप ⊕ या ⊕ का उपयोग कर सकते हैं

— गेब्रियल सोलोमन
स्रोत

1

वे संकेत नहीं हैं, वे प्लस / माइनस चक्कर लगा रहे हैं।

— GKFX

0

आप Base64 एनकोडेड GIF ( यहां ऑनलाइन जनरेटर ) के साथ थोड़ा सफेद एक जोड़ सकते हैं :

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

उदाहरण के लिए, क्रोम के साथ, मैं इसे चेकबॉक्स नियंत्रण की शैली के लिए उपयोग करता हूं:

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

यदि आप इसे IMG टैग में चाहते हैं, तो आप चेकमार्क / टिकमार्क इस प्रकार करेंगे:

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

— Volomike
स्रोत

0

WebDing या WingDing फ़ॉन्ट का उपयोग करना इस विषय के लक्ष्य को प्राप्त करने का एकमात्र तरीका है: इसे IE 6.0.2900 से शुरू करने का काम करना है । इसलिए मैं यहां कुछ पोस्ट करूंगा, साथ ही साथ कुछ पोस्ट को ऊपर भी पोस्ट करना होगा:

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>

स्निपेट का विस्तार करें

यहाँ संदर्भ: Wingdings webdings

— दिमित्री बेबिच
स्रोत