مولّد المقياس الطباعي

ما هي مولّد المقياس الطباعي؟

مولّد المقياس الطباعي يحوّل حجمًا أساسيًا ونسبة وحدية إلى مقياس طباعي كامل ومتسق رياضيًا، بأي عدد تحتاجه من درجات العناوين الأكبر ودرجات التسمية الأصغر. إلى جانب أحجام الخط الخام، يستنتج ارتفاع سطر وتباعد أحرف متناسبين لكل درجة، إضافة إلى تعبير clamp() مرن اختياري يُدرِج بين نافذة عرض للجوال وأخرى لسطح المكتب باستخدام نسبة جوال منفصلة. يستخدمه المصممون ومطورو الواجهة الأمامية لبناء رموز الطباعة في نظام تصميم، والحفاظ على اتساق الأحجام، ولصق CSS أو Sass أو Tailwind أو JSON جاهز. اكتب أي نسبة مخصصة أو اختر واحدة كلاسيكية، واضبط الحجم الأساسي والوحدة (px أو rem)، وعاينها بخطك، ثم انسخ الصيغة التي تحتاجها.

كيفية استخدام مولّد المقياس الطباعي

1. اكتب أي نسبة مخصصة في حقل النسبة، أو اختر واحدة كلاسيكية مثل الرابعة التامة (1.333) من قائمة الإعدادات المسبقة في الإعدادات.
2. اضبط الحجم الأساسي؛ يصبح هذا حجم نص المتن ومرتكز المقياس.
3. في الإعدادات، اختر كم درجة أكبر وأصغر تُولَّد؛ تقع الدرجات الأصغر تحت الأساس للتسميات والنص الدقيق.
4. اضبط ارتفاع السطر الأساسي والضيّق وتباعد الأحرف عند الأحجام الكبيرة، وأدخل font-family لمعاينة المقياس بخطك.
5. للطباعة المتجاوبة، اضبط أدنى وأقصى عرض لنافذة العرض ونسبة جوال لبناء مقياس clamp() مرن.
6. بدّل صيغة المخرجات بين متغيرات CSS وclamp() مرن وSass وإعداد Tailwind وJSON، ثم انسخ الشيفرة أو حجم درجة واحدة بعينها.

أمثلة

النسبة 1.333، الأساس 16px، 5 لأعلى / 1 لأسفل

--font-size-2xl: 37.897px; --line-height-2xl: 1.27; --letter-spacing-2xl: -0.017em;

الأساس 16px، النسبة 1.333، نسبة الجوال 1.2، 320-1240px

--font-size-2xl: clamp(27.648px, 24.083px + 1.114vw, 37.897px);

أي مقياس، تصدير Tailwind

fontSize: { base: ['16px', { lineHeight: '1.5', letterSpacing: '0em' }] }

الأسئلة الشائعة

هل يمكنني استخدام نسبة مخصصة وليس الإعدادات المسبقة فقط؟

نعم. اكتب أي رقم في حقل النسبة، مثل 1.2 أو 1.5 أو 1.618 أو قيمة غير قياسية مثل 1.45. قائمة الإعدادات المسبقة في الإعدادات مجرد اختصار يملأ الحقل نفسه، واختيار قيمة لا تطابق أي إعداد مسبق يُظهر ببساطة مخصص.

كيف تعمل الدرجات الأصغر (السالبة)؟

يرتكز المقياس على الحجم الأساسي (الدرجة 0). تضرب الدرجات الأكبر الأساس في النسبة، بينما تقسمه الأصغر، فتنتج أحجام تسمية ونص دقيق تحت الأساس مثل sm وxs. اضبط عدد الدرجات الأكبر والأصغر التي تريدها في الإعدادات.

كيف يُحسب ارتفاع السطر وتباعد الأحرف؟

ينتقل ارتفاع السطر من قيمتك الأساسية عند حجم المتن نحو قيمة أضيق كلما كبر النص، وينتقل تباعد الأحرف من صفر عند الأساس نحو قيمتك للأحجام الكبيرة، فيصبح نص العرض الكبير أضيق قليلًا والنص الصغير أوسع قليلًا. كلا المنحنيين قابل للضبط في الإعدادات.

ما مقياس clamp() المرن؟

يبني لكل درجة font-size: clamp() ينمو بسلاسة بين أدنى وأقصى عرض لنافذة العرض، مستخدمًا نسبتك الرئيسية عند العرض الأقصى ونسبة جوال منفصلة عند الأدنى. اختر صيغة المخرجات CSS clamp() لتصديره.

هل تُرسَل أي من بياناتي إلى خادم؟

لا. يُحسب المقياس كاملًا، بما في ذلك الأحجام وارتفاع السطر وتباعد الأحرف وقيم clamp() المرنة، محليًا في متصفحك بعمليات حسابية بسيطة. لا يُرفع أي شيء، لذا تعمل الأداة دون اتصال وتحافظ على خصوصية إعداداتك.