CSS writing-mode Property

CSS writing-mode property specifies whether the lines of text should be written horizontally or vertically along with the direction of the text. Refer to the example below:

Example:

.p1{
  writing-mode: horizontal-tb;
}
.p2{
  writing-mode: vertical-lr;
}
.p3{
  writing-mode: vertical-rl;
}

CSS Syntax

The writing-mode property has the following syntax:

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

Property Values

The writing-mode property accepts the following values:

horizontal-tbThe text flows horizontally left to right and vertically top to bottom. This is the default value.
vertical-lrThe text flows vertically top to bottom and horizontally left to right.
vertical-rlThe text flows vertically top to bottom and horizontally right to left.
initialSets the writing-mode property to its default value(horizontal-tb).
inheritInherits the writing-mode property from the parent element.

General Info

Default Valuehorizontal-tb
InheritedYes
JavaScript Usageelement.style.writingMode = “vertical-lr”

Author

  • Manoj Kumar

    Hi, My name is Manoj Kumar. I am a full-stack developer with a passion for creating robust and efficient web applications. I have hands-on experience with a diverse set of technologies, including but not limited to HTML, CSS, JavaScript, TypeScript, Angular, Node.js, Express, React, and MongoDB.

Leave a Comment