{"id":20517,"date":"2013-03-12T15:40:28","date_gmt":"2013-03-12T22:40:28","guid":{"rendered":"http:\/\/css-tricks.com\/?page_id=20517"},"modified":"2021-11-25T11:17:20","modified_gmt":"2021-11-25T19:17:20","slug":"unicode-bidi","status":"publish","type":"page","link":"https:\/\/css-tricks.com\/almanac\/properties\/u\/unicode-bidi\/","title":{"rendered":"unicode-bidi"},"content":{"rendered":"\n<p>The <code>unicode-bidi<\/code> property is one of two CSS properties that handle the rendering of bi-directional text in HTML and similar markup-based languages (eg <abbr title=\"eXtended Markup Language\">XML<\/abbr>). The other property is <a href=\"https:\/\/css-tricks.com\/almanac\/properties\/d\/direction\"><code>direction<\/code><\/a>, 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 single DOM element.<\/p>\n\n\n\n<pre rel=\"CSS\" class=\"wp-block-csstricks-code-block language-css\" data-line=\"\"><code markup=\"tt\">.bilingual-excerpt {\n    direction: rtl;\n    unicode-bidi: embed;\n}<\/code><\/pre>\n\n\n\n<p>The browser usually determines which direction inline text will flow, depending on the <code>lang<\/code> attribute of elements, the browser&#8217;s locale, and <code>font-family<\/code> of specific elements. <code>unicode-bidi<\/code> comes in handy when an element contains both LTR text and RTL text:<\/p>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\"><p>The user agent applies a complex algorithm defined by the Unicode standard to determine how the text should appear. This property specifically controls the embedding levels and overrides for the Unicode bidirectional algorithm.<\/p><\/blockquote>\n\n\n\n<p>The <code>unicode-bidi<\/code> property has three widely-supported values:<\/p>\n\n\n\n<ol><li>the \u201cnormal\u201d keyword, which offers no additional levels of embedded bi-directional text (the default browser behavior). An element with this property will only contain LTR or RTL text.<\/li><li>the \u201cembed\u201d keyword, which allows for bi-directional text in an element (for example, RTL text flowing amidst LTR text). This is determined by the <code>direction<\/code> property, and must be applied to an inline element.<\/li><li>the \u201cbidi-override\u201d keyword, which acts the same as \u201cembed\u201d when applied to inline elements. On block-level elements, it overrides the browser&#8217;s bi-directional text algorithm and flows the text inside any inline children strictly according to the <code>direction<\/code> property.<\/li><\/ol>\n\n\n<h3 class=\"wp-block-heading\" id=\"points-of-interest\">Points of interest<\/h3>\n\n\n<ul><li>The <code>unicode-bidi<\/code> property is \u201cis intended for DTD designers. Web designers and similar authors should not override it.\u201d Decide carefully if you need to use it.<\/li><li>While Internet Explorer technically supports <code>unicode-bidi<\/code> since version 5.5, there are \u201cserious bugs relating to floated elements\u201d and use is reliable in IE 8+ (see below)<\/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 ticss-1f9782cc\"><table><thead><tr><th class=\"has-text-align-center\" data-align=\"center\">Chrome<\/th><th class=\"has-text-align-center\" data-align=\"center\">Safari<\/th><th class=\"has-text-align-center\" data-align=\"center\">Firefox<\/th><th class=\"has-text-align-center\" data-align=\"center\">Opera<\/th><th class=\"has-text-align-center\" data-align=\"center\">IE<\/th><th class=\"has-text-align-center\" data-align=\"center\">Android<\/th><th>iOS<\/th><\/tr><\/thead><tbody><tr><td class=\"has-text-align-center\" data-align=\"center\">Works<\/td><td class=\"has-text-align-center\" data-align=\"center\">Works<\/td><td class=\"has-text-align-center\" data-align=\"center\">Works<\/td><td class=\"has-text-align-center\" data-align=\"center\">Works<\/td><td class=\"has-text-align-center\" data-align=\"center\">8.0+<\/td><td class=\"has-text-align-center\" data-align=\"center\">Works<\/td><td>Works<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n<h3 class=\"wp-block-heading\" id=\"other-resources\">Other resources<\/h3>\n\n\n<ul><li><a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/CSS\/unicode-bidi\" rel=\"noopener\">Mozilla Docs<\/a><\/li><li><a href=\"http:\/\/reference.sitepoint.com\/css\/unicode-bidi\" rel=\"noopener\">SitePoint<\/a><\/li><\/ul>\n\n\n<h3 class=\"wp-block-heading\" id=\"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-20517\">\n\n  <time datetime=\"2011-09-05\" title=\"Originally published Mar 12, 2013\">\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-20517\">\n\n  <time datetime=\"2020-11-25\" title=\"Originally published Mar 12, 2013\">\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-20517\">\n\n  <time datetime=\"2020-11-27\" title=\"Originally published Mar 12, 2013\">\n    <strong>\n                \n      Almanac\n      <\/strong>\n\n    on\n\n    Dec 1, 2020  <\/time>\n\n  <h3>\n    <a href=\"https:\/\/css-tricks.com\/almanac\/properties\/t\/text-orientation\/\">\n      text-orientation    <\/a>\n  <\/h3>\n\n      <a href=\"https:\/\/css-tricks.com\/almanac\/properties\/t\/text-orientation\/\" class=\"almanac-example\">\n      <code class=\"language-css\">element { text-orientation: mixed; }<\/code>\n    <\/a>\n  \n  \n  <div class=\"author-row\">\n    <a href=\"https:\/\/css-tricks.com\/author\/jwahirksundai\/\" aria-label=\"Author page of Jwahir Sundai\">\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\/2020\/11\/2m3kcqcZ7sl5xgLJtoXh0bw.jpeg?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\/jwahirksundai\/\">\n      Jwahir Sundai    <\/a>\n  <\/div>\n\n<\/article>\n<article class=\"in-article-card \" id=\"mini-post-20517\">\n\n  <time datetime=\"2016-08-13\" title=\"Originally published Mar 12, 2013\">\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 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 single DOM element. The browser [&hellip;]<\/p>\n","protected":false},"author":3,"featured_media":0,"parent":13951,"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":14047,"url":"https:\/\/css-tricks.com\/almanac\/properties\/d\/direction\/","url_meta":{"origin":20517,"position":0},"title":"direction","date":"September 5, 2011","format":false,"excerpt":"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. .main-content { direction: rtl; \/* Right to\u2026","rel":"","context":"With 14 comments","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":326293,"url":"https:\/\/css-tricks.com\/almanac\/properties\/t\/text-orientation\/","url_meta":{"origin":20517,"position":1},"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":325124,"url":"https:\/\/css-tricks.com\/almanac\/properties\/l\/line-break\/","url_meta":{"origin":20517,"position":2},"title":"line-break","date":"November 6, 2020","format":false,"excerpt":"The CSS line-break property defines how strictly to enforce rules for wrapping text wrapping on new lines, particularly when working with symbols and punctuations in Chinese, Japanese or Korean (CJK) writing systems. It is included in the CSS Text Module Level 3 specification, which is currently in Editor's Draft. .element\u2026","rel":"","context":"Similar post","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":203111,"url":"https:\/\/css-tricks.com\/almanac\/properties\/a\/all\/","url_meta":{"origin":20517,"position":3},"title":"all","date":"June 4, 2015","format":false,"excerpt":"The all property in CSS resets all of the selected element's properties, except the direction and unicode-bidi properties that control text direction. .module { all: unset; } The point of it is allowing for component-level resetting of styles. Sometimes it's far easier to start from scratch with styling rather than\u2026","rel":"","context":"With 5 comments","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":14119,"url":"https:\/\/css-tricks.com\/almanac\/properties\/t\/text-overflow\/","url_meta":{"origin":20517,"position":4},"title":"text-overflow","date":"September 6, 2011","format":false,"excerpt":"The text-overflow property in CSS deals with situations where text is clipped when it overflows the element's box. It can be clipped (i.e. cut off, hidden), display an ellipsis ('\u2026', Unicode Range Value U+2026) or display an author-defined string (no current browser support for author-defined strings). .ellipsis { text-overflow: ellipsis;\u2026","rel":"","context":"With 18 comments","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":259792,"url":"https:\/\/css-tricks.com\/almanac\/properties\/u\/unicode-range\/","url_meta":{"origin":20517,"position":5},"title":"unicode-range","date":"September 8, 2017","format":false,"excerpt":"The unicode-range property in CSS is used by the @font-face to define the characters that are supported by the font face. @font-face { font-family: 'MyWebFont'; \/* Define the custom font name *\/ src: url('myfont.woff2') format('woff2'), url('myfont.woff') format('woff'); \/* Define where the font can be downloaded *\/ unicode-range: U+00-FF; \/* Define\u2026","rel":"","context":"In \"unicode-range\"","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]}],"_links":{"self":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/20517"}],"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\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/comments?post=20517"}],"version-history":[{"count":6,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/20517\/revisions"}],"predecessor-version":[{"id":357853,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/20517\/revisions\/357853"}],"up":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/13951"}],"wp:attachment":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media?parent=20517"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/tags?post=20517"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}