محاذاة النصوص هي واحدة من أهم خصائص تنسيق الكتابة داخل صفحات الويب. باستخدام CSS، يمكنك تحديد مكان ظهور النص داخل العنصر بسهولة.
1. محاذاة النص أفقيًا
نستخدم الخاصية text-align للتحكم بمحاذاة النص.
- لمحاذاة النص إلى اليسار:
text-align: left;
(وهو الوضع الافتراضي للغات مثل الإنجليزية)
- لمحاذاة النص إلى اليمين:
text-align: right;
(مفيد للغات العربية)
- لمحاذاة النص إلى المنتصف:
text-align: center;
- لمحاذاة النص بحيث يتم توزيع الكلمات بالتساوي بين الأطراف:
text-align: justify;
(ممتاز للنصوص الطويلة ليبدو شكلها مرتب).
2. محاذاة النص عموديًا (داخل عنصر)
لمحاذاة النص رأسيًا داخل عنصر مثل خلية جدول، نستخدم الخاصية vertical-align، ولكن غالبًا مع العناصر التي تعرض بطريقة table-cell أو داخل الجداول.
مثال:
vertical-align: middle;
3. اتجاه النص (Text Direction)
لتحديد اتجاه النصوص (خصوصًا لدعم اللغات العربية والإنجليزية)، نستخدم الخاصية direction.
- من اليسار إلى اليمين (لغات مثل الإنجليزية):
direction: ltr;
- من اليمين إلى اليسار (لغات مثل العربية):
direction: rtl;
مثال عملي كامل
text-align: center;
direction: rtl;
font-family: 'Cairo', sans-serif;
font-size: 18px;
color: #444;
الواجب العملي
- صمّم فقرة نصية وقم بتجربة جميع أنواع محاذاة النص (
left,right,center,justify). - جرّب تحديد اتجاه النص للعربية (
rtl) والإنجليزية (ltr). - جرّب وضع نص طويل ومحاذاته باستخدام
justifyوشاهد الفرق.
