CSS

خاصية وضع الكتابة في CSS

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

التركيبة :

writing-mode: horizontal-tb | vertical-lr | vertical-rl;
Code language: HTTP (http)

القيم :

يتم تعريف قيم هذه الخاصية على النحو التالي.

horizontal-tb: هي القيمة الافتراضية لهذه الخاصية. عند استخدام هذه القيمة ، سيكون النص في الاتجاه الأفقي ويقرأ من اليسار إلى اليمين ومن أعلى إلى أسفل .
vertical-rl:  تعرض هذه القيمة النص في الاتجاه العمودي ، ويتم قراءة النص من أعلى إلى أسفل ومن اليمين إلى اليسار.
vertical-lr: تعمل هذه القيمة بشكل مشابه لـ vertical-rl ، ولكن يُقرأ النص من اليسار إلى اليمين.

مثال 1
في هذا المثال ، نستخدم جميع القيم الرئيسية لخاصية وضع الكتابة في CSS. هنا ، هناك ثلاثة عناصر فقرة تحتوي على بعض سطور النص. نحن نطبق وضع الكتابة:horizontal-tb ؛ إلى عنصر الفقرة الأول ، وضع الكتابة: vertical-lr ؛ إلى الفقرة الثانية ووضع الكتابة: vertical-rl ؛ إلى الفقرة الثالثة. في الإخراج ، يمكننا أن نرى أن محتوى الفقرة الثانية يتم وضعه عموديًا في الاتجاه من اليسار إلى اليمين ، كما أن محتوى الفقرة الثالثة يتم وضعه عموديًا ولكن في الاتجاه من اليمين إلى اليسار.

<!DOCTYPE html> <html> <head> <style> p { border: 2px solid black; width: 300px; height: 300px; font-size: 23px; } #tb { writing-mode: horizontal-tb; } #lr { writing-mode: vertical-lr; } #rl { writing-mode: vertical-rl; } </style> </head> <center> <body> <h1> Example of CSS writing-mode property </h1> <h2> writing-mode: horizontal-tb; </h2> <p id="tb"> Hi, Welcome to the swiftandsmart.com. This site is developed so that students may learn computer science related technologies easily. The swiftandsmart.com. is always providing an easy and in-depth tutorial on various technologies. No one is perfect in this world, and nothing is eternally best. But we can try to be better. </p> <h2> writing-mode: vertical-lr; </h2> <p id="lr"> Hi, Welcome to the swiftandsmart.com. This site is developed so that students may learn computer science related technologies easily. The swiftandsmart.com. is always providing an easy and in-depth tutorial on various technologies. No one is perfect in this world, and nothing is eternally best. But we can try to be better. </p> <h2> writing-mode: vertical-rl; </h2> <p id="rl"> Hi, Welcome to the <a href="https://www.swiftandsmart.com/" class="rank-math-link">swiftandsmart.com</a>. This site is developed so that students may learn computer science related technologies easily. The swiftandsmart.com. is always providing an easy and in-depth tutorial on various technologies. No one is perfect in this world, and nothing is eternally best. But we can try to be better. </p> </center> </body> </html>
Code language: HTML, XML (xml)

مثال 2 :
في هذا المثال ، نستخدم أيضًا خاصية letter-spacing مع خاصية وضع الكتابة.

<!DOCTYPE html> <html> <head> <style> h2 { border: 2px solid black; width: 300px; height: 150px; letter-spacing: 15px; } #tb { writing-mode: horizontal-tb; } #lr { writing-mode: vertical-lr; } #rl { writing-mode: vertical-rl; } </style> </head> <center> <body> <h1> Example of CSS writing-mode property </h1> <h2 id="tb"> writing-mode: horizontal-tb; </h2> <h2 id="lr" style= "height: 300px;"> writing-mode: vertical-lr; </h2><br> <h2 id="rl" style= "height: 300px;"> writing-mode: vertical-rl; </h2> </center> </body> </html>
Code language: HTML, XML (xml)

اظهر المزيد

مقالات ذات صلة

زر الذهاب إلى الأعلى

أنت تستخدم إضافة Adblock

الاعلانات هي مصدرنا الوحيد لدفع التكلفة التشغيلية لهذا المشروع الريادي يرجى الغاء تفعيل حاجب الأعلانات