โดยการระบุการวางแนวข้อความ:ตั้งตรง และโหมดการเขียน:แนวตั้ง-rl เราสามารถแสดงข้อความแนวตั้งด้วย CSS ในแนวนอนได้
ไวยากรณ์
ไวยากรณ์ของคุณสมบัติโหมดการเขียน CSS และการวางแนวข้อความมีดังนี้ -
Selector {
writing-mode: /*value*/
text-orientation: /*value*/
} ตัวอย่าง
ตัวอย่างต่อไปนี้แสดงคุณสมบัติ CSS outline-offset
<!DOCTYPE html>
<html>
<head>
<style>
h4 {
text-orientation: upright;
writing-mode: vertical-rl;
line-height: 3;
box-shadow: inset 0 0 3px khaki;
}
</style>
</head>
<body>
<h4>Sed nec tortor</h4>
</body>
</html> สิ่งนี้ให้ผลลัพธ์ต่อไปนี้
ตัวอย่าง
<!DOCTYPE html>
<html>
<head>
<style>
body {
display: flex;
flex: 1;
}
p {
text-orientation: upright;
writing-mode: vertical-rl;
line-height: 3;
box-shadow: inset 0 0 13px orange;
}
</style>
</head>
<body>
<p>One</p>
<p>Two</p>
<p>Three</p>
<p>Four</p>
</body>
</html> สิ่งนี้ให้ผลลัพธ์ต่อไปนี้
