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: xxxxxxxxxx1 div.vertical-orientation {2 text-orientation: mixed;3 writing-mode: vertical-rl;4 transform: rotate(180deg);5 } |  |
|
Top-bottom direction: xxxxxxxxxx1 div.vertical-orientation {2 text-orientation: mixed;3 writing-mode: vertical-rl;4 } |  |
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).
xxxxxxxxxx1
2
<html>3
<head>4
<style>5
6
div.vertical-orientation {7
text-orientation: mixed; /* older web browsers */8
text-orientation: mixed;9
writing-mode: vertical-rl; /* older web browsers */10
writing-mode: vertical-rl;11
transform: rotate(180deg);12
}13
14
</style>15
</head>16
<body>17
<div class="vertical-orientation">Example text ...</div>18
</body>19
</html>xxxxxxxxxx1
2
<html>3
<head>4
<style>5
6
div.vertical-orientation {7
text-orientation: mixed; /* older web browsers */8
text-orientation: mixed;9
writing-mode: vertical-rl; /* older web browsers */10
writing-mode: vertical-rl;11
}12
13
</style>14
</head>15
<body>16
<div class="vertical-orientation">Example text ...</div>17
</body>18
</html>
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.
xxxxxxxxxx1
2
<html>3
<head>4
<style>5
6
div.parent {7
width: 25px;8
height: 150px;9
overflow: visible;10
}11
12
div.childern {13
transform-origin: left top;14
transform: rotate(270deg) translate(-100%);15
width: 150px; /* should be equals to div.parent -> height */16
}17
18
</style>19
</head>20
<body>21
<div class="parent">22
<div class="childern">Example text ...</div>23
</div>24
</body>25
</html>xxxxxxxxxx1
2
<html>3
<head>4
<style>5
6
div.parent {7
width: 25px;8
height: 150px;9
overflow: visible;10
}11
12
div.childern {13
margin: 0 0 0 100%;14
transform-origin: left top;15
transform: rotate(90deg);16
width: 150px; /* should be equals to div.parent -> height */17
}18
19
</style>20
</head>21
<body>22
<div class="parent">23
<div class="childern">Example text ...</div>24
</div>25
</body>26
</html>
