خاصية 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)
