ویژگی writing-mode در CSS

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; 
}

مشاهده و ویرایش کد در حالت تمام صفحه

پشتیبانی مرورگرها
تمام مرورگرها از این ویژگی پشتیبانی می کنند.