How to use css writing-mode attribute-CSS Tutorial-php.cn

How to use css writing-mode attribute

青灯夜游

Release： 2019-05-28 17:57:08

Original

3026 people have browsed it

css The writing-mode attribute defines how text is arranged horizontally or vertically, and is used to control the display direction of text so that it can be read from top to bottom or left to right, depending on the language. Western languages are generally written in the lr-tb way, but Asian languages are written in the lr-tb | tb-rl way.

How to use css writing-mode attribute

How to use the css writing-mode attribute?

The writing-mode property defines how text is laid out horizontally or vertically.

Syntax:

writing-mode: horizontal-tb | vertical-rl | vertical-lr | sideways-rl | sideways-lr

Copy after login

Attribute value:

● horizontal-tb: horizontal top-down writing method . That is, left-right-top-bottom

● vertical-rl: vertically writing from right to left. That is, top-bottom-right-left

● vertical-lr: the content in the vertical direction is from top to bottom, and the horizontal direction is from left to right

● sideways-rl: the content is in the vertical direction from top Arrange from bottom to bottom

● Sideways-lr: Contents are arranged vertically from bottom to top

Description:

writing-mode attribute sets or retrieves objects The inherent writing direction of the content block. Western languages are generally written in the lr-tb way, but Asian languages are written in the lr-tb | tb-rl way.

The writing-mode CSS property used to be a unique property of IE, and is already supported by the IE5.5 browser. For a long time, modern browsers such as FireFox and Chrome did not support writing-mode. Major modern browsers have implemented more standard support for writing-mode (mainly due to the active follow-up of FireFox browser) .

css writing-mode attribute example

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
table, td, th {
    border: 1px solid black;
}
table {
    border-collapse: collapse;
    width: 100%;
}
.example.Text1 span, .example.Text1 {
  writing-mode: horizontal-tb;
  -webkit-writing-mode: horizontal-tb;
  -ms-writing-mode: horizontal-tb;
}
.example.Text2 span, .example.Text2 {
  writing-mode: vertical-lr;
  -webkit-writing-mode: vertical-lr;
  -ms-writing-mode: vertical-lr;
}
.example.Text3 span, .example.Text3 {
  writing-mode: vertical-rl;
  -webkit-writing-mode: vertical-rl;
  -ms-writing-mode: vertical-rl;
}
.example.Text4 span, .example.Text4 {
  writing-mode: sideways-lr;
  -webkit-writing-mode: sideways-lr;
  -ms-writing-mode: sideways-lr;
}
.example.Text5 span, .example.Text5 {
  writing-mode: sideways-rl;
  -webkit-writing-mode: sideways-rl;
  -ms-writing-mode: sideways-rl;
}
</style>
</head>
<body>
<table>
    <tr>
        <th>value</th>
        <th>Vertical script</th>
        <th>Horizontal script</th>
        <th>Mixed script</th>
    </tr>
    <tr>
        <td>horizontal-tb</td>
        <td class="example Text1"><span>我家没有电脑。</span></td>
        <td class="example Text1"><span>Example text</span></td>
        <td class="example Text1"><span>1994年に至っては</span></td>
    </tr>
    <tr>
        <td>vertical-lr</td>
        <td class="example Text2"><span>我家没有电脑。</span></td>
        <td class="example Text2"><span>Example text</span></td>
        <td class="example Text2"><span>1994年に至っては</span></td>
    </tr>
    <tr>
        <td>vertical-rl</td>
        <td class="example Text3"><span>我家没有电脑。</span></td>
        <td class="example Text3"><span>Example text</span></td>
        <td class="example Text3"><span>1994年に至っては</span></td>
    </tr>
    <tr>
        <td>sideways-lr</td>
        <td class="example Text4"><span>我家没有电脑。</span></td>
        <td class="example Text4"><span>Example text</span></td>
        <td class="example Text4"><span>1994年に至っては</span></td>
    </tr>
    <tr>
        <td>sideways-rl</td>
        <td class="example Text5"><span>我家没有电脑。</span></td>
        <td class="example Text5"><span>Example text</span></td>
        <td class="example Text5"><span>1994年に至っては</span></td>
    </tr>
</table>
</body>
</html>

Copy after login

Rendering:

How to use css writing-mode attribute

The above is the detailed content of How to use css writing-mode attribute. For more information, please follow other related articles on the PHP Chinese website!