Home >Web Front-end >CSS Tutorial >How to use css writing-mode attribute

How to use css writing-mode attribute

青灯夜游Original: 2019-05-28 17:57:083154browse

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

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>

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!

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：How to use css font-weight attributeNext article：How to use css font-weight attribute

See more

How to use css writing-mode attribute

Related articles