الخطوط
خط IBM Plex Sans Arabic وسلّم الخطوط في DGA وأنماطه المتجاوبة.
الإصدار 0.2.0 ·
تستخدم DGA خط IBM Plex Sans Arabic للنص العربي واللاتيني، بأربعة أوزان. يحمّله dga-style عبر next/font (مجموعتا الحروف العربية واللاتينية) ويتيحه باسم font-sans.
بدّل حجم العرض: تتبع أحجام العناوين الكبيرة (display) أنماط Figma للحاسوب واللوحي والجوال.
السلّم
| الأداة | نمط Figma | حاسوب | لوحي | جوال | تباعد الأحرف |
|---|---|---|---|---|---|
الأداة:text-display-2xl | نمط Figma:Display 2xl | حاسوب:72px / 90px | لوحي:56px / 72px | جوال:48px / 64px | تباعد الأحرف:-2% |
الأداة:text-display-xl | نمط Figma:Display xl | حاسوب:60px / 72px | لوحي:48px / 64px | جوال:40px / 56px | تباعد الأحرف:-2% |
الأداة:text-display-lg | نمط Figma:Display lg | حاسوب:48px / 60px | لوحي:36px / 48px | جوال:32px / 40px | تباعد الأحرف:-2% |
الأداة:text-display-md | نمط Figma:Display md | حاسوب:36px / 44px | لوحي:30px / 40px | جوال:24px / 32px | تباعد الأحرف:-2% |
الأداة:text-display-sm | نمط Figma:Display sm | حاسوب:30px / 38px | لوحي:24px / 32px | جوال:20px / 28px | تباعد الأحرف:0% |
الأداة:text-display-xs | نمط Figma:Display xs | حاسوب:24px / 32px | لوحي:20px / 28px | جوال:18px / 24px | تباعد الأحرف:0% |
الأداة:text-xl | نمط Figma:Text xl | حاسوب:20px / 30px | لوحي:20px / 30px | جوال:20px / 30px | تباعد الأحرف:0% |
الأداة:text-lg | نمط Figma:Text lg | حاسوب:18px / 28px | لوحي:18px / 28px | جوال:18px / 28px | تباعد الأحرف:0% |
الأداة:text-md | نمط Figma:Text md | حاسوب:16px / 24px | لوحي:16px / 24px | جوال:16px / 24px | تباعد الأحرف:0% |
الأداة:text-sm | نمط Figma:Text sm | حاسوب:14px / 20px | لوحي:14px / 20px | جوال:14px / 20px | تباعد الأحرف:0% |
الأداة:text-xs | نمط Figma:Text xs | حاسوب:12px / 18px | لوحي:12px / 18px | جوال:12px / 18px | تباعد الأحرف:0% |
الأداة:text-2xs | نمط Figma:Text 2xs | حاسوب:10px / 14px | لوحي:10px / 14px | جوال:10px / 14px | تباعد الأحرف:0% |
تحتفظ أحجام النص الأساسي (من text-xl إلى text-2xs) بقيمها المكتبية في كل أحجام العرض. فنمط الجوال في Figma يصغّر text-md إلى 12px وtext-xs إلى 8px، وهذا أصغر من أن يُقرأ؛ انظر الاختلافات. أما أحجام display من md فأكبر فتستخدم تباعد أحرف بنسبة -2% كما في Figma.
الأوزان
| الرمز | القيمة | الأداة |
|---|---|---|
الرمز:--font-weight-bold | القيمة:Bold | الأداة:font-bold |
الرمز:--font-weight-semibold | القيمة:Semibold | الأداة:font-semibold |
الرمز:--font-weight-medium | القيمة:Medium | الأداة:font-medium |
الرمز:--font-weight-regular | القيمة:Regular | الأداة:font-regular (font-normal) |
يسرد Figma أيضًا أنماطًا مائلة. لا يحتوي IBM Plex Sans Arabic على خط مائل، لذلك لا تُصدَر تلك الرموز.
الاستخدام
<h1 className="text-display-lg font-bold text-display">…</h1>
<p className="text-md text-primary-paragraph">…</p>
<span className="text-sm text-secondary-paragraph">…</span>يضبط كل حجم text-* ارتفاع السطر أيضًا. وللنص العربي ارفعه كما هو موضح في النص العربي، ولا تستخدم leading-none أبدًا.
الأنماط المتجاوبة
تتغير رموز الخطوط عند هذه العروض (الجوال أولًا):
| النمط | يُطبَّق من |
|---|---|
| الجوال | 0px |
| اللوحي | 768px (md) |
| الحاسوب | 1024px (lg) |
النص العربي
يحتاج النص العربي إلى أربعة إعدادات لا يحتاجها النص اللاتيني. يطبّق موقع التوثيق الأربعة كلها في كل صفحة عربية؛ انسخها إلى مشروعك.
:lang(ar) { line-height: 1.8; }
:lang(ar) :where(h1, h2, h3, h4) { line-height: 1.5; }
:lang(ar), :lang(ar) * { letter-spacing: 0; }- الخط. IBM Plex Sans Arabic للعربية واللاتينية معًا، فيحتفظ السطر المختلط بصوت واحد.
- ارتفاع السطر. 1.8 لنص المتن، ومن 1.35 إلى 1.5 للعناوين. تحتاج العلامات فوق الحروف العربية وتحتها إلى مساحة أكبر مما تمنحه أسطر الرموز (من 1.4 إلى 1.6)، ولذلك لا يُستخدم
leading-noneمع النص العربي. - بلا تباعد أحرف. التباعد السالب، ومنه -2% في أحجام display، يقطع الوصل بين الحروف. اضبطه على 0 في العربية، ولأي أداة
tracking-*. - الأرقام. الأرقام الغربية (من 0 إلى 9) في النثر وفي كل قيمة تقنية (الإصدارات والنسب والأحجام والأعداد والتواريخ). والأرقام الهندية (من ٠ إلى ٩) فقط في المحتوى النموذجي الذي يحاكي خدمة موجهة للمواطن، مثل بطاقة العنوان الوطني في الصفحة الرئيسية. لا تخلط النظامين داخل عرض واحد. هذا عرف في كود المنصات وليس قاعدة من DGA.