পাঠ্য প্রস্থ কীভাবে পরিমাপ করা হয়?

পাঠ্য প্রস্থ হল অনুভূমিক পিক্সেল স্থান যা একটি নির্দিষ্ট ফন্ট, আকার এবং ওজনের সাথে রেন্ডার করা হলে অক্ষরের একটি স্ট্রিং দখল করে। অক্ষর গণনার বিপরীতে, পিক্সেল প্রস্থ প্রতিটি গ্লিফের আনুপাতিক ব্যবধানের উপর নির্ভর করে — বেশিরভাগ ফন্টে "W" অক্ষর "i" এর চেয়ে অনেক বিস্তৃত। পাঠ্য প্রস্থ সঠিকভাবে পরিমাপ করা UI লেআউট, লেবেল ট্রাঙ্কেশন, গতিশীল ক্যানভাস রেন্ডারিং এবং স্ট্রিংগুলি নির্দিষ্ট-প্রস্থের কন্টেইনারে ফিট করার জন্য গুরুত্বপূর্ণ।

ব্রাউজারগুলি HTML5 Canvas API এর measureText() পদ্ধতি প্রকাশ করে, যা স্ক্রিনে প্রদর্শন না করে রেন্ডার করা পাঠ্য প্রস্থ গণনা করে। একটি অফস্ক্রিন ক্যানভাস প্রসঙ্গে অঙ্কন করে, ফন্ট পরিবার, আকার এবং ওজনের যেকোনো সমন্বয়ের জন্য একটি নির্ভুল সাব-পিক্সেল পরিমাপ পাওয়া যায়।

সরঞ্জাম বর্ণনা

এই সরঞ্জামটি Canvas API ব্যবহার করে একটি বা দুটি পাঠ্য স্ট্রিংয়ের পিক্সেল প্রস্থ গণনা করে। একটি ফন্ট পরিবার নির্বাচন করুন, ফন্ট আকার এবং ওজন সেট করুন এবং তাৎক্ষণিকভাবে রেন্ডার করা পিক্সেল প্রস্থ দেখুন। যখন দুটি স্ট্রিং প্রবেশ করানো হয়, একটি তুলনা ভিউ তাদের মধ্যে পরম পার্থক্য এবং প্রস্থের অনুপাত দেখায়।

বৈশিষ্ট্য

  • সমস্ত ওয়েব-নিরাপদ সিস্টেম ফন্ট এবং কাস্টম আপলোড করা ফন্ট ফাইল (TTF, OTF, WOFF, WOFF2) সমর্থন করে
  • পার্থক্য এবং অনুপাত পরিসংখ্যান সহ একবারে দুটি স্ট্রিং তুলনা করুন
  • 1 থেকে 256 px পর্যন্ত সামঞ্জস্যযোগ্য ফন্ট আকার এবং সমস্ত নয়টি মান ফন্ট ওজন মান

এটি কীভাবে কাজ করে

প্রস্থ ব্রাউজারের CanvasRenderingContext2D.measureText() API ব্যবহার করে পরিমাপ করা হয়। একটি অফস্ক্রিন <canvas> উপাদান তৈরি করা হয়, এর 2D প্রসঙ্গ ফন্ট সম্পত্তি নির্বাচিত পরিবার, আকার এবং ওজনের সাথে মেলাতে সেট করা হয়, এবং measureText() পিক্সেলে সীমানা বাক্স প্রস্থ প্রদান করে। কাস্টম ফন্টগুলি পরিমাপের আগে ব্রাউজারের FontFace রেজিস্ট্রিতে লোড করা হয় যাতে ফলাফলগুলি প্রকৃত টাইপফেস প্রতিফলিত করে।