{"id":14047,"date":"2011-09-05T20:41:56","date_gmt":"2011-09-06T03:41:56","guid":{"rendered":"http:\/\/css-tricks.com\/?page_id=14047"},"modified":"2021-03-29T08:10:00","modified_gmt":"2021-03-29T15:10:00","slug":"direction","status":"publish","type":"page","link":"https:\/\/css-tricks.com\/almanac\/properties\/d\/direction\/","title":{"rendered":"direction"},"content":{"rendered":"\n<p>The <code>direction<\/code> property in CSS sets the direction of of content flow within a block-level element. This applies to text, inline, and inline-block elements. It also sets the default alignment of text and the direction that table cells flow within a table row.<\/p>\n\n\n\n<pre rel=\"CSS\" class=\"wp-block-csstricks-code-block language-css\" data-line=\"\"><code markup=\"tt\">.main-content {\n  direction: rtl;  \/* Right to Left *\/\n}<\/code><\/pre>\n\n\n\n<p>The valid values are:<\/p>\n\n\n\n<ul><li><code>ltr<\/code> &#8211; Left to Right, the default<\/li><li><code>rtl<\/code> &#8211; Right to Left<\/li><li><code>inherit<\/code> &#8211; inherits its value from the parent element<\/li><\/ul>\n\n\n\n<p>The text on this page is set in the default <code>ltr<\/code> direction. The most common use case to set <code>rtl<\/code> is for web pages with Hebrew or Arabic text. Here is an example of Arabic set in rtl:<\/p>\n\n\n\n<p class=\"example-rtl ticss-1a6468c8\">\u0637\u0647\u064a\u0633 \u064a\u0633 \u062a\u0622\u062e\u062a \u062a\u0647\u0627\u062a \u064a\u0633 \u0648\u0631\u064a\u062a\u062a\u0622\u0646 \u0641\u0631\u0648\u0645 \u0631\u064a\u063a\u062a \u062a\u0648 \u0644\u0622\u0641\u062a \u062a\u0647\u0627\u062a \u064a\u0633 \u0648\u0633\u0622\u062f<\/p>\n\n\n\n<p>There is an HTML attribute for setting the direction as well:<\/p>\n\n\n\n<pre rel=\"HTML\" class=\"wp-block-csstricks-code-block language-markup\" data-line=\"\"><code markup=\"tt\">&lt;p dir=\"rtl\">This paragraph goes from right to left.&lt;\/p><\/code><\/pre>\n\n\n\n<p>Both the CSS property and the HTML attribute will cascade the direction to descendent elements. It is recommended you use the HTML attribute, as that will work even if CSS fails or doesn&#8217;t affect the page for any reason.<\/p>\n\n\n\n<p>There is also a specific HTML tag that can be used for changing the direction of text: <code><bdo><\/bdo><\/code> the <em>bidirectional override element<\/em>. This exists so there is a semantics-free element to use just for this purpose. For instance:<\/p>\n\n\n\n<pre rel=\"HTML\" class=\"wp-block-csstricks-code-block language-markup\" data-line=\"\"><code markup=\"tt\">&lt;bdo dir=\"rtl\">This text will go right to left.&lt;\/bdo><\/code><\/pre>\n\n\n\n<p>To pair all this with CSS&#8230;<\/p>\n\n\n\n<pre rel=\"CSS\" class=\"wp-block-csstricks-code-block language-css\" data-line=\"\"><code markup=\"tt\">*[dir=\"ltr\"] { direction: ltr; unicode-bidi: embed; }\n\n*[dir=\"rtl\"] { direction: rtl; unicode-bidi: embed; }\n\nbdo[dir=\"ltr\"] { direction: ltr; unicode-bidi: bidi-override; }\n\nbdo[dir=\"rtl\"] { direction: rtl; unicode-bidi: bidi-override; }<\/code><\/pre>\n\n\n\n<p>&#8220;bidi&#8221; = &#8220;bi-directional&#8221;<\/p>\n\n\n\n<p>When creating layouts in a pre-flexbox pre-grid world, people often chose between floats and inline-block to create columns. One advantage to inline-block, other than removing the need to clear the float, is that changing the direction property reverses the layout as well. This isn&#8217;t true for floats, which would need to be reset if a webpage supports multiple languages and the language direction changed from ltr to rtl or vice versa.<\/p>\n\n\n\n<p>If you need to change the direction of an inline element (against what its parent block level element is), you&#8217;ll either need to use the <bdo> element, or ensure the inline element sets the <code>unicode-bidi<\/code> property properly:<\/bdo><\/p>\n\n\n\n<pre rel=\"HTML\" class=\"wp-block-csstricks-code-block language-markup\" data-line=\"\"><code markup=\"tt\">Some regular text &lt;bdo dir=\"rtl\">reverse direction&lt;\/bdo> text text &lt;span dir=\"rtl\">reverse direction&lt;\/span>\n<\/code><\/pre>\n\n\n\n<pre rel=\"CSS\" class=\"wp-block-csstricks-code-block language-css\" data-line=\"\"><code markup=\"tt\">span[dir] {\n  unicode-bidi: bidi-override;\n}<\/code><\/pre>\n\n\n<h3 class=\"wp-block-heading\" id=\"related-properties\">Related Properties<\/h3>\n\n\n<ul><li><a href=\"https:\/\/css-tricks.com\/almanac\/properties\/u\/unicode-bidi\/\"><code>unicode-bidi<\/code><\/a><\/li><\/ul>\n\n\n<h3 class=\"wp-block-heading\" id=\"other-resources\">Other Resources<\/h3>\n\n\n<ul><li><a href=\"http:\/\/dev.w3.org\/csswg\/css3-writing-modes\/#direction\" rel=\"noopener\">W3C spec<\/a><\/li><li><a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/CSS\/direction\" rel=\"noopener\">MDN docs<\/a><\/li><li><a href=\"http:\/\/www.w3.org\/International\/questions\/qa-bidi-css-markup\" rel=\"noopener\">W3C CSS vs. Markup for bidi support<\/a><\/li><\/ul>\n\n\n<h3 class=\"wp-block-heading\" id=\"browser-support\">Browser Support<\/h3>\n\n\n<figure class=\"wp-block-table browser-support-table\"><table><thead><tr><th>Chrome<\/th><th>Safari<\/th><th>Firefox<\/th><th>Opera<\/th><th>IE<\/th><th>Android<\/th><th>iOS<\/th><\/tr><\/thead><tbody><tr><td>2.0+<\/td><td>1.3+<\/td><td>Any<\/td><td>9.2+<\/td><td>5.5+<\/td><td>Any<\/td><td>3.1+<\/td><\/tr><\/tbody><\/table><\/figure>\n","protected":false},"excerpt":{"rendered":"<p>The direction property in CSS sets the direction of of content flow within a block-level element. This applies to text, inline, and inline-block elements. It also sets the default alignment of text and the direction that table cells flow within a table row. The valid values are: ltr &#8211; Left to Right, the default rtl [&hellip;]<\/p>\n","protected":false},"author":1036,"featured_media":0,"parent":13917,"menu_order":0,"comment_status":"open","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":336695,"url":"https:\/\/css-tricks.com\/almanac\/properties\/j\/justify-self\/","url_meta":{"origin":14047,"position":0},"title":"justify-self","date":"March 18, 2021","format":false,"excerpt":"The justify-self property in CSS sets the justification of an element within its containing block. Its behavior depends on the display of the containing block. For example, if the containing block is a grid container (i.e. display: grid), we can justify the element in it along the \"inline\" axis (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":20517,"url":"https:\/\/css-tricks.com\/almanac\/properties\/u\/unicode-bidi\/","url_meta":{"origin":14047,"position":1},"title":"unicode-bidi","date":"March 12, 2013","format":false,"excerpt":"The unicode-bidi property is one of two CSS properties that handle the rendering of bi-directional text in HTML and similar markup-based languages (eg XML). The other property is direction, and the two are used together to create levels of embedded text with different text directions (right-to-left and left-to-right) in a\u2026","rel":"","context":"With 2 comments","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":317104,"url":"https:\/\/css-tricks.com\/almanac\/properties\/i\/inset\/","url_meta":{"origin":14047,"position":2},"title":"inset","date":"July 17, 2020","format":false,"excerpt":"The inset property in CSS is a shorthand for the four inset properties, top, right, bottom and left in one declaration. Just like the four individual properties themselves, inset has no effect on non-positioned (static) elements. In other words, an element must declare an explicit position value before inset properties\u2026","rel":"","context":"Similar post","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":322864,"url":"https:\/\/css-tricks.com\/almanac\/properties\/i\/inset-inline-start\/","url_meta":{"origin":14047,"position":3},"title":"inset-inline-start","date":"October 9, 2020","format":false,"excerpt":"inset-inline-start is a CSS property that sets the length that an element is offset in the starting inline direction. It's sort of like declaring left in that it applies to positioned elements and offsets an element in the left direction, except its starting and ending points can changed based on\u2026","rel":"","context":"Similar post","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":322898,"url":"https:\/\/css-tricks.com\/almanac\/properties\/i\/inset-inline-end\/","url_meta":{"origin":14047,"position":4},"title":"inset-inline-end","date":"October 9, 2020","format":false,"excerpt":"inset-inline-end is a CSS property that sets the length that an element is offset in the starting inline direction. It's sort of like declaring right in that it applies to positioned elements and offsets an element in the left direction, except its starting and ending points can changed based on\u2026","rel":"","context":"Similar post","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":352421,"url":"https:\/\/css-tricks.com\/almanac\/properties\/p\/padding-inline\/","url_meta":{"origin":14047,"position":5},"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":[]}],"_links":{"self":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/14047"}],"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\/1036"}],"replies":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/comments?post=14047"}],"version-history":[{"count":9,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/14047\/revisions"}],"predecessor-version":[{"id":337260,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/14047\/revisions\/337260"}],"up":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/13917"}],"wp:attachment":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media?parent=14047"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/tags?post=14047"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}