تنزيل js server text width - تنزيل js server text width المصدر

js server text width

تحميل الخط

1.0.0

تنزيل

JS-Server-Text-Width

توفر هذه الوحدة وظيفة لحساب عرض النص بالبكسل. في المتصفح ، لديك هذه القدرة خارج الصندوق (مع قماش أو مع عنصر مخفي) ولكن ليس في NodeJs. من المفيد تقديم جانب الخادم عندما تحتاج إلى تقليم النص إلى بعض الحجم الثابت أو لرسم شيء حول النص.

التثبيت

 npm install server-text-width

أو

 yarn add server-text-width

سمات

لا تبعيات
يعمل في العقدة وفي المتصفح نفسه
يدعم أحرف Unicode (ليس فقط اللاتينية أو ASCII)
يدعم خطوط متعددة (خطوطك الخاصة أيضًا)
يدعم أحجام الخطوط المتعددة
يدعم وزن الخط
تشمل تعريفات TypeScript
يقلل من حجم بيانات الجدول

كيف يعمل؟

تم استعارة الفكرة الأصلية من https://github.com/adambisek/string-pixel-width

افتح أدوات خاصة mappingTool.html المدرجة في تلك الحزمة
في هذه الأداة ، اختر اسم الخط والحجم والوزن. حدد أيضًا نطاق أحرف Unicode.
تقوم الأداة بإنشاء الجدول بعرض لكل حرف.
ضع جدولًا في المصدر الخاص بك كوحدة ثابتة وتهيئة معها.
الآن لديك وظيفة يمكنها قياس عرض النص.

خطوة بخطوة

افتح mappingTool.html في متصفحك. يمكنك تنزيله من github https://raw.githubusercontent.com/evgenus/js-server-text-width/main/mappingtool.html

MapPingTool

حدد الخط الذي تريد قياسه وحجم الخط ووزن الخط ونطاق الأحرف. جميع صفحات Unicode موجودة بالفعل هنا. يمكنك تحديد استنادًا إلى اللغة (أو الأماكن) التي تستخدمها. يمكنك أيضًا تجربة النص باستخدام الإدخال في الأعلى. سيتم تسليط الضوء على جميع الأحرف غير المغطاة بنطاقات Unicode المحددة باللون الأحمر.

في الجزء السفلي ، ستقوم الأداة بإنشاء بيانات الجدول الخاصة بك ، والتي تحتاج إلى التغذية في الوحدة النمطية. يتم تمثيل كل عرض حرف برموز 2 في القاعدة 64 الترميز. واحد للعدد عدد صحيح وواحد للجزء الكسري (في الخط ، يكون للأحرف المقدمة عرض كسور في وحدات البكسل). هذا أكثر إحكاما من تخزين البيانات في JSON.

في الكود الخاص بك ، قم بإنشاء متغير ثابت مع هذه القيمة.

 const TEXT_WIDTH_LOOKUP_TABLE = {
    "Times|32px|bold|0" : "aAaAaAaAaAaAaAaAaAIAIAIAIAIAaAaAaAaAaAaAaAaAaAaAaAaAaAaAIAIAIAIAIAKqRxQAQAgAaqI5KqKqQASOIAKqIAI5QAQAQAQAQAQAQAQAQAQAKqKqSOSOSOQAdxXGVVXGXGVVTiY5Y5MdQAY5VVeMXGY5TiY5XGRzVVXGXGgAXGXGVVKqI5KqSmQAKqQARzOMRzOMKqQARzI5KqRzI5aqRzQARzRzOMMdKqRzQAXGQAQAOMMmHCMmQoaA" ,
    "Times|32px|bold|400" : "VVVVaqS9W5RzMdMdQAdkdkbRY5ZdYIY5XGVVVVS9WRVVfRUKZdZdY5WEeMY5Y5Y5TiXGVVYIbXXGY5X9e9e9Y5e9UKW5fdXGQAQAPsN7QAOMYRNTSXSXRzRRU7RzQARzRzOMPsQAXuQARbRMZzZzSuYMPiOiYORMOMOMRMN7OiMdI5IsKqXgXgRMRzSXQARzoATzYbTMgOVOXGQAjIYxfoXMrgf9Q5M3Y9WAY5QAaGTXaGTXruiRaXSunkZ1oATzXGOMKzAAAAAAAAAAAAAAY5SbVKQ7TiRzS9N7S9N7XGSdfRYRUKNTY5RzY5TEXMSbagUKY5RzdgVVjqbAXVREXGOMVVPuXGXGXiXiXGQAbxTgX9RMX9SGX9RMcKSCcKSCMdfRYRXmTAX1R9Y5SbY5SbXgSCeMVzI5XGQAXGQAgAXGVVOMVAOMVAOMfRYRUKNTQ5OqZdSXZdSXY5QAY5QAY5QAW5OiYIQAYIQAYIQAX9RMUXOie9YMUXOiXGQAXGQA" ,
    "Times|32px|bold|591" : "AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAALoAAKqAAAAKqAAAAKGAAaAaAaAaAaAaAaAaAQ3OsLuO3QZJiKKQIQ7J7OoORN7QXREKbKGPTQOPxOoSEQdPdO1WCQkaAaAaAaAaATGTgT3IKOu"
} ;

ملاحظة: إذا كنت بحاجة إلى عدة خطوط أو أحجام أو وزن أو نطاقات ، فقم بدمج هذا القاموس يدويًا. تقتصر الأداة على إنتاج مجموعة واحدة فقط في ذلك الوقت للبساطة.

ثم فقط استيراد الوحدة النمطية وتهيئتها

 import { init } from 'server-text-width' ;

const { getTextWidth } = init ( TEXT_WIDTH_LOOKUP_TABLE ) ;

const width = getTextWidth ( 'Measure my text' ) ;