CODESCRACKER

CSS writing-mode

The CSS writing-mode property is used to lay the text horizontally or vertically, along with the direction. For example:

HTML with CSS Code
<!DOCTYPE html>
<html>
<head>
   <style>
      p{writing-mode: vertical-lr;}
   </style>
</head>
<body>
   
   <p>This is an example of writing-mode property.</p>

</body>
</html>
Output

This is an example of writing-mode property.

In the above example, p is a selector that targets all <p> elements within the HTML document.

Then the writing-mode property sets the direction in which text should flow within the specified element. In this case, the vertical-lr value is used to specify vertical writing mode, where text flows vertically from top to bottom, with each character placed to the left of the previous character.

When the above code is run in a web browser, the text contained within the p element is displayed in vertical writing mode, with each character stacked on top of the previous character and aligned to the left. This example shows how to use CSS to control the layout and direction of text within an HTML document.

CSS writing-mode syntax

The syntax of the writing-mode property in CSS is:

writing-mode: x;

The value of x should be any of the following:

CSS Online Test

« Previous Tutorial Next Tutorial »

Liked this post? Share it!