الطباعة

تُسمّى أنماط النص في Tanrei بحسب المستوى الذي يحتله النص في الصفحة، لا بحسب فئة حجم. هناك ستة عشر دورًا: display واحد، و heading-1 إلى heading-6، وثلاثة أحجام للنص المتصل، وثلاثة أدوار للنص داخل عناصر التحكم وحولها، ودوران للشيفرة، و eyebrow. العنصر h2 هو heading-2؛ والفقرة هي body؛ والنص على الزر هو label. لا يحتاج أحد إلى أن يتذكر أيّ الأدوار الثلاثة ذات الأربعة عشر بكسلًا هو عنوان الجدول.

الدور نمط طباعي كامل: العائلة والحجم والوزن وارتفاع السطر وتباعد الأحرف. ترتبط المكوّنات بالأدوار، لا بالأحجام المجرّدة أبدًا، والطبقة تعطي الدور قيمًا جديدة دون أن تغيّر اسمه.

الأدوار الستة عشر

الدور	الافتراضي	الاستخدام
`display`	48px · 450 · خط العلامة	حجم العرض الوحيد: عبارة شاشة الهبوط، أو شاشة البداية. ليس مستوى عنوان.
`heading-1`	32px · 500 · خط العلامة	`h1`، عنوان الصفحة.
`heading-2`	24px · 500 · خط العلامة	`h2`، قسم.
`heading-3`	20px · 500 · خط العلامة	`h3`، قسم فرعي.
`heading-4`	18px · 500	`h4`، مجموعة داخل قسم.
`heading-5`	16px · 500	`h5`، وعنوان بطاقة أو مربع حوار أو عنصر قائمة.
`heading-6`	14px · 500	`h6`، وعنوان جدول أو قسم في نموذج.
`body-large`	16px · 400	النص التمهيدي والقراءة الطويلة.
`body`	14px · 400	`p`: النص الافتراضي في الواجهة.
`body-small`	13px · 400	`small`: نص ثانوي، أصغر بدرجة.
`label`	14px · 500	النص داخل عناصر التحكم وبجوارها: الأزرار، وحقول الإدخال، والتنقل.
`label-small`	12px · 500	الرقاقات، والشارات، وعناصر التحكم الكثيفة.
`caption`	11px · 500	النص المساعد، والبيانات الوصفية، والطوابع الزمنية.
`code`	13px · 400 · ثابت العرض	`code` و `pre`.
`code-small`	12px · 400 · ثابت العرض	الشيفرة داخل واجهة كثيفة.
`eyebrow`	12px · 500 · بتباعد أحرف	العنوان العلوي لقسم فوق عنوانه، ويحوّله المكوّن إلى أحرف كبيرة.

كل فئة مرتبة ترتيبًا صارمًا في الحجم: لا عنوان أصغر من العنوان الذي تحته، ولا دور متن أصغر من دور المتن الذي تحته. وحيث يتساوى عنوان ودور متن في الحجم (heading-6 و body كلاهما 14px، و heading-5 و body-large كلاهما 16px) فقاعدة النظام الافتراضي جملة واحدة: وزن العناوين 500 ووزن المتن 400. ويضبط الإعداد الجاهز أوزانه (heading-1 في m3-like بالوزن 400 كما في Material).

اختر المستوى الذي يحتله النص، لا الحجم الذي تريده. العنصر h2 الذي يجب أن يبدو صغيرًا يبقى heading-2؛ والمنتج الذي يريد عناوين أقسام أصغر يعطي heading-2 قيمة جديدة في طبقته، فيتبعه كل h2.

عناصر HTML و Markdown ← الأدوار

العنصر	الدور
`h1` … `h6`	`heading-1` … `heading-6`
`p` و `li` و `td`	`body` (و `body-large` في النص المتصل بحجم القراءة)
فقرة تمهيدية	`body-large`
`small`	`body-small`
`code` و `pre`	`code`
`strong` و `b`	الدور الذي يقع فيه، بوزن التوكيد
`button` و `input` و `label`	`label`
عنوان علوي فوق عنوان	`eyebrow`

على الويب تعطي الورقة @tanrei/web/text.css كل دور صنفًا مساعدًا، .tanrei-text-<role>، يضبط حقول الدور الخمسة كلها؛ ووضع .tanrei-text-emphasized على العنصر نفسه أو على عنصر داخله ينقله إلى وزن التوكيد. يقرأ الصنف الخصائص المخصصة للنظام الفعّال، فيتبع data-tanrei-system والأقراص والدور الذي أُعطي قيمة جديدة.

<h2 class="tanrei-text-heading-2">قسم</h2>
<p class="tanrei-text-body">نص متصل فيه <strong class="tanrei-text-emphasized">توكيد</strong>.</p>

النص المتصل (prose): نص لم تنسّقه أنت

مقالة مساعدة، ملاحظات إصدار، شروط استخدام، رسالة مكتوبة بصيغة Markdown، صفحة من نظام إدارة محتوى: المنتج لا يضع ذلك النص قطعة قطعة، ومع ذلك يجب أن يُقرأ نصًّا واحدًا مع بقية الواجهة. النص المتصل (prose) هو الجزء المخصص لذلك في النظام: الجدول السابق مطبَّقًا على ما ينتجه أي محوِّل، بإيقاع رأسي واحد وحدّ لطول السطر. هو ينسّق ويباعد؛ ولا يحلّل. لا يوفّر Tanrei محلِّل Markdown على أي منصة.

على الويب هو صنف من @tanrei/web/prose.css. وهذه الصفحة مرسومة به.

<article class="tanrei-prose">…h1, p, ul, blockquote, hr…</article>
<article class="tanrei-prose" data-size="large">…</article>

حجمان. الحجم medium يضبط النص المتصل بالدور body، للنص بين عناصر التحكم: لوحة، أو مربع حوار، أو بطاقة. والحجم large يضبطه بالدور body-large، لصفحة غايتها النص. والعناوين واحدة في الحجمين.
مسافة واحدة بين كل جارين. بين الكتل فجوة واحدة؛ وللعنوان قبله مسافة أكبر مما بعده، فينتمي إلى ما يليه؛ والعنوان الواقع مباشرة تحت عنوان يأخذ مسافة العنوان الأعلى. لا تتراكم المسافات أبدًا، وليس للكتلة الأولى ولا الأخيرة مسافة.
طول سطر محدود. عرض كتل النص 36 em من النص المتصل على الأكثر، أي نحو 72 إلى 80 حرفًا لاتينيًّا، أو 36 حرفًا يابانيًّا. والجدول أو كتلة الشيفرة أو الشكل أو أي مكوّن موضوع في مجرى النص يأخذ العرض الكامل. و data-measure="false" يرفع الحدّ حيث تكون الحاوية ضيقة أصلًا.
بلا لون نص. يأخذ النص المتصل لون المحتوى للسطح الذي يقع عليه، فيُقرأ النص نفسه في صفحة وفي بطاقة وفي تنبيه.
المكوّنات تبقى على حالها. ما بداخل عنصر من Tanrei، أو بداخل جزء معلَّم بـ tanrei-not-prose، لا ينسّقه النص المتصل؛ بل يباعده فقط.
الروابط تحتها خط في وضع السكون، حتى لا يكون اللون وحده أبدًا ما يميّز الرابط من النص المجاور له.
اللغات. تنكسر الأسطر اليابانية والصينية بقواعدها الخاصة؛ والتوكيد في الصينية واليابانية والكورية قائم غير مائل بوزن التوكيد، لأن هذه الكتابات لا مائل فيها؛ وتُكتب عناوينها، وعنوان كل مكوّن، بلا التباعد السالب الذي لعناوين الحرف اللاتيني (ويبقى التباعد الموجب)، والكتابة التي تصل حروفها أو تضع علامات فوقها لا تأخذ تباعدًا أصلًا. ويُصفّ النص الجاري الياباني أرحب قليلًا، بارتفاع سطر 1.85، فيقترب الفراغ بين سطرين من حرف واحد، كما توصي متطلبات تخطيط النص الياباني (JLREQ) لأسطر بطول المقياس. والاتجاه اتجاه المكان: التخطيط من اليمين إلى اليسار يضع إزاحات القوائم وخط الاقتباس وحافة النص في اليمين.

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

<div class="tanrei-prose-heading">
  <h2 id="install">التثبيت</h2>
  <a class="tanrei-prose-anchor" href="#install" aria-label="رابط إلى: التثبيت">…</a>
</div>

كل قيمة رمز (token) من comp.prose.*، فتستطيع الطبقة إعادة توجيه الإيقاع دون أن تمسّ هامشًا. والسلوك مدوَّن في specs/prose.spec.json؛ ينفّذه الويب أولًا، وتتبعه المنصات الأخرى.

التوكيد وزن لا دور

لتوكيد نص دون تغيير مستواه (علامة التبويب المحددة، أو رقم مهم، أو strong داخل فقرة) ترسم المنصة الدور بوزنه مضافًا إليه درجة خاصة بفئته. والدرجات الأربع رموز:

نظام التصميم	`emphasis.display`	`emphasis.heading`	`emphasis.body`	`emphasis.label`
`tanrei`	100	100	100	100
`cupertino`	100	200	200	200
`m3-expressive-like`	100	100	100	200
`m3-like`	100	100	100	200

مولَّد من tokens/systems/*.system.json, design/tokens/<system>/tanrei.light.tokens.json

يضيف Tanrei 100 إلى كل فئة، فيكون heading-1 المؤكَّد 600 و body المؤكَّد 500. ونظام التصميم الذي يؤكِّد بطريقة مختلفة لكل فئة يضبط الأرقام الأربعة: m3-like يضيف 200 إلى التسميات، كما تفعل أنماط التسميات المؤكَّدة في Material؛ و cupertino يضيف 200 إلى العناوين والمتن والتسميات. فئة الدور هي المقطع الأول من اسمه؛ وتأخذ caption و code و code-small و eyebrow درجة التسميات.

تتيح كل منصة المعدِّل نفسه: emphasized في واجهة أنماط النص (.tanreiTextStyle(system.typescale.heading1, emphasized: true) في SwiftUI، و typescale.heading1.emphasized() في Compose، وخارج التركيب emphasized(system.typescale.emphasis)، و theme.textStyle(system.typescale.heading1, emphasized: true) في Flutter، و text('heading1', { emphasized: true }) من useTanrei() في React Native، و --tanrei-sys-typescale-<role>-font-weight-emphasized و .tanrei-text-emphasized على الويب). لا توجد أدوار مؤكَّدة تحتاج إلى أسماء، ولا سلّم ثانٍ يحتاج إلى مواكبة.

الخطوط

العائلات الافتراضية هي Inter للنص اللاتيني، و Noto Sans JP لليابانية، و Roboto Mono للشيفرة، وكلها مرخّصة ترخيصًا مفتوحًا (SIL OFL 1.1 و Apache-2.0). تتابع السلسلة بخط Noto Sans للكتابات الأخرى ثم بخط واجهة النظام، فيتراجع النص تراجعًا سليمًا حيث لا تكون الخطوط محمَّلة. والمنتج الذي يصدر بكتابات أخرى يضيف عائلة Noto لكل منها (Noto Sans KR و SC و TC و Arabic و Devanagari و Thai) إلى السلسلة في طبقته؛ وللصينية واليابانية والكورية اضبط lang في الصفحة كذلك، لأن الثلاث تشترك في نقاط الترميز، وترتيب الخطوط هو الذي يحدد أشكال المحارف التي تظهر. لا يضمّ Tanrei ملفات خطوط؛ المنتج هو الذي يوفّرها.

ref.typeface.brand: Display and headline text. Inter for Latin, Noto Sans JP for Japanese, Noto Sans for other scripts; a product adds the Noto family of each further script it ships (Noto Sans KR, SC, TC, Arabic, Devanagari, Thai…).
ref.typeface.plain: Running text and labels. Inter for Latin, Noto Sans JP for Japanese, Noto Sans for other scripts.
ref.typeface.mono: Code. Roboto Mono, with Noto Sans JP for Japanese inside code.

مولَّد من tokens/ref/typeface.tokens.json

الخطوط لكل نظام تصميم

الخطوط تنتمي إلى نظام التصميم. الأدوار مبنية على ثلاث سلاسل: ref.typeface.brand للدور display والأدوار heading-1 إلى heading-3، و plain للعناوين الأصغر والنص المتصل والتسميات والعنوان العلوي، و mono للشيفرة. وتغيّر الطبقة الخط في كل مكان بإعطاء سلسلة قيمة جديدة. ما تُحَلّ إليه الأنظمة المضمَّنة:

نظام التصميم	`brand`	`plain`	`mono`
`tanrei`	Inter, Noto Sans JP, Noto Sans, system-ui, sans-serif	Inter, Noto Sans JP, Noto Sans, system-ui, sans-serif	Roboto Mono, Noto Sans JP, ui-monospace, monospace
`cupertino`	-apple-system, BlinkMacSystemFont, system-ui, Inter, sans-serif	-apple-system, BlinkMacSystemFont, system-ui, Inter, sans-serif	ui-monospace, SF Mono, Menlo, monospace
`m3-expressive-like`	Roboto, system-ui, sans-serif	Roboto, system-ui, sans-serif	Roboto Mono, ui-monospace, monospace
`m3-like`	Roboto, system-ui, sans-serif	Roboto, system-ui, sans-serif	Roboto Mono, ui-monospace, monospace

مولَّد من tokens/systems/*.system.json, design/tokens/<system>/tanrei.light.tokens.json

هكذا يكتب m3-like نصه بخط Roboto:

"tokens": {
  "tanrei.ref.typeface.brand": { "$value": ["Roboto", "system-ui", "sans-serif"], "reason": "Material Design 3's default typeface; Roboto is OFL-licensed." },
  "tanrei.ref.typeface.plain": { "$value": ["Roboto", "system-ui", "sans-serif"], "reason": "Material Design 3's default typeface; Roboto is OFL-licensed." },
  "tanrei.ref.typeface.mono":  { "$value": ["Roboto Mono", "ui-monospace", "monospace"], "reason": "The monospace companion of Roboto (OFL)." }
}

المكوّنات لا تُمسّ: هي ترتبط بالأدوار، والأدوار تحيل إلى السلاسل.

كيف تُقرأ السلسلة

تُكتب السلسلة كما يكتبها CSS، لأنها الصيغة التي تفهمها كل أدوات التصميم. والويب وحده يستطيع استخدامها كما كُتبت، ولذلك يقرأ البناء كل سلسلة مرة واحدة ويسلّم كل منصة المعلومات الأربع نفسها:

الحقل	المعنى
`stack`	القائمة كما كُتبت
`families`	العائلات المسمّاة بالترتيب، وهي التي يستطيع المنتج تثبيتها أو تسجيلها
`generic`	صنف الخط الذي يُرجَع إليه: `sans-serif` أو `serif` أو `monospace`
`system`	`true` حين تطلب السلسلة خط المنصة نفسها قبل أي عائلة مسمّاة

سلسلة brand الافتراضية، Inter, Noto Sans JP, Noto Sans, system-ui, sans-serif، تُقرأ هكذا: العائلات Inter و Noto Sans JP و Noto Sans، والصنف العام sans-serif، و system بالقيمة false؛ فالكلمة system-ui تأتي بعد العائلات المسمّاة، فهي البديل الاحتياطي فقط. وسلسلة cupertino تبدأ بـ -apple-system، فتُقرأ system بالقيمة true مع Inter عائلةً مسمّاة وحيدة: خط المنصة أولًا، و Inter حيث لا تعرف المنصة هذا المفهوم.

تستخدم المنصة العائلات المسمّاة بالترتيب، ثم خطها الخاص من الصنف generic؛ وحين يكون system بالقيمة true يأتي خطها الخاص أولًا. ولا تفسّر المنصات system-ui ولا ui-monospace ولا الكلمات المفتاحية العامة بنفسها.

إشارة بالاسم دون تضمين

لا يوفّر Tanrei ملفات خطوط لأي نظام تصميم. السلسلة قائمة أسماء، والمنتج يوفّر الخطوط التي وراء الأسماء التي يريدها. العائلة الغائبة تُتخطّى، فيظل النص يُرسم بالعائلة التالية أو بخط المنصة، مع بقاء حجم الدور ووزنه وارتفاع سطره وتباعد أحرفه بلا تغيير.

المنصة	كيف يوفّر المنتج عائلة مسمّاة
Web	حمِّلها تحت اسم العائلة ذاك بالضبط: `@font-face` خاص بك، أو Google Fonts، أو حزمة خطوط.
SwiftUI	أضف ملفات الخطوط إلى التطبيق وسجِّلها (`UIAppFonts` أو `ATSApplicationFontsPath`، أو `CTFontManagerRegisterFontsForURL`).
Jetpack Compose	ضع الخطوط في موارد الخطوط في التطبيق وقابل الأسماء بها عبر `TanreiFontFamilies` الممرَّر إلى `TanreiTheme`.
Flutter	أعلن ملفات الخطوط في `pubspec.yaml` الخاص بالتطبيق تحت أسماء العائلات نفسها.
React Native	اربط ملفات الخطوط (`npx react-native-asset`، أو `expo-font`). ليس في React Native قائمة بدائل، وهو يختار ملفًّا لكل وزن، فمرِّر `resolveFont` إلى `TanreiProvider` حين تكون خطوطك مسجَّلة باسم لكل وزن.

التفاصيل في أدلة البدء وفي ملف README الخاص بكل حزمة. راجع ترخيص الخط قبل أن تصدر به: الخطوط الافتراضية مرخّصة ترخيصًا مفتوحًا، والنظام cupertino يشير إلى خطوط Apple بكلمة مفتاحية أو بالاسم فقط، لأنه لا يجوز تضمينها ولا استخدامها على منصات أخرى؛ وفي غير منصاتها يرجع إلى خط مرخّص ترخيصًا مفتوحًا.

كيف تعطي الإعدادات الجاهزة السلّم قيمًا جديدة وتوسّعه

الإعداد الجاهز الذي يحاكي نظام تصميم آخر يحتفظ بالأسماء الستة عشر ويعطيها قيم ذلك النظام؛ وحيث يكون في مصدره نمط لا يسمّيه الأساس يوسّع المفردات بدور خاص به. الأسماء لا تتحرك أبدًا، فالمنتج المبني على tanrei ينتقل إلى m3-like دون أن يمسّ عنوانًا.

النظام m3-like يعطي كل دور قيمة جديدة من السلّم الطباعي في Material Design 3 (يأخذ heading-1 النمط «headline large» من Material، و body النمط «body medium»، و label النمط «label large»)، ويضيف display-large بحجم 57px و display-small بحجم 36px، لأن في Material ثلاثة أحجام عرض والمنتج الواحد يحتاج إلى واحد. ودرجات التوكيد فيه هي درجات Material: 100 للعرض والعناوين والمتن، و 200 للتسميات. تقيس أداة المطابقة كل نمط نص ينشره Material، وهي ثلاثون بما فيها المؤكَّدة، مع أدوار الألوان والمكوّن Button: من 288 رمزًا مقيسًا، 273 مساوية، و 14 مغطاة برمز آخر، و 1 بلا مقابل تحت فجوة محاكاة مسجَّلة، ولا واحد مختلف. ويُعرض ذلك بالصيغة 273 / 274 في صفحة أنظمة التصميم التي تستثني المغطاة من العدّ. الأرقام مقروءة من tokens/generated/m3-like/fidelity.json، وهو ملف يعيد البناء كتابته.
النظام cupertino يعطي كل دور قيمة جديدة من أنماط النص الأحد عشر في iOS لدى Apple، من Large Title نزولًا إلى Caption 2، ويضيف الثلاثة التي لا يسمّيها الأساس: body-callout و body-subhead و caption-small. ودرجات التوكيد فيه 100 للعرض و 200 لما سواه، وهي المسافة بين أنماط Apple العادية والمؤكَّدة.

الدور الذي يضيفه إعداد جاهز رمز عادي على كل منصة: display-large في m3-like هو --tanrei-sys-typescale-display-large-font على الويب، وعضو في السلّم الطباعي في كل حزمة أصلية. وترسمه معاينة Theme Studio في سلّم الخطوط بجوار الستة عشر.

الطابع

العرض والعناوين متراصّة. تُكتب الأحجام الكبيرة بتباعد أحرف سالب (−0.04em في display، و −0.03em في heading-1، ثم يخفّ إلى −0.01em عند heading-5)، وهذا يُبقي العناوين الكبيرة هادئة؛ ويبقى display بالوزن 450 خفيفًا.
الأحجام الصغيرة تنفرج. تحمل body-small و label-small و caption و eyebrow تباعدًا موجبًا طفيفًا ليبقى النص بحجم 11px إلى 13px مقروءًا.
الأوزان أرقام. لأن Inter خط متغير، فأوزان مثل 450 صالحة وتُحفظ على كل منصة تدعم المحاور المتغيرة. ودرجات التوكيد أرقام للسبب نفسه: 450 + 100 وزن حقيقي.
الخط الثابت العرض للشيفرة. يستخدم code و code-small الخط Roboto Mono. أما eyebrow فيُكتب بالخط العادي (plain): صغيرًا، واسع التباعد، ويحوّله المكوّن إلى أحرف كبيرة، لا الرمز أبدًا.

اللغات

اختيرت ارتفاعات الأسطر بحيث لا يُقتطع النص المختلط من اللاتينية وكتابات CJK، وترث اليابانية الأدوار نفسها. التباعد السالب وسيلة تخص الحرف اللاتيني: فحيثما كانت قيمة lang للنص صينية أو يابانية أو كورية — في prose وفي أصناف النص وفي عنوان كل مكوّن — يكتب Tanrei العنوان من دونه. عيِّن lang ولا يحتاج العنوان شيئًا آخر.

التكبير والتصغير

يُعبَّر عن أحجام النص بوحدات نسبية على الويب (rem)، وتتغير مع إعداد حجم النص لدى المستخدم على كل منصة. يجب أن تتحمّل التخطيطات نصًّا عند 200%: تكبر الحاويات، وتلتفّ التسميات على أسطر قبل أن تُقتطع. كل حجم معامل على dial.type.base مع dial.type.contrast أُسًّا، فقرص واحد يحرّك السلّم كله والآخر يباعد العناوين عن المتن.

شاهد كل دور مع عيّنات حيّة في مرجع السلّم الطباعي.

الشيفرة المصدرية والمشكلات على GitHub