{"id":24249,"date":"2019-03-21T12:15:48","date_gmt":"2019-03-21T10:15:48","guid":{"rendered":"https:\/\/www.webcodegeeks.com\/?p=24249"},"modified":"2019-03-18T14:08:27","modified_gmt":"2019-03-18T12:08:27","slug":"vertical-text-orientation-nightmare-browser-compatibility","status":"publish","type":"post","link":"https:\/\/www.webcodegeeks.com\/css\/vertical-text-orientation-nightmare-browser-compatibility\/","title":{"rendered":"Why Vertical Text Orientation Is A Nightmare For Cross Browser Compatibility?"},"content":{"rendered":"\n

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. 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. 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. Another common use of vertical text-orientation can be in table headers. This is where text-orientation property becomes indispensable.<\/p>\n\n\n\n

CSS Text-Orientation<\/h2>\n\n\n\n

The method that we will focus upon in this blog is by the use of CSS text-orientation. \u2018text-orientation\u2019<\/b> is a CSS property that defines the orientation of characters within a line. Remember that text orientation needs to be used in conjunction with the writing-mode property. It can only be used when writing-mode is set to vertical(either vertical-rl or vertical-lr). It will not work if writing mode is set to horizontal(horizontal-tb).<\/p>\n\n\n\n

Syntax:<\/b><\/p>\n\n\n\n

text-orientation:<\/b> mixed | upright | sideways;<\/p>\n\n\n\n

By default, text-orientation is set to mix.<\/p>\n\n\n\n