{"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<p>The <code>text-orientation<\/code> property in CSS aligns text in a line when working with a vertical <code><a href=\"https:\/\/css-tricks.com\/almanac\/properties\/w\/writing-mode\/\">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 <code><a href=\"https:\/\/css-tricks.com\/text-combine-upright\">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<pre rel=\"CSS\" class=\"wp-block-csstricks-code-block language-css\" data-line=\"2\"><code markup=\"tt\">.element {\n  text-orientation: mixed;\n  writing-mode: vertical-rl; \n}<\/code><\/pre>\n\n\n\n<p>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 <code><a href=\"https:\/\/css-tricks.com\/almanac\/properties\/u\/unicode-bidi\/\">unicode-bidi<\/a><\/code> property. It\u2019s combined with the <code><a href=\"https:\/\/css-tricks.com\/almanac\/properties\/d\/direction\">direction<\/a><\/code> property to override how the browser decides to display the text.<\/p>\n\n\n\n<!--more-->\n\n\n<h3 class=\"wp-block-heading\" id=\"h-syntax\">Syntax<\/h3>\n\n\n<pre rel=\"CSS\" class=\"wp-block-csstricks-code-block language-css\" data-line=\"\"><code markup=\"tt\">text-orientation: mixed | upright | sideways<\/code><\/pre>\n\n\n\n<ul class=\"ticss-e6306908\"><li><strong>Initial:<\/strong> <code>mixed<\/code><\/li><li><strong>Applies to:<\/strong> all elements except table row groups, rows, column groups, and columns<\/li><li><strong>Inherited:<\/strong> yes<\/li><li><strong>Percentages:<\/strong> n\/a<\/li><li><strong>Computed value:<\/strong> specified value<\/li><li><strong>Animation type:<\/strong> not animatable<\/li><\/ul>\n\n\n<h3 class=\"wp-block-heading\" id=\"h-values\">Values<\/h3>\n\n\n<pre rel=\"CSS\" class=\"wp-block-csstricks-code-block language-css\" data-line=\"\"><code markup=\"tt\">\/* 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<ul><li><strong><code>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><li><strong><code>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 <code>direction<\/code> property into a used value of <code>ltr<\/code>, meaning all characters are treated as if they are in a left-to-right writing mode.<\/li><li><strong><code>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><li><strong><code>sideways-right<\/code>:<\/strong> Some browsers respect this value as an alias for the <code>sideways<\/code> value kept for backwards-compatibility.<\/li><\/ul>\n\n\n\n<p class=\"explanation\"><code><a href=\"https:\/\/drafts.csswg.org\/css-writing-modes-3\/#glyph-orientation\" rel=\"noopener\">use-glyph-orientation<\/a><\/code> was removed as a keyword value in the December 2015. It was used on SVG elements to define SVG properties <code>glyph-orientation-vertical<\/code> and <code>glyph-orientation-horizontal<\/code> which are now deprecated. <code>glyph-orientation-vertical<\/code> is now an alias for <code>text-orientation<\/code>.<\/p>\n\n\n<h3 class=\"wp-block-heading\" id=\"h-browser-support\">Browser support<\/h3>\n\n<div class=\"caniuse\"><div class=\"caniuse-header\"><p>This browser support data is from <a href=\"http:\/\/caniuse.com\/#feat=\u201dcss-text-orientation\u201d\" rel=\"noopener\">Caniuse<\/a>, which has more detail. A number indicates that browser supports the feature at that version and up.<\/p><\/div><div class=\"caniuse-section\"><h4>Desktop<\/h4><table class=\"browser-support-table\"><thead><tr><th class=\"chrome\"><span>Chrome<\/span><\/th><th class=\"firefox\"><span>Firefox<\/span><\/th><th class=\"ie\"><span>IE<\/span><\/th><th class=\"edge\"><span>Edge<\/span><\/th><th class=\"safari\"><span>Safari<\/span><\/th><\/tr><\/thead><tbody><tr><td class=\"y yep\" title=\"Chrome - \"><span class=\"caniuse-agents-version version\">48<\/span><\/td><td class=\"y yep\" title=\"Firefox - \"><span class=\"caniuse-agents-version version\">41<\/span><\/td><td class=\"n nope\" title=\"IE - \"><span class=\"caniuse-agents-version version\">No<\/span><\/td><td class=\"y yep\" title=\"Edge - \"><span class=\"caniuse-agents-version version\">79<\/span><\/td><td class=\"y yep\" title=\"Safari - \"><span class=\"caniuse-agents-version version\">10.1*<\/span><\/td><\/tr><\/table><\/div><div class=\"caniuse-section\"><h4>Mobile \/ Tablet<\/h4><table class=\"browser-support-table\"><thead><tr><th class=\"and_chr\"><span>Android Chrome<\/span><\/th><th class=\"and_ff\"><span>Android Firefox<\/span><\/th><th class=\"android\"><span>Android<\/span><\/th><th class=\"ios_saf\"><span>iOS Safari<\/span><\/th><\/tr><\/thead><tbody><tr><td class=\"y yep\" title=\"Android Chrome - \"><span class=\"caniuse-agents-version version\">124<\/span><\/td><td class=\"y yep\" title=\"Android Firefox - \"><span class=\"caniuse-agents-version version\">125<\/span><\/td><td class=\"y yep\" title=\"Android - \"><span class=\"caniuse-agents-version version\">124<\/span><\/td><td class=\"y yep\" title=\"iOS Safari - \"><span class=\"caniuse-agents-version version\">10.0-10.2<\/span><\/td><\/tr><\/table><\/div><\/div>\n\n\n<h1 class=\"wp-block-heading\" id=\"h-demo\">Demo<\/h1>\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_jOMNqzr\" src=\"\/\/codepen.io\/anon\/embed\/jOMNqzr?height=500&amp;theme-id=1&amp;slug-hash=jOMNqzr&amp;default-tab=result\" height=\"500\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed jOMNqzr\" title=\"CodePen Embed jOMNqzr\" class=\"cp_embed_iframe\" style=\"width:100%;overflow:hidden\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n<h3 class=\"wp-block-heading\" id=\"h-specification\">Specification<\/h3>\n\n\n<ul><li><a href=\"https:\/\/drafts.csswg.org\/css-writing-modes-3\/#text-orientation\" rel=\"noopener\">CSS Writing Modes Level 3<\/a> (Editor\u2019s draft)<\/li><\/ul>\n\n\n<h3 class=\"wp-block-heading\" id=\"h-more-information\">More information<\/h3>\n\n\n<ul><li><a href=\"https:\/\/www.lambdatest.com\/blog\/why-developers-still-hate-vertical-text-orientation-in-css\/\" rel=\"noopener\">Why Vertical Text Orientation Is A Nightmare For Cross Browser Compatibility?<\/a> by Nikhil \u2014 A thorough explanation of <code>text-orientation<\/code> and <code>writing-mode<\/code>.<\/li><li><a href=\"https:\/\/webdesign.tutsplus.com\/tutorials\/easily-create-sideways-text-using-the-writing-mode-css-property--cms-31829\" rel=\"noopener\">Easily Create Sideways Text Using the \u201cwriting-mode\u201d CSS Property<\/a> by Adi Purdila \u2014 Explore different approaches in addition to using <code>text-orientation<\/code>.<\/li><li><a href=\"https:\/\/code-boxx.com\/vertical-text-css\/\" rel=\"noopener\">2 Ways to Create Vertical Text in CSS<\/a> by W.S. Toh \u2014 A more direct comparison between approaches using <code>writing-mode<\/code> and <code>text-orientation<\/code>.<\/li><li><a href=\"https:\/\/css-tricks.com\/snippets\/css\/text-rotation\/\">Text Rotation<\/a> by Chris Coyier \u2014 An approach to vertical text using <code>transform<\/code> instead of <code>writing-mode<\/code> or <code>text-orientation<\/code>.<\/li><\/ul>\n\n\n<h3 class=\"wp-block-heading\" id=\"h-related-properties\"> Related properties<\/h3>\n\n\n    \t\t\n    <div class=\"in-article-cards\">\n      <article class=\"in-article-card \" id=\"mini-post-326293\">\n\n  <time datetime=\"2011-09-05\" title=\"Originally published Nov 27, 2020\">\n    <strong>\n                \n      Almanac\n      <\/strong>\n\n    on\n\n    Mar 29, 2021  <\/time>\n\n  <h3>\n    <a href=\"https:\/\/css-tricks.com\/almanac\/properties\/d\/direction\/\">\n      direction    <\/a>\n  <\/h3>\n\n      <a href=\"https:\/\/css-tricks.com\/almanac\/properties\/d\/direction\/\" class=\"almanac-example\">\n      <code class=\"language-css\">.element { direction: rtl; }<\/code>\n    <\/a>\n  \n  \n  <div class=\"author-row\">\n    <a href=\"https:\/\/css-tricks.com\/author\/saracope\/\" aria-label=\"Author page of Sara Cope\">\n      <img alt='' src='https:\/\/secure.gravatar.com\/avatar\/84da92f298e5b124d92fb581b82cfdf4?s=80&#038;d=retro&#038;r=pg' srcset='https:\/\/secure.gravatar.com\/avatar\/84da92f298e5b124d92fb581b82cfdf4?s=160&#038;d=retro&#038;r=pg 2x' class='avatar avatar-80 photo' height='80' width='80' \/>    <\/a>\n  \n    <a class=\"author-name\" href=\"https:\/\/css-tricks.com\/author\/saracope\/\">\n      Sara Cope    <\/a>\n  <\/div>\n\n<\/article>\n<article class=\"in-article-card \" id=\"mini-post-326293\">\n\n  <time datetime=\"2020-11-25\" title=\"Originally published Nov 27, 2020\">\n    <strong>\n                \n      Almanac\n      <\/strong>\n\n    on\n\n    Jul 15, 2021  <\/time>\n\n  <h3>\n    <a href=\"https:\/\/css-tricks.com\/almanac\/properties\/t\/text-combine-upright\/\">\n      text-combine-upright    <\/a>\n  <\/h3>\n\n      <a href=\"https:\/\/css-tricks.com\/almanac\/properties\/t\/text-combine-upright\/\" class=\"almanac-example\">\n      <code class=\"language-css\">span { text-combine-upright: all; }<\/code>\n    <\/a>\n  \n  \n  <div class=\"author-row\">\n    <a href=\"https:\/\/css-tricks.com\/author\/geoffgraham\/\" aria-label=\"Author page of Geoff Graham\">\n      <img alt='' src='https:\/\/secure.gravatar.com\/avatar\/1a1b5ca4b139c0c8caaea26ef437d943?s=80&#038;d=retro&#038;r=pg' srcset='https:\/\/secure.gravatar.com\/avatar\/1a1b5ca4b139c0c8caaea26ef437d943?s=160&#038;d=retro&#038;r=pg 2x' class='avatar avatar-80 photo' height='80' width='80' \/>    <\/a>\n  \n    <a class=\"author-name\" href=\"https:\/\/css-tricks.com\/author\/geoffgraham\/\">\n      Geoff Graham    <\/a>\n  <\/div>\n\n<\/article>\n<article class=\"in-article-card \" id=\"mini-post-326293\">\n\n  <time datetime=\"2013-03-12\" title=\"Originally published Nov 27, 2020\">\n    <strong>\n                \n      Almanac\n      <\/strong>\n\n    on\n\n    Nov 25, 2021  <\/time>\n\n  <h3>\n    <a href=\"https:\/\/css-tricks.com\/almanac\/properties\/u\/unicode-bidi\/\">\n      unicode-bidi    <\/a>\n  <\/h3>\n\n      <a href=\"https:\/\/css-tricks.com\/almanac\/properties\/u\/unicode-bidi\/\" class=\"almanac-example\">\n      <code class=\"language-css\">.element { unicode-bidi: embed; }<\/code>\n    <\/a>\n  \n  \n  <div class=\"author-row\">\n    <a href=\"https:\/\/css-tricks.com\/author\/chriscoyier\/\" aria-label=\"Author page of Chris Coyier\">\n      <img alt='' src='https:\/\/secure.gravatar.com\/avatar\/8081b26e05bb4354f7d65ffc34cbbd67?s=80&#038;d=retro&#038;r=pg' srcset='https:\/\/secure.gravatar.com\/avatar\/8081b26e05bb4354f7d65ffc34cbbd67?s=160&#038;d=retro&#038;r=pg 2x' class='avatar avatar-80 photo' height='80' width='80' \/>    <\/a>\n  \n    <a class=\"author-name\" href=\"https:\/\/css-tricks.com\/author\/chriscoyier\/\">\n      Chris Coyier    <\/a>\n  <\/div>\n\n<\/article>\n<article class=\"in-article-card \" id=\"mini-post-326293\">\n\n  <time datetime=\"2016-08-13\" title=\"Originally published Nov 27, 2020\">\n    <strong>\n                \n      Almanac\n      <\/strong>\n\n    on\n\n    Jul 15, 2021  <\/time>\n\n  <h3>\n    <a href=\"https:\/\/css-tricks.com\/almanac\/properties\/w\/writing-mode\/\">\n      writing-mode    <\/a>\n  <\/h3>\n\n      <a href=\"https:\/\/css-tricks.com\/almanac\/properties\/w\/writing-mode\/\" class=\"almanac-example\">\n      <code class=\"language-css\">.element { writing-mode: vertical-rl; }<\/code>\n    <\/a>\n  \n  \n  <div class=\"author-row\">\n    <a href=\"https:\/\/css-tricks.com\/author\/robinrendle\/\" aria-label=\"Author page of Robin Rendle\">\n      <img loading=\"lazy\" decoding=\"async\" alt=\"\" class=\"avatar avatar-80 photo avatar-default\" height=\"80\" src=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2019\/01\/me-black-white.jpg?resize=80%2C80&#038;ssl=1\" width=\"80\"  data-recalc-dims=\"1\">    <\/a>\n  \n    <a class=\"author-name\" href=\"https:\/\/css-tricks.com\/author\/robinrendle\/\">\n      Robin Rendle    <\/a>\n  <\/div>\n\n<\/article>\n    <\/div>\n  \n","protected":false},"excerpt":{"rendered":"<p>The text-orientation property in CSS aligns text in a line when working with a vertical writing-mode. 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 rotates groups of characters within a line of text in a vertical script, but for full [&hellip;]<\/p>\n","protected":false},"author":279694,"featured_media":0,"parent":13949,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"page-almanac-single.php","meta":{"_bbp_topic_count":0,"_bbp_reply_count":0,"_bbp_total_topic_count":0,"_bbp_total_reply_count":0,"_bbp_voice_count":0,"_bbp_anonymous_reply_count":0,"_bbp_topic_count_hidden":0,"_bbp_reply_count_hidden":0,"_bbp_forum_subforum_count":0,"sig_custom_text":"","sig_image_type":"featured-image","sig_custom_image":0,"sig_is_disabled":false,"inline_featured_image":false,"c2c_always_allow_admin_comments":false,"footnotes":""},"tags":[],"acf":[],"jetpack-related-posts":[{"id":326099,"url":"https:\/\/css-tricks.com\/almanac\/properties\/t\/text-combine-upright\/","url_meta":{"origin":326293,"position":0},"title":"text-combine-upright","date":"November 25, 2020","format":false,"excerpt":"The text-combine-upright CSS property combines characters into the space of one character. The spec calls this \"horizontal-in-vertical\" composition which is a nice way of describing the use case: situations where you may need some characters in a vertical writing mode to display horizontally on the same line. span { text-combine-upright:\u2026","rel":"","context":"Similar post","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/11\/text-combine-upright-ex.png?resize=350%2C200&ssl=1","width":350,"height":200},"classes":[]},{"id":323112,"url":"https:\/\/css-tricks.com\/almanac\/properties\/i\/inline-size\/","url_meta":{"origin":326293,"position":1},"title":"inline-size","date":"October 14, 2020","format":false,"excerpt":"inline-size is a logical property that defines the width of an element when the writing-mode is horizontal, or the height of the element when the writing-mode is vertical. .element { \u00a0 inline-size: 700px; \u00a0 writing-mode: vertical-lr; } As you might have guessed by the example above, the writing-mode property changes\u2026","rel":"","context":"Similar post","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":324840,"url":"https:\/\/css-tricks.com\/almanac\/properties\/m\/max-inline-size\/","url_meta":{"origin":326293,"position":2},"title":"max-inline-size","date":"November 3, 2020","format":false,"excerpt":"max-inline-size is a logical property in CSS that defines the maximum width of an element when the writing-mode is horizontal, or the maximum height of the element when the writing-mode is vertical. .element { \u00a0 max-inline-size: 500px; \u00a0 writing-mode: vertical-lr; } CodePen Embed Fallback As you might have guessed by\u2026","rel":"","context":"Similar post","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":350477,"url":"https:\/\/css-tricks.com\/almanac\/properties\/b\/block-size\/","url_meta":{"origin":326293,"position":3},"title":"block-size","date":"August 25, 2021","format":false,"excerpt":"block-size is a CSS logical property that defines the height of an element when the writing-mode is horizontal, or the width of the element when the writing-mode is vertical. .element { block-size: 700px; writing-mode: vertical-lr; } block-size is defined in the CSS Logical Properties and Values Level 1 specification which\u2026","rel":"","context":"Similar post","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2019\/12\/css-tricks-logo-gradient-outline.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":345824,"url":"https:\/\/css-tricks.com\/almanac\/properties\/t\/text-emphasis\/","url_meta":{"origin":326293,"position":4},"title":"text-emphasis","date":"August 4, 2021","format":false,"excerpt":"The text-emphasis property in CSS, as the name implies, is used to emphasize text in CSS. It does it by applying special marks to an element\u2019s text. .element { text-emphasis: circle red; } You might think of text emphasis as italic or bold, but that\u2019s not this! With the special\u2026","rel":"","context":"Similar post","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":198664,"url":"https:\/\/css-tricks.com\/almanac\/properties\/t\/text-underline-position\/","url_meta":{"origin":326293,"position":5},"title":"text-underline-position","date":"April 3, 2015","format":false,"excerpt":"The text-underline-position property sets the placement of the underline on links or on text with text-decoration: underline; applied. .element { text-underline-position: under; } Values These are the values specified in the W3C CSS Text Decoration Module Level 3 Candidate Recommendation: auto: the default. The browser will decide between placing the\u2026","rel":"","context":"With 1 comment","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]}],"_links":{"self":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/326293"}],"collection":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/users\/279694"}],"replies":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/comments?post=326293"}],"version-history":[{"count":7,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/326293\/revisions"}],"predecessor-version":[{"id":326461,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/326293\/revisions\/326461"}],"up":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/13949"}],"wp:attachment":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media?parent=326293"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/tags?post=326293"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}