كيف يتم قياس عرض النص؟

يشير عرض النص إلى المساحة بالبكسل الأفقية التي تشغلها سلسلة من الأحرف عند عرضها بخط وحجم وسمك معينين. بخلاف عدد الأحرف، يعتمد عرض البكسل على المسافات النسبية لكل حرف رسومي — الحرف "W" أعرض بكثير من "i" في معظم الخطوط. يعتبر قياس عرض النص بدقة مهماً لتخطيط واجهة المستخدم، واختصار التسميات، وعرض الرسومات الديناميكية على لوحة الرسم، وملاءمة السلاسل النصية في حاويات ذات عرض ثابت.

تكشف المتصفحات عن طريقة measureText() من HTML5 Canvas API، والتي تحسب عرض النص المعروض دون عرضه على الشاشة. من خلال الرسم على سياق لوحة رسم خارج الشاشة، يمكن الحصول على قياس دقيق بدقة الكسور العشرية من البكسل لأي مجموعة من عائلة الخط والحجم والسمك.

وصف الأداة

تحسب هذه الأداة عرض البكسل لسلسلة نصية واحدة أو سلسلتين باستخدام Canvas API. اختر عائلة الخط، وحدد حجم الخط والسمك، وشاهد على الفور عرض البكسل المعروض. عند إدخال سلسلتين، تعرض طريقة المقارنة الفرق المطلق ونسبة العرض بينهما.

الميزات

  • يدعم جميع الخطوط الآمنة للويب والخطوط المخصصة المرفوعة (TTF, OTF, WOFF, WOFF2)
  • مقارنة سلسلتين في نفس الوقت مع إحصائيات الفرق والنسبة
  • حجم خط قابل للتعديل من 1 إلى 256 بكسل وجميع قيم سمك الخط التسعة القياسية

كيفية العمل

يتم قياس العرض باستخدام واجهة برمجة التطبيقات CanvasRenderingContext2D.measureText() للمتصفح. يتم إنشاء عنصر <canvas> خارج الشاشة، وتعيين خاصية الخط في السياق ثنائي الأبعاد لمطابقة عائلة الخط والحجم والسمك المحددة، وتعيد measureText() عرض صندوق الحدود بالبكسل. يتم تحميل الخطوط المخصصة في سجل FontFace للمتصفح قبل القياس بحيث تعكس النتائج خط الطباعة الفعلي.