{"id":326293,"date":"2020-11-27T07:53:18","date_gmt":"2020-11-27T15:53:18","guid":{"rendered":"https:\/\/css-tricks.com\/?page_id=326293"},"modified":"2020-12-01T09:18:41","modified_gmt":"2020-12-01T17:18:41","slug":"text-orientation","status":"publish","type":"page","link":"https:\/\/css-tricks.com\/almanac\/properties\/t\/text-orientation\/","title":{"rendered":"text-orientation"},"content":{"rendered":"\n
The For handling bi-directional text \u2014 a block that contains both left-to-right and right-to-left text, for example \u2014 check out the text-orientation<\/code> property in CSS aligns text in a line when working with a vertical
writing-mode<\/a><\/code>. Basically, it rotates either the line by 90\u00b0 clockwise to help control how vertical languages are displayed \u2014 much like the way
text-combine-upright<\/a><\/code> rotates groups of characters within a line of text in a vertical script, but for full lines of text.<\/p>\n\n\n\n
.element {\n text-orientation: mixed;\n writing-mode: vertical-rl; \n}<\/code><\/pre>\n\n\n\n
unicode-bidi<\/a><\/code> property. It\u2019s combined with the
direction<\/a><\/code> property to override how the browser decides to display the text.<\/p>\n\n\n\n\n\n\n
Syntax<\/h3>\n\n\n
text-orientation: mixed | upright | sideways<\/code><\/pre>\n\n\n\n
mixed<\/code><\/li>
Values<\/h3>\n\n\n
\/* Keyword values *\/\ntext-orientation: mixed; \/* default *\/\ntext-orientation: upright;\ntext-orientation: sideways;\ntext-orientation: sideways-right;\n\n\/* Global values *\/\ntext-orientation: inherit;\ntext-orientation: initial; \/* mixed *\/\ntext-orientation: unset;<\/code><\/pre>\n\n\n\n
mixed<\/code>: <\/strong>Default value. Characters in a horizontal script are rotated 90\u00b0 clockwise. Characters in a vertical script are displayed in their natural vertical orientation.<\/li>
upright<\/code>:<\/strong> Characters in a horizontal script are set in their natural horizontal upright position, including some glyphs. So, where a vertical writing mode may rotated a line of text so that characters are sideways, this value will rotate the characters themselves 90\u00b0 to their natural position. Note that this value forces the
direction<\/code> property into a used value of
ltr<\/code>, meaning all characters are treated as if they are in a left-to-right writing mode.<\/li>
sideways<\/code>:<\/strong> All text in a vertical writing mode is displayed sideways, as though it was in a horizontal layout, but the entire line is rotated 90\u00b0 clockwise.<\/li>
sideways-right<\/code>:<\/strong> Some browsers respect this value as an alias for the
sideways<\/code> value kept for backwards-compatibility.<\/li><\/ul>\n\n\n\n