এইচটিএমএল / এক্সএইচটিএমএলে প্রতীক টিক চিহ্ন

279

আমাদের একটি অভ্যন্তরীণ ওয়েব অ্যাপের মধ্যে একটি টিক চিহ্ন (✓ বা ✔) প্রদর্শন করতে হবে এবং আদর্শভাবে কোনও চিত্র ব্যবহার করা এড়াতে চাই।

একটি এক্সপি বাক্সে আইই 6.0.2900 দিয়ে শুরু করে কাজ করতে হবে, আদর্শভাবে আমাদের এটি ক্রস ব্রাউজার (IE + এফএফের সাম্প্রতিক সংস্করণ) হওয়া দরকার।

নিম্নলিখিতটি বাক্সগুলি প্রদর্শন করে যদিও ইউটিএফ -8 এ ব্রাউজারের এনকোডিং সেট করে (মেটাটি ইস্যু নয়, দুর্দান্তভাবে কাজ করে)। ডিফল্ট ফন্টটি টাইমস নিউ রোমান (এটি একটি সমস্যা হতে পারে, তবে লুসিডা সানস ইউনিকোড চেষ্টা করেও কোনও লাভ হয় না এবং আমার কাছে আরিয়াল ইউনিকোড এমএসও নেই, না লুসিডা গ্র্যান্ডে ইনস্টল করা আছে)।

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

কোন সাহায্য প্রশংসা।

নীচে IE 6.0 এবং আই 7 এর অধীনে কাজ করে:

<html>
<head>

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

যদি কেউ উইন্ডোজ এফএফ এর অধীনে চেক করতে পারেন তবে আমি প্রশংসা করব। আমি নিশ্চিত যে এটি কোনও উইন্ডোজ বাক্সে কাজ করবে না pretty

html  xhtml 
— ভ্লাদ গুডিম
সূত্র
1
টিক চিহ্নটি দেখতে কেমন?
— জন ফেমেনিলা
আপনি কি এটি দেখেছেন: html-faq.com/htmlbasics/?spectedcharacters
— স্যাম
2
স্যাম, দয়া করে প্রশ্নটি একবার দেখুন।
— ভ্লাদ গুডিম
@ টোটোফিল, আমি জানি এটি একই সংস্থাগুলির বিষয়ে কথা বলে তবে এটি সার্ভারকে একটি প্রকৃত এইচটিটিপি শিরোনাম পাঠানোর পরামর্শ দেয় কনটেন্ট-প্রকার: পাঠ্য / এইচটিএমএল; চরসেট = ইউটিএফ -8 পাশাপাশি ব্যবহারে ফন্টটি নাও থাকতে পারে ব্যবহৃত অক্ষরগুলির জন্য গ্লাইফগুলি।
— স্যাম হাসলার
এখানে একটি দম্পতি রয়েছে: amp-hat.com/#q=check%20mark & # x2713 & # x2714
— এনডিপি

উত্তর:

454

আমি মনে করি আপনি কম-ভাল-সমর্থিত ইউনিকোড মান ব্যবহার করছেন, যা সর্বদা সমস্ত কোড পয়েন্টের জন্য গ্লাইফ থাকে না।
নিম্নলিখিত অক্ষর চেষ্টা করুন:

  • Un ( ইউনিকোড হেক্সাডেসিমেল [এইচটিএমএল দশমিক: &#9744;] মধ্যে 0x2610 ): একটি খালি (চেক না করা) চেকবক্স
  • । ( 0x2611 [এইচটিএমএল দশমিক: &#9745;]): পূর্ববর্তী চেকবক্সের পরীক্ষিত সংস্করণ
  • ✓ ( 0x2713 [এইচটিএমএল দশমিক: &#10003;])
  • ✔ ( 0x2714 [এইচটিএমএল দশমিক: &#10004;])

সম্পাদনা করুন: এখানে প্রথম প্রতীক সম্পর্কে কিছু বিভ্রান্তি আছে বলে মনে হচ্ছে, ☐ / 0x2610। এটি একটি খালি (চেক না করা) চেকবাক্স, সুতরাং আপনি যদি কোনও বাক্স দেখেন, এটি এমনভাবে দেখার দরকার ছিল। এটি ☑ / 0x2611 এর সমমনা, যা পরীক্ষিত সংস্করণ।

— জন ফেমেনেলা
সূত্র
1
কর্পোরেট সেটআপ: উইন এক্সপি পেশাদার + আই 6.0.2900.2180.xpsp_sp2_qfe.070227-2300
— ভ্লাদ গুডিম
প্রথমটি আমার কাছে একটি বাক্স, বাকি কাজ ঠিক আছে। যদিও, আমি পরিবর্তে একটি চিত্র ব্যবহার করতাম, কেবল নিশ্চিত হওয়ার জন্য।
— mbillard
6
কেবল পরিষ্কার করার জন্য, প্রথম চিত্রটি একটি বাক্স হওয়ার কথা - এটি একটি খালি চেকবক্স!
— জন Feminella
1
@ টোটোফিল: আহ, ঠিক আছে। আমি উবুন্টু ব্যবহার করছি, এবং আমি এফএফ-এ কনফিগার করা ডিফল্ট সানস ফন্টের এই গ্লিফগুলি রয়েছে। উইন্ডোজে এই গ্লাইফগুলি সন্ধান করতে কেবল চরিত্রের মানচিত্রটি ব্যবহার করুন এবং আপনার পছন্দসই ফন্টটি আছে কিনা তা দেখুন। যদি তা না হয় তবে আপনাকে অন্য একটি চয়ন করতে হবে।
— জন Feminella
5
খালি বাক্সের দশমিক কোড: 0x2610 -> 9744. সুতরাং এইচটিএমএল কোড &#9744;একইভাবে চেক বাক্সের মতো দেখাবে : 0x2611 -> 9745 এবং এইচটিএমএল কোড&#9745;
— বিকাশ
272

প্রথমে, আপনার উপলব্ধি করা উচিত যে আপনার HTML টি সত্ত্বাগুলি ব্যবহার করার দরকার নেই - যতক্ষণ না আপনার এইচটিএমএল ডকুমেন্টের এনকোডিংটি যথাযথভাবে ইউটিএফ -8 হিসাবে ঘোষণা করা হয়, আপনি কেবল এই ফাইলগুলি / সার্ভার-সাইড স্ক্রিপ্টে এই চিহ্নগুলি অনুলিপি / পেস্ট করতে পারবেন / জাভাস্ক্রিপ্ট / যাই হোক না কেন।

এই কথাটি বলার পরে, এই বিষয়টি সম্পর্কিত সমস্ত প্রাসঙ্গিক ইউটিএফ -8 অক্ষর / এইচটিএমএল সত্তাদের সম্পূর্ণ তালিকা এখানে রয়েছে :

  • ☐ (হেক্স: &#x2610;/ ডিসেম্বর &#9744;:): ব্যালট বাক্স (খালি, এটি এমনভাবে হওয়ার কথা)
  • ☑ (hex: &#x2611;/ dec &#9745;:): চেক সহ ব্যালট বাক্স
  • ☒ (hex: &#x2612;/ dec &#9746;:): এক্স সহ ব্যালট বাক্স
  • ✓ (হেক্স: &#x2713;/ ডিসেম্বর: &#10003;): টিক চিহ্ন, এর সমতুল্য &checkmark;এবং &check;মধ্যে অধিকাংশ ব্রাউজার
  • ✔ (hex: &#x2714;/ dec &#10004;:): ভারী চেক চিহ্ন
  • ✗ (hex: &#x2717;/ dec &#10007;:): ব্যালট এক্স
  • । (Hex: &#x2718;/ dec &#10008;:): ভারী ব্যালট এক্স
  • 🗸 (⚠ হেক্স: &#x1F5F8;/ ডেস্ক &#128504;): হালকা চেক চিহ্ন (2017 সালের হিসাবে খারাপভাবে সমর্থিত)
  • ✅ (⚠ হেক্স: &#x2705;/ ডিসেম্বর &#9989;:): সাদা ভারী চেক চিহ্ন (2017 হিসাবে মিশ্র সমর্থন)
  • 🗴 (⚠ হেক্স: &#x1F5F4;/ ডিসেম্বর &#128500;:): ব্যালট স্ক্রিপ্ট এক্স ( ২০১ of সালের হিসাবে খারাপভাবে সমর্থিত)
  • 🗶 (⚠ হেক্স: &#x1F5F6;/ ডিসেম্বর &#128502;:): ব্যালট সাহসী স্ক্রিপ্ট এক্স ( ২০১ of সালের হিসাবে খারাপভাবে সমর্থিত)
  • ⮽ (⚠ হেক্স: &#x2BBD;/ ডিসেম্বর &#11197;:): হালকা এক্স সহ ব্যালট বাক্স (২০১ 2017 সালের হিসাবে খারাপভাবে সমর্থিত)
  • 🗵 (⚠ হেক্স: &#x1F5F5;/ ডিসেম্বর &#128501;:): এক্স স্ক্রিপ্ট সহ ব্যালট বাক্স (2017 এর হিসাবে খারাপভাবে সমর্থিত)
  • 🗹 (⚠ hex: &#x1F5F9;/ dec &#128505;:): সাহসী চেক সহ ব্যালট বাক্স (২০১ of সালের হিসাবে খারাপভাবে সমর্থিত)
  • 🗷 (⚠ hex: &#x1F5F7;/ dec &#128503;:): সাহসী স্ক্রিপ্ট এক্স সহ ব্যালট বাক্স (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 এ উইন্ডোজ এক্সপিতে আমার জন্য কাজ করে।

— গাম্বো
সূত্র
কোনও ফন্ট পেলেন না, কেবল লুসিডা সানস ইউনিকোড যা দূরবর্তীভাবে ইউনিকোড ফন্টের মতো দেখাচ্ছে তবে এতে টিকগুলি নেই।
— ভ্লাদ গুডিম
তারপর কিছু হরফ এই অক্ষরের জন্য গ্লিফের আছে তালিকাভুক্ত করুন: font-family: Arial Unicode MS, Lucida Sans Unicode, Lucida Grande।
— গম্বো
গাম্বো, কাজ করে না এছাড়া আমার কাছে আড়িয়াল ইউনিকোড এমএস এবং লুসিডা গ্র্যান্ডে ইনস্টল নেই।
— ভ্লাদ গুডিম
আপনি যতটা কাছাকাছি চলে আসছেন এটি প্রায় কাছাকাছি, তবে দুর্ভাগ্যক্রমে লুসিডা সানস ইউনিকোড ইউ + 2713/2714 সরবরাহ করে না।
— বোবিনস
13

আমি সাধারণত হ'ল ফন্টউইজ ফন্ট ( http://fontawesome.io/icon/check/ ) ব্যবহার করি, আপনি এটি এইচটিএমএল ফাইলগুলিতে ব্যবহার করতে পারেন: 

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

বা সিএসএসে:

content: "\f00c";
font-family: FontAwesome;
— স্টিফান
সূত্র
11

আপনি কেবল পঠন মোডে এইচটিএমএল ইনপুট চেকবক্স উপাদানটি ব্যবহার করবেন না

<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

যদিও ইউটিএফ -8 এ ব্রাউজারের এনকোডিং সেট করে

(আপনি যদি সংখ্যার চরিত্রের রেফারেন্স অবশ্যই ব্যবহার করে থাকেন তবে কী এনকডিং ব্যবহার হচ্ছে তা বিবেচনাধীন নয়, ব্রাউজারগুলি সরাসরি নম্বর থেকে সঠিক ইউনিকোড কোডপয়েন্ট পাবেন))

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

যদি কেউ উইন্ডোজ এফএফ এর অধীনে চেক করতে পারেন তবে আমি প্রশংসা করব। আমি নিশ্চিত যে এটি কোনও উইন্ডোজ বাক্সে কাজ করবে না pretty

ফায়ারফক্স 3, অপেরা এবং সাফারিতে আমার জন্য ব্যর্থ। কৌতূহলীভাবে, অন্যান্য ওয়েবকিট ব্রাউজার, ক্রোমে কাজ করে। লিনাক্সেও ব্যর্থ হয় (স্পষ্টতই, উইংডিংসগুলি সেখানে ইনস্টল করা হয়নি; এটি ম্যাক্সে ইনস্টল করা আছে, তবে সাফারি না থাকলে এটি আপনাকে সহায়তা করে না)।

এছাড়াও এটি একটি সুন্দর বাজে হ্যাক - সেই চরিত্রটি সমস্ত উদ্দেশ্য এবং উদ্দেশ্যে "ü" এবং এটি সার্চ ইঞ্জিনের মতো জিনিসগুলিতে প্রদর্শিত হবে বা পাঠ্যটি অনুলিপি-আটকানো থাকলে। যথাযথ ইউনিকোড কোড পয়েন্টগুলি হ'ল উপায় যদি না আপনার সত্যিকারের কোনও বিকল্প না থাকে।

সমস্যাটি হ'ল উইন্ডোজের সাথে কোনও বান্ডিলযুক্ত ফন্ট ইউ + 2713 চেক মার্ক ('✓') সরবরাহ করে না। আপনি কেবলমাত্র উইন্ডোজ মেশিনে সন্ধানের একমাত্র সম্ভাবনা হ'ল "আরিয়াল ইউনিকোড এমএস", যা নির্ভর করা যায় না। সুতরাং শেষ পর্যন্ত আমি মনে করি আপনাকে হয়:

  • একটি ভিন্ন অক্ষর ব্যবহার করুন যা আরও ভাল সমর্থিত (যেমন '●' - বুলেট , এসও দ্বারা ব্যবহৃত হিসাবে), বা
  • Alt পাঠ্য হিসাবে '✓' সহ একটি চিত্র ব্যবহার করুন।
— bobince
সূত্র
8

পার্টিতে খুব দেরি করে এসেছি যে &check;(✓) অপেরাতে কাজ করেছে। আমি এটি অন্য কোনও ব্রাউজারে পরীক্ষা করে দেখিনি, তবে এটি কিছু লোকের পক্ষে কার্যকর হতে পারে।

— Rossum
সূত্র
4
লক্ষ্য করা যায় না যে &check;(এবং &checkmark;) উভয়ই মূল্যায়ন করে &#10003;যা শীর্ষ উত্তরটি ব্যবহার করে। এটি একটি HTML5 অক্ষর সত্তা এবং আই 6-এ কাজ করবে না।
— জেমস ডোনেলি
5 
.className {
   content: '\&#x2713';
}

সিএসএস সামগ্রী সামগ্রী ব্যবহার করে আপনি কোনও চিত্র বা অন্যান্য কোডাইন দিয়ে টিক দেখাতে পারেন।

— গুলি-শর্মা
সূত্র
নিশ্চিত নয়: w3schools.com/cssref/pr_gen_content.asp ফায়ারফক্সের সাথে কমপ্যাটিবিলি দেখায়
— এস-শর্মা
todomvc.com/labs/architecture-example/reck এটি পরীক্ষা করছে যা তারা টিক চিহ্নের জন্য সামগ্রী ব্যবহার করছে সে হিসাবে কাজ করছে কিনা not
— এস-শর্মা
4
আপনি যদি CSS সামগ্রীতে utf-8 কোড ব্যবহার করতে চান তবে এইভাবে এটি সম্ভব:.class{ content: "\2713"; }
— মরতেজা জিয়া
4

√ (বর্গমূলের প্রতীক, & # 8730;) কি যথেষ্ট হবে?

অন্যথা, নিশ্চিত হোন যে আপনি সেটিং করছি Content-Type:হেডার সামনে ব্রাউজারে ডেটা প্রেরণ। সঠিকভাবে <meta>কন্টেন্ট-টাইপ ট্যাগ উল্লেখ করা ব্রাউজারগুলিকে সঠিক অক্ষর সেট ব্যবহার করতে উত্সাহিত করতে যথেষ্ট নাও হতে পারে।

— আয়ান কেম্প
সূত্র
ধন্যবাদ! স্কোয়ার রুটটি কাজ করে তবে কিছুটা ত্রুটির মতো দেখায় ... বর্গমূল? তবে আমি অনুমান করি যে বিকল্পের অনুপস্থিতিতে এটি সম্ভবত যতটা নিকটবর্তী হবে।
— ভ্লাদ গুডিম
1
বিটিডব্লিউ, মেটা ট্যাগটি নির্দিষ্ট করে ইউটিএফ -8 মাইন আইটির উপর সুন্দরভাবে সেট করে, তাই এই ক্ষেত্রে এটি সমস্যা নয়।
— ভ্লাদ গুডিম
1
একটি বর্গমূল একটি বর্গমূল এবং একটি চেকমার্ক টিক একটি চেকমার্ক টিক। আমার কাছে মনে হচ্ছে কোনও টয়লেট পিকচারগ্রামটি চেঞ্জিং রুমের দরজায় রাখার মতো।
— ভোলকার ই।
1
@VolkerE। তবে তা হাসিখুশি!
— ডেভ নিউটন
3

উইংডিংস ব্যবহারের সমাধান যা ইউনিকোড ভিত্তিক নয় এবং উইংডিংস ইনস্টল না করে লিনাক্সে কাজ করে না।

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

বেস বেস 64 এনকোডেড জিআইএফ ( অনলাইন জেনারেটর এখানে ) দিয়ে আপনি কিছুটা সাদা জুড়তে পারেন :

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

Chrome এর সাথে, উদাহরণস্বরূপ, আমি এটি চেকবক্স নিয়ন্ত্রণ স্টাইল করতে ব্যবহার করি:

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 alt="" src="data:image/gif;base64,R0lGODlhCwAKAIABAP////3cnSH5BAEKAAEALAAAAAALAAoAAAIUjH+AC73WHIsw0UCjglraO20PNhYAOw==" width="11" height="10">
— Volomike
সূত্র
0

ওয়েবডিং বা উইংডিং ফন্টগুলি ব্যবহার করা এই বিষয়টির লক্ষ্য অর্জনের একমাত্র উপায়: এটি 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

— দিমিত্রি বাবিচ
সূত্র
আমাদের সাইট ব্যবহার করে, আপনি স্বীকার করেছেন যে আপনি আমাদের কুকি নীতি এবং গোপনীয়তা নীতিটি পড়েছেন এবং বুঝতে পেরেছেন ।
Licensed under cc by-sa 3.0 with attribution required.