EN
CSS - text vertical orientation (text vertical direction)
6
points
In this short article, we would liek to show how to set vertical direction for text using CSS.
Quick solutions:
|
Bottom-top direction:
|  |
|
Top-bottom direction:
|  |
Practical examples
text-orientation: mixed and writing-mode: vertical-rl was intruduced around 2015-2020 and works in some older versions only when -webkit- prefix is used (except Microsoft Edge that introduced it in 2020).
Bottom-top direction
// ONLINE-RUNNER:browser;
<!doctype html>
<html>
<head>
<style>
div.vertical-orientation {
-webkit-text-orientation: mixed; /* older web browsers */
text-orientation: mixed;
-webkit-writing-mode: vertical-rl; /* older web browsers */
writing-mode: vertical-rl;
transform: rotate(180deg);
}
</style>
</head>
<body>
<div class="vertical-orientation">Example text ...</div>
</body>
</html>
Top-bottom direction
// ONLINE-RUNNER:browser;
<!doctype html>
<html>
<head>
<style>
div.vertical-orientation {
-webkit-text-orientation: mixed; /* older web browsers */
text-orientation: mixed;
-webkit-writing-mode: vertical-rl; /* older web browsers */
writing-mode: vertical-rl;
}
</style>
</head>
<body>
<div class="vertical-orientation">Example text ...</div>
</body>
</html>
Legacy example
In this section, you can find vertical text direction hack that lets to achieve similar effect using only transformations. This solution works in older web browsers. The main disadvantage is the need to set the size of the container elements.
Bottom-top direction
// ONLINE-RUNNER:browser;
<!doctype html>
<html>
<head>
<style>
div.parent {
width: 25px;
height: 150px;
overflow: visible;
}
div.childern {
transform-origin: left top;
transform: rotate(270deg) translate(-100%);
width: 150px; /* should be equals to div.parent -> height */
}
</style>
</head>
<body>
<div class="parent">
<div class="childern">Example text ...</div>
</div>
</body>
</html>
Top-bottom direction
// ONLINE-RUNNER:browser;
<!doctype html>
<html>
<head>
<style>
div.parent {
width: 25px;
height: 150px;
overflow: visible;
}
div.childern {
margin: 0 0 0 100%;
transform-origin: left top;
transform: rotate(90deg);
width: 150px; /* should be equals to div.parent -> height */
}
</style>
</head>
<body>
<div class="parent">
<div class="childern">Example text ...</div>
</div>
</body>
</html>