Text-orientation - Property CSS

text-orientation

Summary of characteristics of the `text-orientation` property

Quick description

Defines the orientation of the characters when writing in the vertical direction.

Status

Standard

Usable for

HTML

Predefined values

mixed | sideways | upright

Percentages

Not applicable.

Initial value

mixed

Inherited by default

Yes.

Animation type

Not animable : the text-orientation property cannot be animated.

W3C Module

CSS Writing Modes

References (W3C)

🡇

🡅

CSS Writing Modes Level 4

Document status: CR (Candidate Recommendation)

CSS Writing Modes Level 3

Document status: REC (Recommendation)

Syntax diagram of `text-orientation`.

Syntax diagram of the text-orientation property
The links on the diagram give access to a more detailed syntax

Description of the `text-orientation` property.

text-orientation defines the orientation of characters in the case of vertically written text, i.e. blocks whose writing-mode property to the vertical-lr or vertical-rl value.

text-orientation has no effect on elements with horizontal write directions.

See writing modes for detailed explanations of writing modes for different languages. Also see the text-combine-upright property.

Values for `text-orientation`.

text-orientation: mixed;

The orientation of the characters depends on the language of the element:

If the characters correspond to a language that is normally written horizontally, the characters will be rotated 90° clockwise, so that, by leaning his head to the right, the reader regains a normal handwriting.

If, on the other hand, the characters correspond to a language that is normally written vertically, the characters are displayed in their usual orientation.

Vertical text

竖排文本
text-orientation: upright;

The characters are displayed in their usual orientation. This value makes it easier to read characters for languages that are normally written in the horizontal direction, but which, for reasons of layout, one wishes to display vertically.

Vertical text

竖排文本
text-orientation: sideways;

The characters are displayed rotated 90° clockwise. Whatever the language, the composition of the text corresponds to a horizontal writing that has undergone a 90° rotation.

Vertical text

竖排文本
text-orientation: sideways-right; ✗

This value is no longer standardized. It is equivalent to sideways. It is therefore recommended to use the latter instead.

Global values
(common to all properties):


text-orientation: initial  (mixed)
text-orientation: inherit
text-orientation: revert
text-orientation: revertLayer
text-orientation: unset

See the following pages for more details: initial, inherit, revert, revert-layer, unset.

Animation of the `text-orientation` property.

The text-orientation property cannot be animated.

Manipulate the `text-orientation` property with Javascript.

Changed the value of `text-orientation`.

In Javascript, here's how to change the value of text-orientation. We see that Javascript offers a syntax with the typical CSS notation, kebab-case, and another syntax with the notation in camel-case.


	let el = document.getElementById('id');
	el.style['text-orientation'] = 'upright';
	// or
	let el = document.getElementById('id');
	el.style.textOrientation = 'upright';

Retrieving the value of `text-orientation`.

For this code to work, the property must have been assigned directly to the element itself via its style attribute, and not by going through a CSS selector.


	let el = document.getElementById('id');
	let value = el.style['text-orientation'];
	// or
	let el = document.getElementById('id');
	let value = el.style.textOrientation;

Retrieving the calculated value of `text-orientation`.

The calculated value is the value resulting from the evaluation of the cascade of inheritances. Otherwise, the calculated value is the initial value (mixed in the case of text-orientation.


	let el = document.getElementById('id');
	let value = window.getComputedStyle(el).getPropertyValue('text-orientation');

Changing the value of `text-orientation` with JQuery.


 $('#id').css('text-orientation', 'upright');
 // or
 $('#id').css('textOrientation', 'upright');

Retrieving the Calculated Value of `text-orientation` with JQuery.


	let value = $('#id').css('text-orientation');

Test it yourself.

The buttons below apply the entered value to the text-orientation property and then display either the value as applied, or the calculated value, but in the case of text-orientation the two values will be identical.

Interactive example.

As announced earlier, the simulator has no effect on languages with horizontal writing, i.e. latin languages and the Arabic language.

Writing mode:

text-orientation :

mixed

sideways

upright

sideways-right

Text written
vertically

垂直书写的文本

Browser compatibility.

The text-orientation property is properly supported by current browsers. The sideways value that has long been a problem, is now well recognized as well.

Column 1

Support for the text-orientation property that defines the orientation of characters.

Column 2

Support for value sideways for the text-orientation property.

text-orientation
property

sideways
value

Estimated overall support.

97%

95%

Browsers on computers :

Mobile browsers :

Outdated or marginal browsers :

Internet Explorer

KaiOS Browser

Opéra Mobile

Chrome

Edge

Opéra

Safari

Safari sur IOS

Androïd Brower

Chrome pour Androïd

Firefox pour Androïd

Samsung Internet

Firefox

Baidu Browser

QQ Browser

UC Browser pour Androïd

Opéra mini

See Caniuse.com for more compatibility information.

Caniuse

`text-orientation` property historic.

CSS Writing Modes Level 3

First definition of the text-orientation property.

December 02, 2010
Working Draft.
March 20, 2014
Candidate Recommendation.
October 24, 2019
Proposed for recommendation.
December 10, 2019
Recommendation .
CSS Writing Modes Level 4

No change to the text-orientation property.

December 07, 2017
Working Draft.
May 24, 2018
Candidate Recommendation.