LambdaTest Community

Find answers, support, and inspiration from other users

Questions
LambdaTest Community
Answered

What are the CSS writing modes?

What are the writing modes in CSS? Please explain with their types.

Up Vote Down Vote 2 Votes
Posted 5 months ago

Answers


CSS Writing modes is a property of Cascading Style Sheets to define the orientation of the text that has to be written on the web page. Taking the examples of languages only, some languages are written in a horizontal way like English here, and some are written in a vertical way like traditional Japanese or Mandarin.

If I talk about it in technical terms, then CSS writing modes changes the flow of the block elements in the website. So, if the block element was horizontal first and it was taking up space horizontally, applying writing mode will change the block element to vertical taking up space vertically.

Not only languages but the CSS writing-mode property can also be used at numerous other places such as styling the content or some special need of the website etc. Here is a quick example of how CSS writing modes allow you to play with the content over your website.

<!DOCTYPE HTML>
<head>
<title>block and inline elements</title>
</head>
<style>
h2 {
	font-size: 48px;
	color: red;
}
p {
	font-size: 34px;
	color: black;
};
</style>
<body>
<div style="position:relative">
<h2 style="writing-mode:vertical-rl; position:absolute; color:red">LambdaTest</h2>
<p style="padding-left:120px">Hello, This is Harish Rajora and I work for LambdaTest</p>
</div>
</body>
</html>
</html>
</html>

Not only the direction of the text seen, but the direction of the text written and read is also defined through CSS writing modes. Like Arabic is read from right to left, so the direction of writing is right to left. Writing-modes in CSS are used majorly for the purpose of depicting the languages which are written vertically but it does not confine to just that. Since there is no defined reason for any property to use in CSS, you can use it whenever you feel the need to do so.

Since it becomes an exhaustive task to verify the CSS & JavaScript of a website over a variety of browsers. To ease the effort, you can use LambdaTest, a cross browser testing platform.

Up Vote Down Vote 4 Votes
Posted 5 months ago