Vertical Text, with Horizontal Letters in CSS
By specifying text-orientation: upright and writing-mode: vertical-rl, we can display vertical text with horizontal CSS.
Syntax
The syntax of CSS writing-mode and text-orientation property is as follows −
Selector {
writing-mode: /*value*/
text-orientation: /*value*/
}Example
The following examples illustrate CSS outline-offset property.
Live Demo
<!DOCTYPE html>
<html>
<head>
<style>
h4 {
text-orientation: upright;
writing-mode: vertical-rl;
line-height: 3;
box-shadow: inset 0 0 3px khaki;
}
</style>
</head>
<body>
<h4>Sed nec tortor</h4>
</body>
</html>This gives the following output
Example
Live Demo
<!DOCTYPE html>
<html>
<head>
<style>
body {
display: flex;
flex: 1;
}
p {
text-orientation: upright;
writing-mode: vertical-rl;
line-height: 3;
box-shadow: inset 0 0 13px orange;
}
</style>
</head>
<body>
<p>One</p>
<p>Two</p>
<p>Three</p>
<p>Four</p>
</body>
</html>This gives the following output
Published on 10-Feb-2021 13:09:18
