The text on a web page can be rotated with the help of CSS. Rotating the text helps style the web page and attract viewers. There are many methods to rotate the text. In this article, we are going to study the CSS rotate text .
Following are the CSS text rotate properties that are used to rotate the text on the web page:
- Using writing-mode
- Using text-orientation
- Using rotate property
- Using transform property with value rotate function
Let us learn all properties one by one.
1. Using Writing-mode
The first property is using the "writing-mode" .
Syntax:
Example
writing-mode: horizontal-tb | vertical-lr | vertical-rl | sideways-lr | sideways-lr| inherit| initial;
In the above syntax, "writing-mode" is the CSS property. There are many values that this property takes, which are as follows:
- Horizontal-tb: When this value is given to the writing-mode then it places the texts horizontally from left to right for the left-to-right scripts and it places the texts horizontally from right to left for the right-to-left scripts.
- Vertical-lr: When this value is given to the "writing-mode" property, then it places the texts vertically from top to bottom for the left-to-right scripts and places the next vertical line to the left of the previous line. It places the texts vertically from bottom to top for the right-to-left scripts and places the next vertical line to the right of the previous line.
- Vertical-rl: When this value is given to the "writing-mode" property, then it places the texts vertically from top to bottom for the left-to-right scripts and places the next vertical line to the right of the previous line. It places the texts vertically from bottom to top for the right-to-left scripts and places the next vertical line to the left of the previous line.
- Sideways-lr: When this value is given to the "writing-mode" property, then it places the texts vertically from bottom to top for the left-to-right scripts, and it places the texts horizontally from top to bottom for the right-to-left scripts. It shifts the text towards the left.
- Sideways-rl: When this value is given to the "writing-mode" property, the texts are placed vertically from top to bottom for the left-to-right scripts and horizontally from bottom to top for the right-to-left scripts. It shifts the text towards the right.
- Inherit: It is used to inherit the CSS writing-mode property of the parent.
- Initial: It is used to set the default value of the CSS writing-mode property.
Demonstration of "writing-mode" CSS Property
Let's explore the application of the "writing-mode" CSS property through the given illustration. We will demonstrate all possible values of the writing-mode property to showcase different orientations of text.
Code:
Example
<!DOCTYPE html>
<html lang="en">
<head>
<title>Demonstration of CSS property writing-mode to rotate the text</title>
<style>
section {
width: 600px;
margin: 20px auto;
}
div {
display: block;
position: relative;
margin: 100px 0;
}
div p{
padding: 12px;
margin-left: 120px;
}
.first {
position: absolute;
font: bold 12px Courier;
letter-spacing: 2px;
background: #06756f;
color: #fcefef;
padding: 25px 5px;
line-height: 24px;
writing-mode: vertical-rl;
}
.second {
position: absolute;
font: bold 12px Courier;
letter-spacing: 2px;
background: #06756f;
color: #fcefef;
padding: 25px 5px;
line-height: 24px;
writing-mode: vertical-lr;
}
.third {
position: absolute;
font: bold 12px Courier;
letter-spacing: 2px;
background: #06756f;
color: #fcefef;
padding: 25px 5px;
line-height: 24px;
writing-mode: sideways-rl;
}
.fourth {
position: absolute;
font: bold 12px Courier;
letter-spacing: 2px;
background: #06756f;
color: #fcefef;
padding: 25px 5px;
line-height: 24px;
writing-mode: sideways-lr;
}
.fifth {
position: absolute;
font: bold 12px Courier;
letter-spacing: 2px;
background: #06756f;
color: #fcefef;
padding: 25px 5px;
line-height: 24px;
writing-mode: horizontal-tb;
}
</style>
</head>
<body>
<h1>Rotating text utilizing the writing-mode property</h1>
<section>
<div>
<h3 class="first">Rotating text vertical-rl</h3>
<p>This paragraph has a heading called "Rotating text vertical-rl" which is rotated using the "writing-mode: vertical-rl".</p>
</div>
<section>
<div>
<h3 class="second">Rotating text vertical-lr</h3>
<p>This paragraph has a heading called "Rotating text vertical-lr" which is rotated using the "writing-mode: vertical-lr".</p>
</div>
</section>
<section>
<div>
<h3 class="third">Rotating text sideways-rl</h3>
<p>This paragraph has a heading called "Rotating text sideways-rl" which is rotated using the "writing-mode: sideways-rl".</p>
</div>
</section>
<section>
<div>
<h3 class="fourth">Rotating text sideways-lr</h3>
<p>This paragraph has a heading called "Rotating text sideways-lr" which is rotated using the "writing-mode: sideways-lr".</p>
</div>
</section>
<section>
<div>
<h3 class="fifth">Rotating text horizontal-tb</h3>
<p>This paragraph has a heading called "Rotating text horizontal-tb" which is rotated using the "writing-mode: horizontal-tb".</p>
</div>
</section>
</body>
</html>
Output:
Here in the result, we can observe the application of the writing-mode attribute with various settings that demonstrate distinct text orientations.
2. Using Text-orientation
The second attribute employs the "text orientation" feature. This attribute becomes essential when the "writing-mode" attribute is defined, making it a prerequisite for utilizing the "text-orientation" feature.
Syntax:
Example
writing-mode: horizontal-tb;
The text orientation property can be set to upright, mixed, sideways, use-glyph-orientation, sideways-right, inherit, or initial.
"writing-mode" and "text-orientation" are the CSS properties in the above syntax. There are various values that the "text-orientation" property takes, which are given below:
- Upright: This value is used to set the characters to be in an upright manner and the characters are not rotated.
- Mixed: This value is used to rotate the characters to 90 degrees in the clockwise direction.
- Sideways: This value is supported by the Firefox browser only. It rotates the characters clockwise to 90 degrees, orienting them the same way text lines are oriented.
- Use-glyph-orientation: This value is used to use the deprecated SVG properties glyph-orientation-horizontal and glyph-orientation-vertical in the SVG elements.
- Sideways-right: This value's work is the same as that of the sideways value, but it is utilized for compatibility purposes.
- Inherit: It is utilized to inherit the CSS text-orientation property of the parent.
- Initial: It is used to set the default value of the CSS text-orientation property.
Demonstration of "text-orientation" CSS Property
Let's explore an example showcasing the utilization of the text-orientation property.
Code:
Example
<!DOCTYPE html>
<html lang="en">
<head>
<title>Rotating text utilizing the text-orientation property</title>
<style>
section {
width: 650px;
margin: 5px auto;
}
div {
display: block;
position: relative;
margin: 110px 0;
}
div p{
padding: 15px;
padding-top: 45px;
margin-left: 175px;
}
.one {
position: absolute;
letter-spacing: 4px;
padding: 30px 20px;
font: bold 15px Sans-Serif;
background: #43066d;
color: #f9d6d6;
writing-mode: vertical-rl;
line-height: 25px;
text-orientation: mixed;
}
.two {
position: absolute;
letter-spacing: 4px;
padding: 30px 20px;
font: bold 15px Sans-Serif;
background: #690aa8;
color: #f9d6d6;
writing-mode: vertical-rl;
line-height: 32px;
text-orientation: upright;
}
.three {
position: absolute;
letter-spacing: 4px;
padding: 30px 20px;
font: bold 15px Sans-Serif;
background: #870ed8;
color: #f9d6d6;
writing-mode: vertical-rl;
line-height: 32px;
text-orientation: sideways;
}
.four {
position: absolute;
letter-spacing: 4px;
padding: 30px 20px;
font: bold 15px Sans-Serif;
background: #a22fef;
color: #f9d6d6;
writing-mode: vertical-rl;
line-height: 32px;
text-orientation: use-glyph-orientation;
}
.five {
position: absolute;
letter-spacing: 4px;
padding: 30px 20px;
font: bold 15px Sans-Serif;
background: #b963f3;
color: #f9d6d6;
writing-mode: vertical-rl;
line-height: 32px;
text-orientation: sideways-right;
}
</style>
</head>
<body>
<h1>Rotating text with the help of the text-orientation property</h1>
<section>
<div>
<h3 class="one">text-orientation: mixed</h3>
<p>We will rotate the heading of this paragraph utilizing the text-orientation property with value as mixed</p>
</div>
</section>
<section>
<div>
<h3 class="two">text-orientation: upright</h3>
<p>We will rotate the heading of this paragraph utilizing the text-orientation property with the value as upright</p>
</div>
</section>
<section>
<div>
<h3 class="three">text-orientation: sideways</h3>
<p>We will rotate the heading of this paragraph using the text-orientation property with value as sideways</p>
</div>
</section>
<section>
<div>
<h3 class="four">text-orientation: use-glyph-orientation</h3>
<p>We will rotate the heading of this paragraph utilizing the text-orientation property with value as use-glyph-orientation</p>
</div>
</section>
<section>
<div>
<h3 class="five">text-orientation: sideways-right</h3>
<p>We will rotate the heading of this paragraph using the text-orientation property with value as sideways-right</p>
</div>
</section>
</body>
</html>
Output:
Here is the result. We can observe the text-orientation attribute with diverse settings that demonstrate different styles of text rotation.
3. Using Rotate Property
The "rotate" CSS property is the third option for rotating text.
Syntax:
Example
rotate: none| axis angle | inherit| initial;
"rotate" is the CSS property in the above syntax. The values that the "rotate" property takes are given below:
- None: This value is the default value, i.e., automatically assigned value.
- Axis: This tells the axis to which you want to rotate the text, such as the x-axis, y-axis, or z-axis. If the axis is not specified, then the z-axis is set by default.
- Angle: This means the angle to which you require the text to be rotated, such as rad, turn, and degree.
- Vector-angle: It uses three numbers to rotate the text: x-coordinate, y-coordinate, and z-coordinate. These numbers are used with angle, which defines how much angle the text is to be rotated.
- Inherit: It is utilized to inherit the CSS rotate characteristics of the parent.
- Initial: It is utilized to specify the default value of the CSS rotate property.
Demonstration of "rotate" CSS Property
We will explore the "rotate" attribute in this illustration.
Code:
Example
<!DOCTYPE html>
<html lang="en">
<head>
<title>Illustration to rotate the text with the help of the CSS rotate property</title>
<style>
section {
width: 500px;
margin: 10px auto;
}
div {
margin: 75px 0;
position: relative;
}
div p{
padding: 40px;
padding-top: 75px;
margin-left: 55px;
}
.rotate1 {
position: absolute;
background: #bef16c;
color: #ffffff;
letter-spacing: 1px;
font: bold 14px Sans-Serif;
text-transform: uppercase;
padding: 10px;
line-height: 28px;
rotate: -30deg;
}
.rotate2 {
position: absolute;
background: #bef16c;
color: #ffffff;
letter-spacing: 1px;
font: bold 14px Sans-Serif;
text-transform: uppercase;
padding: 10px;
line-height: 28px;
rotate: 10deg;
}
.rotate3 {
position: absolute;
background: #bef16c;
color: #ffffff;
letter-spacing: 1px;
font: bold 14px Sans-Serif;
text-transform: uppercase;
padding: 10px;
line-height: 28px;
rotate: 1 1 0 45deg;
}
.rotate4 {
position: absolute;
background: #bef16c;
color: #ffffff;
letter-spacing: 1px;
font: bold 14px Sans-Serif;
text-transform: uppercase;
padding: 10px;
line-height: 28px;
rotate: y -180deg;
}
.rotate5 {
position: absolute;
background: #bef16c;
color: #ffffff;
letter-spacing: 1px;
font: bold 14px Sans-Serif;
text-transform: uppercase;
padding: 10px;
line-height: 28px;
rotate: x 60deg;
}
.rotate6 {
position: absolute;
background: #bef16c;
color: #ffffff;
letter-spacing: 1px;
font: bold 14px Sans-Serif;
text-transform: uppercase;
padding: 10px;
line-height: 28px;
rotate: z -30deg;
}
</style>
</head>
<body>
<section>
<div>
<h3 class="rotate1">rotate: -30deg</h3>
<p>This paragraph's heading demonstrates the text rotated to -30deg.</p>
<h3 class="rotate2">rotate: 10deg</h3>
<p>The paragraph's heading shows the text rotated to 10deg.</p>
<h3 class="rotate3">rotate: 1 1 0 45deg</h3>
<p>The heading of this paragraph displays the rotated text with the assistance of the "rotate: 1 1 0 45deg" property.</p>
<h3 class="rotate4">rotate: y -180deg</h3>
<p>The heading of this paragraph displays the rotated text with the help of the "rotate: y -180deg" property.</p>
<h3 class="rotate5">rotate: x 60deg</h3>
<p>The paragraph's heading illustrates the rotated text utilizing the "rotate: x 60deg" property.</p>
<h3 class="rotate6">rotate: z 60deg</h3>
<p>The heading of this paragraph demonstrates the rotated text with the use of the "rotate: z 60deg" property.</p>
</div>
</section>
</body>
</html>
Output:
Here in the outcome, you can observe the application of the "rotate" attribute with unique values that showcase different text rotation effects.
4. Using Transform Property with Value Rotate Function
The "transform" property is the fourth one in the list, and it takes a value in the form of the rotate function.
Syntax:
Example
transform: rotate(degree);
"transform" represents the CSS attribute visible in the syntax provided earlier. The permissible values for this attribute include:
-
- None: This value serves as the default or automatic option.
-
- Rotate (degree) function: This function enables text rotation by a specified degree value.
Demonstration of "transform: rotate" CSS Property
We will demonstrate how to rotate text using the transform property.
Code:
Example
<!DOCTYPE html>
<html lang="en">
<head>
<title>Rotating the text with the help of the transform property</title>
<style>
section {
width: 500px;
margin: 10px auto;
}
div {
margin: 24px 0;
position: relative;
}
div p{
padding: 40px;
padding-top: 90px;
margin-left: 55px;
}
.rotate-text1 {
position: absolute;
background: #bef16c;
color: #ffffff;
letter-spacing: 1px;
font: bold 14px Sans-Serif;
text-transform: uppercase;
padding: 10px;
line-height: 28px;
transform: rotate(-15deg);
}
.rotate-text2 {
position: absolute;
background: #bef16c;
color: #ffffff;
letter-spacing: 1px;
font: bold 14px Sans-Serif;
text-transform: uppercase;
padding: 10px;
line-height: 28px;
transform: rotate(15deg);
}
</style>
</head>
<body>
<h1>Rotating the text utilizing the transform property</h1>
<section>
<div>
<h3 class="rotate-text1">transform: rotate(-15deg)</h3>
<p>The heading of this paragraph is rotated to -15 degrees.</p>
</div>
</section>
<section>
<div>
<h3 class="rotate-text2">transform: rotate(15deg)</h3>
<p>The heading of this paragraph is rotated to 15 degrees.</p>
</div>
</section>
</body>
</html>
Output:
We can observe text rotation by utilizing the transform property as demonstrated below.
Browser Compatibility
Given below are the browsers that support all the properties discussed in this article:
- Google Chrome
- Firefox
- Opera
- Internet Explorer
- Safari
Conclusion
In this article, we have understood the CSS rotate text . We have seen four CSS text rotate properties that are used to rotate the text, which are as follows:
- Using writing-mode
- Using text-orientation
- Using rotate property
- Using transform property with value rotate function
We have comprehended every attribute accurately through the assistance of the provided examples.