{"id":4391,"date":"2016-06-20T00:00:00","date_gmt":"2016-06-20T00:00:00","guid":{"rendered":"https:\/\/www.globalizationpartners.com\/2016\/06\/20\/localization-for-rtl-languages\/"},"modified":"2021-01-05T12:35:35","modified_gmt":"2021-01-05T12:35:35","slug":"localization-for-rtl-languages","status":"publish","type":"post","link":"https:\/\/www.globalizationpartners.com\/2016\/06\/20\/localization-for-rtl-languages\/","title":{"rendered":"Localization for RTL Languages"},"content":{"rendered":"<p>Sometimes simply translating website content into another language isn&#8217;t enough. For many markets with complicated languages, localization is an essential aspect of website translation. Non-Latin characters, right-to-left (RTL) languages, and text expansion are some of the factors which must be considered for languages like Chinese, Arabic and German.<\/p>\n<p>Arabic, a popular RTL language, is <a href=\"https:\/\/www.internetworldstats.com\/stats7.htm\">the 4th most spoken language<\/a>, with 26 Arabic-speaking countries. Other RTL languages include: Hebrew, Persian and Urdu.<\/p>\n<p>In this blog, I will cover some tips for localizing RTL languages.<\/p>\n<h5><strong>Quick Tips<\/strong><\/h5>\n<p>1. Add &#8220;<code>dir=rtl<\/code>&#8221; to the HTML tag, this leads to right-aligned text and mirror-imaging of things like page and table layout, which cascades down through all the elements on the page. There is also a CSS direction property that changes the text flow of block level elements and text but does not affect the layout of the page.<\/p>\n<p>&nbsp;<\/p>\n<p>Direction &#8220;dir&#8221; also specifies the directionality of tables.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.globalizationpartners.com\/wp-content\/uploads\/2018\/07\/gpi-rtl-home_350x116.jpg\" alt=\"GPI-rtl-1\" width=\"350\" height=\"116\" \/><\/p>\n<p>When direction is used for tables, it displays as below:<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.globalizationpartners.com\/wp-content\/uploads\/2018\/07\/gpi-rtl-2_349x117.jpg\" alt=\"gpi-rtl-2\" width=\"349\" height=\"117\" \/><\/p>\n<p>2. Mirroring your layout means that things on the left should be on the right and vice versa. This includes floats, <code>::before<\/code> and\u00a0<code>::after<\/code> elements, margins and padding.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.globalizationpartners.com\/wp-content\/uploads\/2018\/07\/gpi-rtl-3_350x233.jpg\" alt=\"gpi-rtl-3\" width=\"350\" height=\"233\" \/><\/p>\n<p>3. Use the UTF-8 (Unicode) character encoding for content, databases, etc.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.globalizationpartners.com\/wp-content\/uploads\/2018\/07\/gpi-rtl-4_450x150.jpg\" alt=\"gpi-rtl-4\" width=\"450\" height=\"150\" \/><\/p>\n<p>4. Fonts and characters: Arabic characters are wider and shorter than Latin characters, which gives a different visual appearance.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.globalizationpartners.com\/wp-content\/uploads\/2018\/07\/gpi-rtl-5_400x112.jpg\" alt=\"gpi-rtl-5\" width=\"400\" height=\"112\" \/><\/p>\n<p>5. If you are going to use the same web font for all pages, make sure it is compatible with all of them.<\/p>\n<p>6. Create a stylesheet for each direction.<\/p>\n<p>7. If you have hardcoded words in your pages, keep them in separate translation files.<\/p>\n<p>8. Localizing dates can be tricky in Arabic, you need to watch for dialectal differences (check out &#8220;<a href=\"\/what-are-the-differences-between-arabic-languages\/\">What are the differences between Arabic languages?<\/a>&#8221; for more info on this topic).<\/p>\n<h5><strong>Summary<\/strong><\/h5>\n<p>While RTL is a rich topic and there is more to cover, this article acts as the basic knowledge you need to start exploring RTL confidently. RTL is not about &#8220;flipping&#8221; or &#8220;translating&#8221; content, it&#8217;s about making every aspect of the UI and layout RTL-friendly.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Sometimes simply translating website content into another language isn&#8217;t enough. For many markets with complicated languages, localization is an essential aspect of website translation. Non-Latin characters, right-to-left (RTL) languages, and text expansion are some of the factors which must be considered for languages like Chinese, Arabic and German. Arabic, a popular RTL language, is the [&hellip;]<\/p>\n","protected":false},"author":2,"featured_media":4392,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[19],"tags":[172,723,722],"_links":{"self":[{"href":"https:\/\/www.globalizationpartners.com\/wp-json\/wp\/v2\/posts\/4391"}],"collection":[{"href":"https:\/\/www.globalizationpartners.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.globalizationpartners.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.globalizationpartners.com\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/www.globalizationpartners.com\/wp-json\/wp\/v2\/comments?post=4391"}],"version-history":[{"count":8,"href":"https:\/\/www.globalizationpartners.com\/wp-json\/wp\/v2\/posts\/4391\/revisions"}],"predecessor-version":[{"id":22655,"href":"https:\/\/www.globalizationpartners.com\/wp-json\/wp\/v2\/posts\/4391\/revisions\/22655"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.globalizationpartners.com\/wp-json\/wp\/v2\/media\/4392"}],"wp:attachment":[{"href":"https:\/\/www.globalizationpartners.com\/wp-json\/wp\/v2\/media?parent=4391"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.globalizationpartners.com\/wp-json\/wp\/v2\/categories?post=4391"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.globalizationpartners.com\/wp-json\/wp\/v2\/tags?post=4391"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}