{"id":244261,"date":"2016-08-13T09:33:53","date_gmt":"2016-08-13T16:33:53","guid":{"rendered":"http:\/\/css-tricks.com\/?page_id=244261"},"modified":"2021-07-15T09:40:42","modified_gmt":"2021-07-15T16:40:42","slug":"writing-mode","status":"publish","type":"page","link":"https:\/\/css-tricks.com\/almanac\/properties\/w\/writing-mode\/","title":{"rendered":"writing-mode"},"content":{"rendered":"\n<p>The <code>writing-mode<\/code> property changes the alignment of the text so that it can be read from top to bottom or from left to right, depending on the language. For example, let\u2019s say we want to add some text that is read from top to bottom and from right to left, like this:<\/p>\n\n\n\n<pre rel=\"CSS\" class=\"wp-block-csstricks-code-block language-css\" data-line=\"\"><code markup=\"tt\">.vertical-rl { writing-mode: vertical-rl; }<\/code><\/pre>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_PzyvbR\" src=\"\/\/codepen.io\/anon\/embed\/PzyvbR?height=450&amp;theme-id=1&amp;slug-hash=PzyvbR&amp;default-tab=result\" height=\"450\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed PzyvbR\" title=\"CodePen Embed PzyvbR\" class=\"cp_embed_iframe\" style=\"width:100%;overflow:hidden\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n\n<p>This is most useful in languages such as Chinese, Japanese or Korean where the text is often set vertically. In the English language, it\u2019s more likely that you\u2019ll want to use this property for aesthetics reasons, such as aligning a heading in a block of text like this:<\/p>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_YWBWGA\" src=\"\/\/codepen.io\/anon\/embed\/YWBWGA?height=450&amp;theme-id=1&amp;slug-hash=YWBWGA&amp;default-tab=result\" height=\"450\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed YWBWGA\" title=\"CodePen Embed YWBWGA\" class=\"cp_embed_iframe\" style=\"width:100%;overflow:hidden\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n<h3 class=\"wp-block-heading\" id=\"values\">Values<\/h3>\n\n\n<p>In the examples below I\u2019ve made the first letter of the text red, just so it\u2019s easier to see which direction you need to start reading.<\/p>\n\n\n<h4 class=\"wp-block-heading\" id=\"horizontaltb\">horizontal-tb<\/h4>\n\n\n<p>This is the default value of the property: text is read from left to right and top to bottom.<\/p>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_kXAdoN\" src=\"\/\/codepen.io\/anon\/embed\/kXAdoN?height=450&amp;theme-id=1&amp;slug-hash=kXAdoN&amp;default-tab=result\" height=\"450\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed kXAdoN\" title=\"CodePen Embed kXAdoN\" class=\"cp_embed_iframe\" style=\"width:100%;overflow:hidden\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n<h4 class=\"wp-block-heading\" id=\"verticalrl\">vertical-rl<\/h4>\n\n\n<p>Text is read from right to left and top to bottom:<\/p>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_AXJkRj\" src=\"\/\/codepen.io\/anon\/embed\/AXJkRj?height=450&amp;theme-id=1&amp;slug-hash=AXJkRj&amp;default-tab=result\" height=\"450\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed AXJkRj\" title=\"CodePen Embed AXJkRj\" class=\"cp_embed_iframe\" style=\"width:100%;overflow:hidden\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n<h4 class=\"wp-block-heading\" id=\"verticallr\">vertical-lr<\/h4>\n\n\n<p>Text is read from left to right and top to bottom:<\/p>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_BzqZRP\" src=\"\/\/codepen.io\/anon\/embed\/BzqZRP?height=450&amp;theme-id=1&amp;slug-hash=BzqZRP&amp;default-tab=result\" height=\"450\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed BzqZRP\" title=\"CodePen Embed BzqZRP\" class=\"cp_embed_iframe\" style=\"width:100%;overflow:hidden\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n<h3 class=\"wp-block-heading\" id=\"related-links\">Related links<\/h3>\n\n\n<ul><li><a href=\"http:\/\/generatedcontent.org\/post\/45384206019\/writing-modes\" rel=\"noopener\">Vertical text with CSS3 Writing Modes<\/a><\/li><li><a href=\"https:\/\/ishadeed.com\/article\/css-writing-mode\/\" rel=\"noopener\">Ahmad Shadeed on writing-mode<\/a><\/li><\/ul>\n\n\n<h3 class=\"wp-block-heading\" id=\"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=css-writing-mode\" 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\">8*<\/span><\/td><td class=\"y yep\" title=\"Firefox - \"><span class=\"caniuse-agents-version version\">41<\/span><\/td><td class=\"a yep-nope yep-nope-partial\" title=\"IE - \"><span class=\"caniuse-agents-version version\">11<\/span><\/td><td class=\"y yep\" title=\"Edge - \"><span class=\"caniuse-agents-version version\">12<\/span><\/td><td class=\"y yep\" title=\"Safari - \"><span class=\"caniuse-agents-version version\">5.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\">3*<\/span><\/td><td class=\"y yep\" title=\"iOS Safari - \"><span class=\"caniuse-agents-version version\">5.0-5.1*<\/span><\/td><\/tr><\/table><\/div><\/div>\n","protected":false},"excerpt":{"rendered":"<p>The writing-mode property changes the alignment of the text so that it can be read from top to bottom or from left to right, depending on the language. For example, let\u2019s say we want to add some text that is read from top to bottom and from right to left, like this: This is most [&hellip;]<\/p>\n","protected":false},"author":223806,"featured_media":0,"parent":13955,"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":352421,"url":"https:\/\/css-tricks.com\/almanac\/properties\/p\/padding-inline\/","url_meta":{"origin":244261,"position":0},"title":"padding-inline","date":"September 23, 2021","format":false,"excerpt":"padding-inline is a CSS logical shorthand property that combines the padding-inline-start and padding-inline-end properties into a single declaration, creating space around an element\u2019s content in the inline (left and right) direction. .element { padding-inline: 30px 60px; writing-mode: vertical-rl; \/* Determines the padding block direction *\/ } When we say that\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":352410,"url":"https:\/\/css-tricks.com\/almanac\/properties\/p\/padding-block\/","url_meta":{"origin":244261,"position":1},"title":"padding-block","date":"September 23, 2021","format":false,"excerpt":"padding-block is a CSS logical shorthand property that combines the padding-block-start and padding-block-end properties into a single declaration, creating space around an element\u2019s content in the block (top and bottom) direction. .element { padding-block: 30px 60px; writing-mode: vertical-rl; \/* Determines the padding block direction *\/ } When we say that\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":326293,"url":"https:\/\/css-tricks.com\/almanac\/properties\/t\/text-orientation\/","url_meta":{"origin":244261,"position":2},"title":"text-orientation","date":"November 27, 2020","format":false,"excerpt":"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\u2026","rel":"","context":"Similar post","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":322833,"url":"https:\/\/css-tricks.com\/almanac\/properties\/i\/inset-block\/","url_meta":{"origin":244261,"position":3},"title":"inset-block","date":"October 9, 2020","format":false,"excerpt":"inset-block is a shorthand logical CSS property that sets the length that an element is offset in the block direction combining inset-block-start and inset-block-end. It's sort of like declaring top and bottom except its starting and ending points are determined by the element's direction, text-orientation and writing-mode, just like other\u2026","rel":"","context":"Similar post","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":350993,"url":"https:\/\/css-tricks.com\/almanac\/properties\/b\/border-inline\/","url_meta":{"origin":244261,"position":4},"title":"border-inline","date":"September 2, 2021","format":false,"excerpt":"border-inline is a CSS logical shorthand property that combines border-inline-color, border-inline-style, and border-inline-width into a single declaration, styling an element's borders in the inline (left and right) direction. .element { border-inline: 5px solid red; writing-mode: horizontal-tb; } border-inline is the logical equivalent to physical properties including border-left and border-right (or\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":350928,"url":"https:\/\/css-tricks.com\/almanac\/properties\/b\/border-block\/","url_meta":{"origin":244261,"position":5},"title":"border-block","date":"September 2, 2021","format":false,"excerpt":"border-block is a CSS logical shorthand property that combines border-block-color, border-block-style, and border-block-width into a single declaration. .element { border-block: 5px solid red; writing-mode: horizontal-tb; } border-block is the logical equivalent to physical properties including border-top and border-bottom (or border-right and border-left, depending on the writing-mode). It is defined in\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":[]}],"_links":{"self":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/244261"}],"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\/223806"}],"replies":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/comments?post=244261"}],"version-history":[{"count":10,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/244261\/revisions"}],"predecessor-version":[{"id":344806,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/244261\/revisions\/344806"}],"up":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/13955"}],"wp:attachment":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media?parent=244261"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/tags?post=244261"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}