Text rotation with CSS3

In this blog, We are going to see how to display text in the vertical orientation.

Following two methods perform the Text rotation.

  1. Writing-Mode
  2. Transform

1.Writing-mode:

Writing-mode, which is currently in the CSS3 draft specification allows us to accomplish text rotation without using proprietary properties. Moreover it helps in effective future-proofing the concept. As a result more browsers adopt the CSS3 draft spec.

Syntax:

writing-mode: horizontal-tb|vertical-rl|vertical-lr|tb-rl;

The above example shows the default value for writing-mode is the horizontal-tb.

This is an impressive CSS technique that will subsequently work with all browsers as their CSS3 support gets better. As a matter of fact it is one of the noteworthy property among other properties of CSS3 in IE.

The tb-rl | vertical-lr value tells the browser to display paragraphs with the text flowing from top to bottom or right to left as well as right to left. Surprisingly, IE is the only browser to support rotation of the text 90 degrees clockwise and aligning it to the Starting from IE5.5 and IE5.5+. In contrast IE8 adds further values by using the -ms extension.

There are 4 values available from IE5.5+ and additional 4 values for IE8+ through the -ms extension.

  • horizontal-tb/lr-tb – It allows the content to flow horizontally from left to right and vertically from top to bottom.
  • rl-tb – Here the text flows from right to left and top to bottom.
  • tb-rl – The text flows vertically from top to bottom and right to left.
  • vertical-rl – It lets the content flow vertically from top to bottom and horizontally from right to left
  • vertical-lr – It lets the content flow vertically from top to bottom and horizontally from left to right.

Example(Writing-mode):

HTML:

<div class="rotate-text">Rotate</div>

CSS:

.rotate-text {
    font-size: 40px;
    font-weight: bold;
    writing-mode: vertical-rl;
    display: inline-block;
}

Result:

Vertical-text using wrrite

In the above example, the entire text is rotated.
In this case, we illustrate writing-mode and text-orientation  property.

Here we come across another CSS property called ‘text-orientation’.

Text-orientation:

The text-orientation property specifies the orientation of characters within the line of content. Therefore it only applies to vertical typographic modes.

Syntax:

Text-orientation – Default(initial) value is mixed.

text-orientation: mixed | upright | sideways
  • Mixed – It is the initial(default) value. Scripts that are horizontal will only have their characters typeset sideways (rotated 90° clockwise) while vertical scripts will be typeset upright.
  • Upright – All text will be typeset upright with each character in its standard horizontal orientation.
  • Sideways– All text will be typeset sideways (rotated 90° clockwise), likewise in horizontal layout.

You can refer the below link for brief information about the text-orientation.

https://phppot.com/css/display-text-in-vertical-direction-using-css/

Example(Using text-orientation):

HTML:

<div class="rotate-text orientation">Rotate</div>

CSS:

.rotate-text {
    font-size: 40px;
    font-weight: bold;
    writing-mode: vertical-rl;
    display: inline-block;
}
.orientation {
    text-orientation: upright;
 }

Result:

Vertical-text with text-orientation

Text-orientation is not supported in IE(Internet Explorer).

Example(Without using text-orientation):

HTML:

 <div class="no-orientation">Rotate</div>

CSS:

.no-orientation {
  width:1px;
  word-wrap: break-word;
  font-size: 40px;
  font-weight: bold;
}

Result:

Vertical-text without  text-orientation

2. Transform:

It is the second method of vertical-text orientation. This method can be performed in Webkit based browsers, Firefox 3.5+, Opera 11 and IE9 with the help of the transform property.

CSS:

-webkit-transform: rotate(90deg);	
-moz-transform: rotate(90deg);
-ms-transform: rotate(90deg);
-o-transform: rotate(90deg);
transform: rotate(90deg);

In all browsers we need to use their vendor extensions -moz-, -webkit-, -o- and -ms-

Example(transform):

HTML:

<div class="rotate-text-transform">Rotate</div>

CSS:

.rotate-text-transform {
    font-size: 40px;
    font-weight: bold;
    -webkit-transform: rotate(90deg);
    -moz-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    -o-transform: rotate(90deg);
    transform: rotate(90deg);
    display: inline-block;
    margin-top: 30px;
}

Result:

Vertical-text using transform

Note:

IE9 furthermore supports both writing-mode and transform method. IE8 and below still work using writing mode but IE9 and up uses the better transforms.

Here you can see the above all the examples.

[codepen_embed height=”400″ theme_id=”0″ slug_hash=”bOYrbe” default_tab=”html,result” user=”jankiatyantik03″]See the Pen bOYrbe by Janki Gandhi (@jankiatyantik03) on CodePen.[/codepen_embed]