Head over to caniuse and search for ‘CSS text-orientation’ to get an in-depth insight into which browsers and specific browser version supports this feature. Sideways: All text(horizontal and vertical scripts) will be rotated sideways – 90deg clockwise.Upright: all characters will remain in upright orientation even if block-flow is vertical.Mixed: horizontal scripts will be rotated 90deg clockwise while vertical scripts remain unaffected.

Text-orientation: mixed | upright | sideways īy default, text-orientation is set to mix. It will not work if writing mode is set to horizontal(horizontal-tb). It can only be used when writing-mode is set to vertical(either vertical-rl or vertical-lr). Remember that text orientation needs to be used in conjunction with the writing-mode property. ‘text-orientation’ is a CSS property that defines the orientation of characters within a line. The method that we will focus upon in this blog is by the use of CSS text-orientation. This is where text-orientation property becomes indispensable. Another common use of vertical text-orientation can be in table headers. In such languages, even though the block-flow direction is sideways either left to right or right to left, letters or characters in a line flow vertically from top to bottom. However, many Asian languages like Mandarin or Japanese scripts can be written vertically, flowing from right to left or in case of Mongolian left to right. The necessity for vertical text-orientation might not seem evident at first and its use rather limited solely as a design aspect for web pages.

How to change text direction on word