-
Text-orientation Property CSS3
over 4 years ago
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)