writing-mode Property
ویژگی writing-mode
در CSS مشخص می کند که خطوط متنی بصورت افقی (که فرم معمول آنست) در صفحه قرار گیرد یا بصورت عمودی.
نحوه نوشتار
writing-mode: horizontal-tb; writing-mode: vertical-rl; writing-mode: vertical-lr;
مقادیر
horizontal-tb
جریان محتوا را بصورت افقی از چپ به راست و بصورت عمودی از بالا به پایین تنظیم می کند.
vertical-rl
جریان محتوا را بصورت عمودی از بالا به پایین . بصورت افقی از راست به چپ تنظیم می کند.
vertical-lr
جریان محتوا را بصپرت عمودی از بالا به پایین و بصورت افقی از چپ به راست تنظیم میکند.
در مثال زیر نحوه عملکرد این ویژگی را میبینیم:
html
<table> <tr> <th>مقدار ویژگی</th> <th>جریان نوشتار</th> </tr> <tr> <td>horizontal-tb</td> <td><span class="horizontal-tb">این یک متن نمونه است</span></td> </tr> <tr> <td>vertical-rl</td> <td><span class="vertical-rl">این یک متن نمونه است</span></td> </tr> <tr> <td>vertical-lr</td> <td><span class="vertical-lr">این یک متن نمونه است</span></td> </tr> </table>
css
body { direction: rtl; font: normal 16px calibri; } table, td, th { border: 2px solid coral; } th { padding: 15px; } td { padding: 20px; } table { text-align: center; margin: 15px auto; border-collapse: collapse; } tr td:first-child { font-weight: bold; } .horizontal-tb { writing-mode: horizontal-tb; } .vertical-rl { writing-mode: vertical-rl; } .vertical-lr { writing-mode: vertical-lr; }
مشاهده و ویرایش کد در حالت تمام صفحه
پشتیبانی مرورگرها
تمام مرورگرها از این ویژگی پشتیبانی می کنند.