{"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=https://css-tricks.com/"////codepen.io//anon//embed//PzyvbR?height=450&amp;theme-id=1&amp;slug-hash=PzyvbR&amp;default-tab=result\%22 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=https://css-tricks.com/"////codepen.io//anon//embed//YWBWGA?height=450&amp;theme-id=1&amp;slug-hash=YWBWGA&amp;default-tab=result\%22 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=https://css-tricks.com/"////codepen.io//anon//embed//kXAdoN?height=450&amp;theme-id=1&amp;slug-hash=kXAdoN&amp;default-tab=result\%22 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=https://css-tricks.com/"////codepen.io//anon//embed//AXJkRj?height=450&amp;theme-id=1&amp;slug-hash=AXJkRj&amp;default-tab=result\%22 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=https://css-tricks.com/"////codepen.io//anon//embed//BzqZRP?height=450&amp;theme-id=1&amp;slug-hash=BzqZRP&amp;default-tab=result\%22 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=https://css-tricks.com/"http:////generatedcontent.org//post//45384206019//writing-modes/" rel=\"noopener\">Vertical text with CSS3 Writing Modes<\/a><\/li><li><a href=https://css-tricks.com/"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=https://css-tricks.com/"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\">126<\/span><\/td><td class=\"y yep\" title=\"Android Firefox - \"><span class=\"caniuse-agents-version version\">127<\/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 [&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":{"_acf_changed":false,"_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":"","_share_on_mastodon":"0","_share_on_mastodon_status":"%title% %permalink%"},"tags":[],"acf":[],"share_on_mastodon":{"url":"","error":""},"jetpack_sharing_enabled":true,"jetpack-related-posts":[],"_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}]}}