| الخاصية أو القيمة | طريقة العمل والتأثير البرمجي | الفائدة وملاحظة التصميم الذكي |
|---|---|---|
| text-align | تحدد اتجاه ومكان تموضع النصوص أفقياً داخل حدود العنصر المحيط بها | تستخدم لترتيب العناوين في المنتصف أو تنسيق الفقرات لليمين واليسار حسب الحاجة |
| left أو right | تجبر النص على الاتجاه لليسار أو اليمين بشكل مطلق بغض النظر عن لغة الموقع | تفيد لتنسيق أرقام الهواتف أو اللغات الثابتة |
| center | يضع النصوص في المنتصف تماماً مع ترك مسافات متساوية من الجانبين | الخيار المثالي لعناوين المقالات الرئيسية والفرعية لجذب انتباه القارئ |
| justify | يمدد أسطر النص لتتساوى من الحافتين اليمنى واليسرى معاً بالتساوي | يعطي مظهراً احترافياً ومنظماً للفقرات الطويلة يشبه تصميم الصحف والمجلات |
| start أو end | تحاذي النص تلقائياً بناءً على اتجاه لغة الكتابة الأصلية سواء كانت من اليمين أو اليسار | الخيار الأفضل والحديث للمشاريع متعددة اللغات لضمان عدم خربشة التصميم عند التحويل بين العربية والإنجليزية |
| text-align-last | تتحكم في اتجاه السطر الأخير فقط من الفقرة التي تم تطبيق خاصية التبرير justify عليها | تمنع تشتت السطر الأخير وتتيح توسيطه أو جعله يبدأ من اليمين بشكل متناسق مع بقية النص |
| text-justify | تحدد للمتصفح الطريقة البرمجية لتوزيع المساحات الفارغة بين الكلمات أو الأحرف للوصول للتبرير الكامل | تمنحك تحكماً في جعل التباعد بين الكلمات inter-word أو بين الأحرف نفسها inter-character بدقة |
| direction | تحدد اتجاه تدفق عناصر وكتابة الموقع من اليمين لليسار rtl أو العكس ltr | خاصية جوهرية للمواقع العربية لضمان ظهور النقاط وعلامات الترقيم والقوائم في أماكنها الصحيحة تماماً ونوفيل |
**text-align** يحدد محاذاة النص الأفقية داخل العنصر: - `left` / `right` — محاذاة يسار أو يمين - `center` — توسيط - `justify` — محاذاة من الجانبين (مثل الصحف) - `start` / `end` — يراعي اتجاه الكتابة (RTL/LTR) — الأفضل للمشاريع متعددة اللغات
**text-align-last** يحدد محاذاة آخر سطر في النص المُبرَّر (justify) فقط.
**text-justify** يتحكم في طريقة توزيع الكلمات عند التبرير: - `auto` — يترك للمتصفح - `inter-word` — يزيد المسافات بين الكلمات - `inter-character` — يزيد المسافات بين الأحرف
**direction** — مع النصوص العربية تأكد من `direction: rtl` على `<html lang="ar">`.
| 1 | /* محاذاة أساسية */ |
| 2 | .article { text-align: justify; } |
| 3 | .title { text-align: center; } |
| 4 | |
| 5 | /* اتجاه يراعي RTL/LTR */ |
| 6 | .nav-link { text-align: start; } |
| 7 | |
| 8 | /* آخر سطر في التبرير */ |
| 9 | .justified { text-align: justify; text-align-last: center; } |
مثال 1: تنسيق مقالة عربية
| 1 | html[lang="ar"] { |
| 2 | direction: rtl; |
| 3 | } |
| 4 | |
| 5 | .article-body { |
| 6 | text-align: justify; |
| 7 | text-align-last: start; |
| 8 | text-justify: inter-word; |
| 9 | line-height: 1.9; |
| 10 | } |
| 11 | |
| 12 | .article-title { |
| 13 | text-align: center; |
| 14 | font-size: 2rem; |
| 15 | font-weight: 700; |
| 16 | } |