writing-mode
CSS writing-mode Property
The CSS writing-mode property specifies whether the text should be laid out vertically or horizontally.
This property changes the alignment of the text so that it can be read from top to bottom or from left to right, depending on the language. For example, East Asian languages such as Chinese or Japanese `are written horizontally, or some languages are written vertically.
The writing-mode property affects the block flow direction, which is a direction in which block-level containers are stacked, and a direction in which inline-level content flows within a block container.
For maximum browser compatibility extensions such as -webkit- for Safari, Google Chrome, and Opera (newer versions) are used with this property.
| 类目 | 类目 |
|---|---|
| Initial Value | horizontal-tb |
| Applies to | All elements except table row groups, table column groups, table rows, table columns, ruby base container, ruby annotation container. |
| Inherited | Yes. |
| Animatable | No. |
| Version | CSS3 |
| DOM Syntax | object.style.writingMode = “vertical-lr”; |
Syntax
Syntax
writing-mode: horizontal-tb | vertical-rl | vertical-lr | initial | inherit;
Example of the writing-mode property with the “horizontal-tb” value:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
p {
font-size: 20px;
-webkit-writing-mode: horizontal-tb;
-ms-writing-mode: horizontal-tb;
writing-mode: horizontal-tb;
}
p::first-letter {
color: #1c87c9;
font-weight: bold;
}
</style>
</head>
<body>
<h2>Writing-mode property example</h2>
<p>
Lorem Ipsum is dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</p>
</body>
</html>
Result
Another example where the content flows vertically from top to bottom and right to left.
Example of the writing-mode property with the “vertical-rl” value:
<!DOCTYPE html>
<html>
<head>
<title>The title of the document</title>
<style>
p {
font-size: 20px;
-webkit-writing-mode: vertical-rl;
-ms-writing-mode: vertical-rl;
writing-mode: vertical-rl;
}
p::first-letter {
color: #1c87c9;
font-weight: bold;
}
</style>
</head>
<body>
<h2>Writing-mode property example</h2>
<p>
Lorem Ipsum is dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</p>
</body>
</html>
In the following example, the content flows vertically from top to bottom and left to right.
Example of the writing-mode property with the “vertical-lr” value:
<!DOCTYPE html>
<html>
<head>
<title>The title of the document</title>
<style>
p {
font-size: 20px;
-webkit-writing-mode: vertical-lr;
-ms-writing-mode: vertical-lr;
writing-mode: vertical-lr;
}
p::first-letter {
color: #1c87c9;
font-weight: bold;
}
</style>
</head>
<body>
<h2>Writing-mode property example</h2>
<p>
Lorem Ipsum is dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</p>
</body>
</html>
Values
Values
| Value | Description |
|---|---|
| horizontal-tb | The content flows horizontally from left to right and vertically from top to bottom. |
| vertical-rl | The content flows vertically from top to bottom and horizontally from right to left. |
| vertical-lr | The content flows vertically from top to bottom and horizontally from left to right. |
| sideway-rl | The content flows vertically from top to bottom and all the glyphs are set sideways toward the right. |
| sideway-lr | The content flows vertically from top to bottom and all the glyphs are set sideways toward the left. |
| initial | Makes the property use its default value. |
| inherit | Inherits the property from its parents element. |