การแสดงผลข้อความโดยปกติแล้วจะเป็นแนวนอนเป็นส่วนใหญ่ ดูมันธรรมดาเกินไปมันไม่น่าจะเอามาเขียนในวันนี้ ก็เลยนึกว่าถ้าเกิดจะแสดงข้อความในแนวตั้งจะทำอย่างไร คิดแล้วก็หาคำตอบให้ตัวเอง โดยต้องกำหนดโดย Css เท่านั้นก็ไปเจอ properties หนึ่งซึ่งน่าจะเป็นคำตอบที่ถูกที่สุด นั้นก็คือ writting-mode โดยค่าที่สามารถกำหนดให้มีอยู่ 2 ค่า นั้นก็คือ lr-tb กำหนดในแนวนอน ซึ่งเป็นค่า default อยู่แล้ว และก็ tb-rt เป็นการกำหนดค่าในแนวตั้ง ว่าแล้วก็มาลองทดสอบกัน
<STYLE>
.clsHoriz { writing-mode:lr-tb }
.clsVerti {
writing-mode:tb-rl;
width:15px;
}
</STYLE>
Html Code
<span class="clsHoriz">Horizontal Text </span>
<span class="clsVerti"> Vertical Text </span>
ผลการรัน
Horizontal Text Vertical Text
ถ้าเรานำมาประยุกต์ใช้ในการออกรายงานโดยกำหนดหัวตารางแบบแนวนอนก็สามารถทำได้ง่าย
Html Code
<TABLE border=1>
<Tr>
<TD class="clsVerti">header vertical 1</TD>
<TD class="clsVerti">header vertical 2</TD>
<TD class="clsVerti">header vertical 3</TD>
<TD class="clsVerti">header vertical 4</TD>
</Tr>
<TR>
<TD> </TD>
<TD> </TD>
<TD> </TD>
<TD> </TD>
</TR>
<TR>
<TD> </TD>
<TD> </TD>
<TD> </TD>
<TD> </TD>
</TR>
</TABLE>
ผลการรัน
| header vertical 1 | header vertical 2 | header vertical 3 | header vertical 4 |
