شرح محاذاة النصوص في CSS — كيف تضبط text-align و direction للمحتوى العربي؟

محاذاة النصوص في CSS ليست شكلاً فقط، بل تؤثر مباشرة على القراءة وتجربة المستخدم. في المواقع العربية تحديداً، فهم text-align وdirection ضروري جداً.

إذا كنت تبحث عن شرح text-align في CSS أو كيفية ضبط اتجاه النص العربي RTL أو الفرق بين direction و text-align، فهذا الدرس يوضحها عملياً.

ما هي محاذاة النص في CSS؟

خاصية text-align تحدد موضع النص أفقياً داخل العنصر. أشهر القيم:

• left: محاذاة لليسار.
• right: محاذاة لليمين.
• center: توسيط النص.
• justify: ضبط النص من الجانبين.

التعريف البسيط: text-align في CSS تتحكم في مكان ظهور النص داخل العنصر أفقياً.

كيفية استخدام text-align في CSS

.left-text {
    text-align: left;
}

.center-text {
    text-align: center;
}

.right-text {
    text-align: right;
}

ماذا يفعل هذا الكود؟ يعطي كل فقرة محاذاة مختلفة حسب الـ class.

سطر بسطر:

• left: النص يبدأ من اليسار.
• center: النص في المنتصف.
• right: النص يبدأ من اليمين.

النتيجة المتوقعة: تغيير واضح في موضع النص دون تغيير المحتوى.

خطأ شائع: استخدام text-align لتوسيط صندوق div نفسه بدل النص داخله.

اتجاه النص في CSS باستخدام direction

خاصية direction تحدد اتجاه الكتابة الأساسي:

• rtl: من اليمين إلى اليسار (للعربية).
• ltr: من اليسار إلى اليمين (للإنجليزية).

body {
    direction: rtl;
}

ماذا يفعل هذا الكود؟ يجعل اتجاه الصفحة بالكامل مناسباً للغة العربية.

النتيجة المتوقعة: تبدأ الأسطر والعناصر النصية من اليمين.

خطأ شائع: ضبط text-align: right فقط بدون direction: rtl في صفحات عربية كاملة.

استخدام justify في CSS للنصوص الطويلة

.article {
    text-align: justify;
    line-height: 1.9;
}

ماذا يفعل هذا الكود؟ يضبط الفقرة من الطرفين ويزيد تباعد السطور لتحسين القراءة.

النتيجة المتوقعة: شكل أقرب لصفحات الجرائد/المقالات الطويلة.

خطأ شائع: استخدام justify على أسطر قصيرة جداً فيظهر تباعد غريب بين الكلمات.

ما هي vertical-align في CSS؟

خاصية vertical-align لا تُستخدم لمحاذاة كل شيء عمودياً كما يعتقد البعض. هي مفيدة غالباً مع العناصر المضمنة مثل الصور داخل النص أو خلايا الجداول.

img.icon {
    vertical-align: middle;
}

ماذا يفعل هذا الكود؟ يوسّط الأيقونة عمودياً بالنسبة إلى خط النص.

خطأ شائع: توقع أن vertical-align ستوسّط عنصر block كامل.

الفرق بين text-align و direction في CSS

الأسئلة الشائعة — FAQ (أسئلة بحثية شائعة)

كيف أوسّط النص في CSS؟

استخدم text-align: center; على العنصر الذي يحتوي النص.

كيف أجعل الموقع يدعم العربية في CSS؟

استخدم direction: rtl; غالباً على body في المواقع العربية.

ما الفرق بين text-align: right و direction: rtl؟

text-align يحدد موضع النص، بينما direction يحدد اتجاه تدفق الكتابة نفسه.

متى أستخدم justify في CSS؟

في الفقرات الطويلة والمقالات، مع line-height مناسب لتحسين القراءة.

لماذا vertical-align لا تعمل معي في CSS؟

غالباً لأنك تطبقها على عنصر block. هذه الخاصية تعمل أساساً مع inline/inline-block أو table-cell.