CSS Introduction

CSS Tutorial What is CSS CSS Syntax CSS Selector How to include CSS CSS Comments

CSS Attributes

CSS Background CSS Border CSS Display CSS Float CSS Font CSS Color CSS Hover CSS Important CSS Line-height CSS Margin CSS Opacity CSS Filter CSS Images CSS Overflow CSS Padding CSS Position CSS Vertical align CSS White space CSS Width Word-wrap in CSS Box-shadow in CSS Text-transform in CSS CSS Outline CSS Visibility CSS Counters CSS Clear fix CSS Icons CSS Justify-content Text-decoration in CSS CSS Lists CSS nth selector CSS Sticky CSS Background-clip CSS Checkbox-style CSS Letter-spacing CSS Navigation bar CSS Overlay CSS Root CSS Specificity CSS Text-indent CSS Text-stroke CSS Zoom CSS Order CSS Descendent selector CSS Clip CSS calc() CSS Background-blend-mode CSS radio-button CSS Superscript and subscript CSS Text-effects CSS Text-align CSS Variables CSS Page-break-before CSS Page-break-inside CSS Page-break-after CSS Content property CSS Word-spacing CSS Animation CSS @keyframes rules CSS Pseudo-classes CSS Pseudo-elements CSS Radial-gradient CSS Translate CSS Gradients CSS z-index CSS Loaders CSS Units CSS Transition CSS Masking CSS Arrow CSS Pagination

Misc

What is Bootstrap CSS What is CSS used for Difference between HTML and CSS How to center a table in CSS What is a CSS File How to center a button in CSS How to change background color in CSS How to change the font in CSS How to change font size in CSS How to resize an image in CSS How to get rid of bullet pioints in CSS Is CSS a programming language Grid Vs Flexbox in CSS How to edit CSS in WordPress How to use google fonts in CSS

Css Text Orientation

Introduction:

The text-orientation property of CSS is used to specify the orientation of the text characters in the line of content. This property applies only with the vertical writing-mode and not with the text which is in horizontal writing-mode.

This property is used for controlling the display of languages using vertical script and to create vertical table headers.

The text-orientation property is completely dependent on the writing-mode property. So it is mandatory that the writing-mode is set to vertical-rl. If the writing-mode is set to horizontal-tb, text-orientation won't work.

It can be applied to all the element except the table rows, columns, row groups and column groups.

What is writing-mode?

The writing-mode property indicates whether the script/text is displayed vertically or horizontally.

Default value of this property is horizontal-tb

There are three values associated with writing-mode:

Value Description
horizontal-tb This allows the text to flow horizontally from left to right and vertically from top to bottom.
vertical-rl This allows the text to flow vertically from top to bottom and horizontally from right to left.
vertical-lr This allows the text to flow vertically from top to bottom and horizontally from left to right.

Text - orientation property values:

CSS text-orientation has following values:

  • mixed
  • upright
  • sideways
  • sideways-right
  • use-glyph-orientation
  • initial
  • inherit
  • mixed:
    This is the default value of text-orientation and it rotates the horizontal text 90oclockwise. Characters which are already in their vertical orientation are displayed naturally.
    Syntax:
    text-orientation: mixed;

Example:

<!DOCTYPE html>
<html>
<head>
<style>
div{
border: 1px solid;
font-size: 20px;
width: 250px;
height: 300px;
}
div{	
writing-mode: vertical-lr;
text-orientation: mixed;	
}
h2{
	color: tomato;
}
</style>
</head>
<body>
<h2>Example of text-orientation: mixed; </h2>
<div>
This is an example of CSS text-orientation. The example display the mixed value of this property.
</div>
</body>
</html>

Output:

CSS Text-Orientation

In above output, the horizontal text rotates 90oclockwise using mixed keyword of text-orientation.

  • upright:
    The characters in the horizontal orientation are set upright naturally, including the glyphs for the vertical oriented scripts. This keyword treats all the characters as left to right in the writing mode, so the value for the directionproperty is forcefully set as ltr.
    Syntax:
    text-orientation: upright;

Example:

<!DOCTYPE html>
<html>
<head>
<style>
div{
border: 1px solid;
font-size: 20px;
width: 250px;
height: 300px;
}
div{	
writing-mode: vertical-rl;
text-orientation: upright;	
}
h2{
	color: tomato;
}
</style>
</head>
<body>
<h2>Example of text-orientation: upright; </h2>
<div>
This is an example of CSS text-orientation. The example display the upright value of this property.
</div>
</body>
</html>

Output:

CSS Text-Orientation

Here, the above text is displayed upright from left to right using text-orientation: upright value.

  • sideways:
    This keyword sets the text in vertical writing mode sideways i.e., it allows the characters to be laid out horizontally It rotates the complete line 90o clockwise.
    Syntax:
    text-orientation: sideways;

Example:

<!DOCTYPE html>
<html>
<head>
<style>
div{
border: 1px solid;
font-size: 20px;
width: 250px;
height: 300px;
writing-mode: vertical-rl;
text-orientation: sideways;	
}
h2{
color: tomato;
width: 400px;
}
</style>
</head>
<body>
<h2>Example of text-orientation: sideways; and writing-mode: vertical-rl;</h2>
<div>
This is an example of CSS text-orientation. The example display the sideways value of this property.
</div>
</body>
</html>

Output:

CSS Text-Orientation

Here, the text is displayed to the sideways with the writing-mode right to left.

  • sideways-right:
    This is an alias for the sideways value, and is used for compatibility purposes.
    Syntax:
    text-orientation: sideways-right;

Example:

<!DOCTYPE html>
<html>
<head>
<style>
div{
border: 1px solid;
font-size: 20px;
width: 250px;
height: 300px;
writing-mode: vertical-lr;
text-orientation: sideways-right;
}
h2{
color: tomato;
width: 400px;
}
</style>
</head>
<body>
<h2>Example of text-orientation: sideways-right; and writing-mode: vertical-lr; </h2>
<div>
This is an example of CSS text-orientation. The example display the sideways-right value of this property.
</div>
</body>
</html>

Output:

CSS Text-Orientation

The output displays the text in sideways-right format.

  • use-glyph-orientation:
    This property value has been removed from use since December 2015.
    It was used with SVG elements to define SVG properties glyph-orientation-vertical and glyph-orientation-horizontal.
    glyph-orientation-horizontal is used as an alias of text-orientation.
    Syntax:
    text-orientation: use-glyph-orientation;
  • initial:
    The initial keyword assigns default value to the text-overflow property.
    Default value of text-orientation is mixed.
    Syntax:
    text-orientation: initial;

Example:

<!DOCTYPE html>
<html>
<head>
<style>
.id{
	width: 300px;
	height: 300px;
	border: 1px solid black;
	font-size: 25px;
	writing-mode: vertical-lr;
	text-orientation: initial;
}
h2{
	color: skyblue;
}
</style>
</head>
<body>
<h2>text-orientation: initial; </h2>
<div class="id">
This is an example of CSS text-orientation. The example display the initial value of this property
</div>
</body>
</html>

Output:

CSS Text-Orientation

Here, the script takes the initial value of the property which is mixed.

  • inherit:
    This value inherits the text-overflow property of its parent element.
    Syntax:
    text-orientation: inherit;

Example:

<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 400px;
height:300px;
font-size: 15px;
border: 2px solid;
writing-mode:vertical-lr;
text-orientation: upright;
}
h2{
width: 400px;
text-orientation: inherit;
color: skyblue;
} 
</style>
</head>
<body>
<h2 style="color: red">text-orientation: inherit</h2>
<div>
<h2>text-orientation: inherit derives the property of its parent element </h2>
This is an example of CSS text-orientation. The example display the inherit value of this property.
</div>
</body>
</html>

Output:

CSS Text-Orientation

Here the <h2> element inherits the text-orientation: upright; property of the <div> element.



ADVERTISEMENT
ADVERTISEMENT