الخطوط والكتابة
خطين بدور واضح: Tajawal 800 للعناوين والأرقام الكبيرة (تقيل ومباشر زي الملصق)، وReadex Pro للنص والواجهة (مصمم للقراءة السهلة، واللاتيني فيه من Lexend، وشكل العربي فيه إنساني ومفتوح، وده مهم لعاملات بيقروا بصعوبة ولأم بتقرا بسرعة في الشمس). التباين بين الاتنين هو اللي بيعمل الهرمية: عنوان تقيل وجسم هادي.
العائلة
| الدور | الخط | ملاحظات |
|---|---|---|
| العناوين والأرقام الكبيرة | Tajawal 700 و800 | خط عربي تقيل لعناوين الصفحات والأقسام (h1 إلى h3)، أسماء المربيات في البطاقات، الأسعار، قيم المؤشرات والـ stat tiles. مستضاف محلياً في assets/fonts/ (ملفين TTF). بيتفعل بالمتغير --font-display مع Readex Pro كاحتياطي. |
| النص والواجهة | Readex Pro | متغيّر (variable) من وزن 160 لـ 700، عربي ولاتيني. مستضاف محلياً في assets/fonts/ بثلاث ملفات woff2 مقسّمة بـ unicode-range، فالمتصفح ما بيحملش غير اللي يحتاجه. نستخدم 400 و500 و600 و700 بس لنص الواجهة. |
| الأمهرية والتغرينيا | Noto Sans Ethiopic | لتطبيق العاملة. بيتفعل تلقائي لما الحروف إثيوبية (unicode-range) أو بـ lang="am" و lang="ti". |
| الكود والأرقام التعريفية | Code Arabic + monospace النظام | اسم بديل (alias) بيحمل الحروف العربية من Readex Pro فقط، واللاتيني بيفضل monospace. من غيره العربي جوه مقاطع الكود بيظهر بحروف متباعدة. |
| احتياطي | Noto Sans Arabic, system-ui, Tahoma | لو الخط ما اتحملش (font-display: swap بيمنع الصفحة الفاضية). |
font-style: italic في أي نص عربي. للتأكيد استخدم الوزن 600.العناوين والأرقام الكبيرة
الرقم المهم بيتكتب كبير وتقيل (Tajawal 800) وجنبه كلمة صغيرة بخط Readex. الشاشة بتتقرا من الرقم الأول: المرتب، عدد السنين، التقييم، يوم الدفع. والتأكيد جوه العنوان بيجي بـ highlighter (.mark) مايل شوية، مش بلون نص ولا خط مائل.
اعرف مين جوه بيتك
عنوان بتأكيد highlighter: الكلمة اللي تهم بس.
- الأرقام الكبيرة
font-variant-numeric: lining-nums، غربية 0-9، والعملة بخط Readex صغير جنبها. - Tajawal ما بتتستخدمش في فقرة ولا في label ولا في جدول: العناوين والأرقام والأسماء بس.
- الـ sticker (
.sticker) وكلمات الشارات الكبيرة بتاخد خط العناوين.
السلم
العناوين (h1 إلى h3) بخط Tajawal، وباقي السلم بخط Readex Pro. سلم ثابت بالـ rem (1rem = 16px)، نسبة بين الدرجات حوالي 1.125 لـ 1.2. للمنتج مش بنستخدم أحجام fluid لأن الشاشة والمسافة بتتغير قليلاً، وعنوان بيصغر في sidebar شكله أسوأ. الاستثناء الوحيد: بطل (hero) الموقع التسويقي بيستخدم clamp().
اعرف مين جوه بيتك قبل ما تبدأ
قواعد الكتابة بالعربي
| القاعدة | التفاصيل |
|---|---|
| ما نباعدش الحروف | letter-spacing: 0 دايماً على العربي. التباعد بيقطع اتصال الحروف. لاتيني العناوين الكبيرة بس بياخد -0.005em (--ls-heading)، ومش أقل من -0.04em في أي حالة. |
| ارتفاع السطر | 1.6 للنص (--lh-base)، 1.75 للقراءة الطويلة (--lh-loose)، 1.3 للعناوين. التشكيل وحروف زي "ق" و"ج" محتاجة مساحة رأسية. |
| مفيش مائل ولا عريض مزيّف | للتأكيد: وزن 600 أو لون النص الأساسي. العربي مفيش له italic حقيقي. |
| مفيش مفهوم "أحرف كبيرة" | العربي ماله uppercase. ما تكتبش text-transform: uppercase على نص عربي، ومفيش "overline" بحروف كبيرة وتباعد. |
| الأحجام الدنيا | تطبيق الأسرة: 16px للنص. الداشبورد: 14px (13px للـ labels والشارات بس). تطبيق العاملة: 18px للنص. أي حاجة أصغر من 12px ممنوعة. |
| التشكيل | بنكتب من غير تشكيل إلا لو التباس في المعنى. ما بنحطش شدّة على عنوان كبير عشان الشكل (مثلاً "المكوّنات" فقط لأن "المكونات" ممكن تتقرا غلط). |
| الاتجاه | كل نص عربي dir="rtl" بالمحاذاة start. الأرقام والكود واللاتيني جوه النص بتتعزل بـ <bdi> أو .ltr (شوف قسم النص المختلط). |
الأرقام
القرار: أرقام غربية (0 إلى 9) افتراضياً في كل المنتج. ده اللي المصريين متعودين عليه في الموبايل والمبالغ والتواريخ، وبيتطابق مع الأرقام اللي بتتكتب في الرقم القومي ورقم الموبايل. الأرقام الهندية (٠ إلى ٩) إعداد اختياري في الحساب، مش افتراضي (Intl.NumberFormat("ar-EG") لو المستخدم اختارها).
- الأعمدة والجداول والمبالغ:
font-variant-numeric: tabular-nums lining-nums(.numو.money) عشان الأرقام تتراص. - الأرقام الكبيرة منفردة (مؤشرات KPI، الأسعار، stat tiles): Tajawal 800 بأرقام lining، مش tabular.
- أرقام الموبايل والعقد والبطاقة:
.ltrأو<bdi>عشان ما تتقلبش جوه جملة عربية. - المبلغ: الرقم ثم العملة بمسافة غير منقسمة:
9,000 جنيه. فاصلة الآلاف دايماً.
| البند | المبلغ |
|---|---|
| المرتب الأساسي | 9,000 |
| بدل مواصلات | 800 |
| خصم سلفة | 1,111 |
| الصافي | 8,689 |
رقم الموبايل: +20 101 234 5678 · رقم العقد: AM-2026-00418
النص المختلط (عربي + لاتيني + أرقام)
محرك الاتجاهات بيحاول يخمّن، ولما الجملة بتبدأ أو بتنتهي برقم أو علامة ترقيم بيغلط. الحل: اعزل أي مقطع لاتيني أو رقمي بـ <bdi> (أو .ltr لو عايزه inline-block).
.mono ومعزولة.dir="auto" على العنصر.الأسطر وعرض القراءة
- عرض سطر القراءة الطويلة 65 لـ 75 حرف (
--measure: 68ch). الجداول والبيانات الكثيفة تقدر تعدّي كده. text-wrap: balanceعلى كل العناوين (h1 إلى h6) عشان الأسطر تتوازن بدل ما تسيب كلمة وحيدة في سطر.text-wrap: prettyعلى الفقرات والعناصر لتقليل الأسطر اليتيمة.
بنوضّحلك مين اتراجع وإمتى قبل أي عقد
بنوضّحلك مين اتراجع وإمتى قبل أي عقد
بنود العقد بتتكتب بجمل قصيرة. كل بند ليه عنوان واضح، والأرقام المهمة (المرتب، الساعات، يوم الراحة) متظللة عشان الطرفين يشوفوها من غير ما يدوّروا في الفقرة. العاملة تقدر تسمع نفس البند بصوت بلغتها.
الأمهرية والتغرينيا (Noto Sans Ethiopic)
تطبيق العاملة بيدعم الأمهرية والتغرينيا بخط Noto Sans Ethiopic (أوزان 300 إلى 700). الحروف دي مش بتتطلب RTL (بتتكتب من الشمال لليمين)، فعنصر النص بياخد dir="ltr" و lang="am" جوه واجهة عربية RTL، والـ layout نفسه بيفضل RTL (بدل ما نقلب التطبيق كله). الحد الأدنى للحجم 16px لأن الحروف الإثيوبية معقدة وصغيرها بيتقرا بصعوبة.
ملحوظة للترجمة: النصوص دي أمثلة للشكل الطباعي فقط، لازم مترجم أمهري وتغرينيا متخصص يراجع أي نص قبل الإطلاق (خصوصاً البنود القانونية).
حجم الخط حسب السطح
نفس السلم والمكوّنات، بس كل سطح بيضبط الأحجام الأساسية بـ data-surface أو data-density على جذر الشاشة. تطبيق العاملة بيكبّر النص خطوة كاملة وأهداف اللمس 56px.
| السطح | الخاصية | نص أساسي | نص ثانوي | ارتفاع التحكم |
|---|---|---|---|---|
| داشبورد (المكتب والإدارة) | data-density="compact" | 14px | 13px | 36px |
| ويب وتطبيق الأسرة | data-surface="app" | 16px | 14px | 48px |
| تطبيق العاملة | data-surface="worker" | 18px | 16px | 56px |