قم بمحاذاة الأشياء باستخدام خاصية محاذاة نص CSS

واحدة من الميزات الأولى التي تعلمها جميع المطورين عند التعامل مع معالجة الكلمات كانت محاذاة النص. كانت هذه الأداة الصغيرة حيوية لمنضدي التنضيد المحترفين ومصممي النشرات الهواة على حدٍ سواء. ليس من المستغرب أن تدعم CSS محاذاة النص عندما يتعلق الأمر بتصميم الويب.

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

أساسيات خاصية محاذاة النص في CSS

المحاذاة هي واحدة من أكثر مصطلحات الطباعة شيوعًا. في سياق CSS ، محاذاة النص يشير إلى المحاذاة الأفقية.

لا تنطبق محاذاة النص الأفقي إلا على حاويات الكتل. هذه عناصر كاملة العرض مثل الفقرات و divs. باستخدام محاذاة النص خاصية في عنصر مضمن مثل في لن يكون لها أي تأثير. يمكنك أيضًا محاذاة عناصر القائمة وخلايا الجدول:

مؤشر الكتابة على facebook لا يعمل

بشكل افتراضي ، في لغة من اليسار إلى اليمين (المزيد من هذا لاحقًا) ، تتم محاذاة النص إلى اليسار:

في CSS ، هذا هو نفسه:

p { text-align: left; }

أو:

p { text-align: start; }

متعلق ب: ما هي أوراق الأنماط المتتالية وما هي CSS المستخدمة؟

يمكنك استخدام قيم أخرى لملف محاذاة النص خاصية لتغيير المحاذاة الأفقية. القيم الأكثر شيوعًا مألوفة من تطبيقات معالجة الكلمات:

text-align: left  
text-align: center  
text-align: right

استخدم الضبط لمحاذاة الحواف اليمنى واليسرى

قيمة أخرى مشتركة ل محاذاة النص يكون يبرر . تضيف المستعرضات مساحة للنص المضبوط بحيث يمتد كل سطر لملء المساحة المتاحة:

عندما تبرر النص ، يمكن أن يكون السطر الأخير معقدًا. نظرًا لأنها قد تكون قصيرة جدًا (ربما مجرد كلمة واحدة) ، فإن تباعدها عبر العرض بالكامل قد يكون قبيحًا. بشكل افتراضي ، حتى النص المضبوط سيؤدي إلى محاذاة السطر الأخير إلى اليسار.

لماذا لا يعمل مساعد جوجل الخاص بي

قد ترغب في بعض الأحيان في تأثير مختلف. تطبيقات المستعرض تلحق بالمواصفات ، ولكن هناك طريقتان ممكنتان.

ال تبرير كل شيء يجب أن تعني القيمة أن المتصفحات تتعامل مع السطر الأخير مثل كل السطور الأخرى ، وتمدده إلى العرض الكامل. ومع ذلك ، في وقت كتابة هذا التقرير ، لا يوجد متصفح يدعم هذه القيمة. تستطيع تحقق من caniuse لمعرفة ما إذا كانوا يفعلون ذلك عندما تقرأ هذا المقال.

خاصية CSS أخرى ، محاذاة النص الاخير ، أكثر مرونة ولديه دعم أفضل. يمكنك التعامل معها بشكل أو بآخر مثل محاذاة النص ، لكنها تنطبق فقط على السطر الأخير:

دعم المتصفح لهذه الخاصية أفضل ، لكنه ليس مثاليًا. مرة أخرى، تحقق من caniuse قبل استخدامه . إذا لم يتعرف المتصفح على هذه الخاصية ، فسيتجاهلها.

محاذاة النص واتجاه القراءة

ربما تعمل بلغة ، مثل العربية أو العبرية ، تُقرأ من اليمين إلى اليسار. يستخدم CSS ملف اتجاه خاصية لتحديد هذا ، على سبيل المثال:

direction: rtl;

عادةً ما تقوم هذه اللغات بمحاذاة النص إلى اليمين افتراضيًا.

بدلا من الاضطرار إلى التحديد اليسار / حق ، الطريقة المفضلة لمحاذاة النص تستخدم القيم بداية و نهاية . يحدد هذا ما إذا كان يجب أن يصطف النص في بداية كل سطر أم في نهايته. في اللغات التي تُكتب من اليسار إلى اليمين ، بداية يعادل اليسار . في لغة تكتب من اليمين إلى اليسار ، يبدأ النص من اليمين وينتهي من اليسار.

إعادة ضبط مصنع windows 10 من التمهيد

استخدام بداية أو نهاية يعني أنه بغض النظر عن اتجاه النص ، فإن المحاذاة متسقة.

كيف ترث العناصر خاصية محاذاة النص

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

استخدام خاصية محاذاة النص للتحكم في التخطيط

يمكنك استعمال ال محاذاة النص خاصية CSS لتحديد كيفية تخطيط المتصفحات للنص أفقيًا. القيم الأكثر شيوعًا هي اليسار و حق و المركز ، و يبرر . هذه بسيطة إلى حد ما ، على الرغم من ذلك يبرر يقدم بعض التعقيد.

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

ال محاذاة النص الخاصية هي واحدة من العديد من خصائص CSS التي توفر تنسيقًا مفيدًا وتحديد الموضع الأساسي.

يشارك يشارك سقسقة بريد الالكتروني 10 أمثلة بسيطة لرموز CSS يمكنك تعلمها في 10 دقائق

هل تحتاج إلى مساعدة في CSS؟ جرب أمثلة كود CSS الأساسية هذه لتبدأ ، ثم قم بتطبيقها على صفحات الويب الخاصة بك.

اقرأ التالي مواضيع ذات صلة

برمجة
تطوير الشبكة
تصميم المواقع
CSS

نبذة عن الكاتب بوبي جاك(تم نشر 58 مقالة)

بوبي متحمس للتكنولوجيا وعمل كمطور برمجيات لأكثر من عقدين من الزمن. إنه شغوف بالألعاب ، ويعمل كمحرر المراجعات في مجلة Switch Player ، ومنغمس في جميع جوانب النشر عبر الإنترنت وتطوير الويب.

المزيد من Bobby Jack

اشترك في نشرتنا الإخبارية

انضم إلى النشرة الإخبارية لدينا للحصول على نصائح تقنية ومراجعات وكتب إلكترونية مجانية وصفقات حصرية!

انقر هنا للاشتراك