The text-orientation CSS property defines the orientation of the text in every line.
This property solely has a control in vertical mode, that's once writing-mode isn't horizontal-tb. it's helpful to manage the show of writing in languages victimization vertical script, however conjointly to contend with vertical table headers
Syntax:
text-orientation: mixed;
text-orientation: upright;
text-orientation: sideways;
|
Values description:
mixed :ends up in having characters for horizontal-only scripts being turned 90°
writing-mode: vertical-rl;
text-orientation: mixed;
upright: results in having characters for horizontal-only scripts to be ordered out naturally (upright). Note that this keyword lead all characters to be thought-about as ltr: the used price of direction is ltr, regardless of the user might attempt to set it to.
writing-mode: vertical-rl;
text-orientation: upright;
sideways: This keyword results in having characters arranged out like if they were arranged out horizontally, however with the entire line revolved 90° to the correct if writing-mode is vertical-rl or to the left, if it's vertical-lr.
writing-mode: vertical-rl;
text-orientation: sideways;
complete code for demo:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Text-orientation</title>
<style type="text/css">
.container{
width: 800px;
margin: 0 auto;
padding: 20px;
display: table;
}
.text{
writing-mode: vertical-rl;
display: inline-block;
color: #219ADF;
padding: 20px;
width: 88%;
}
.upright{
text-orientation: upright;
}
.sideways{
text-orientation: sideways;
}
.mixed{
text-orientation: mixed;
}
.wrapper{
width: 46%;
padding: 12px;
display: table-cell;
text-align: center;
color: #219ADF;
}
.wrapper h2{
text-transform: capitalize;
}
.mixed-rotate, .upright-rotate, .sideways-rotate{
transform: rotate(-30deg);
}
</style>
</head>
<body>
<div class="container">
<div class="wrapper">
<h2>Simple-text-orientation</h2>
<div class="text">
<h2 class="mixed">Text-orientation-mixed</h2>
<h2 class="upright">Text-orientation-upright</h2>
<h2 class="sideways">Text-orientation-sideways</h2>
</div>
</div>
<div class="wrapper">
<h2>Text-orientation-rotation</h2>
<div class="text">
<h2 class="mixed-rotate">Text-orientation-mixed</h2>
<h2 class="upright-rotate">Text-orientation-upright</h2>
<h2 class="sideways-rotate">Text-orientation-sideways</h2>
</div>
</div>
</div>
</body>
</html>
Output:

Happy Coding :)
0 Comment(s)