HTML Layout Direction

Posted on May 12, 2016

Not every language uses a layout direction of left-to-right (LTR). Some use right-to-left (RTL). This is also known as the “reading direction” or “writing direction”.

At this time, browsers do not automatically apply dir=”ltr” nor dir=”rtl” to the HTML element for the appropriate layout direction. Adding this will change things like HTML tables re-ordering their cells horizontally and can be used in CSS files to apply alternative background images, flipped padding, margins, etc. using CSS selectors like this:

.foo {
  position: absolute;
  top: 10px;
}
html[dir=ltr] .foo {
  left: 10px;
}
html[dir=rtl] .foo {
  right: 10px;
}

There is no HTML5 API to to use the layout direction that comes from system settings. Strangely this HTML5 doc tells developers that they must manually add the direction even though in my opinion, the default should be that it comes from the system settings:
http://www.w3.org/International/questions/qa-html-dir

There is a dir=”auto” option:
http://www.w3.org/International/tests/repo/results/the-dir-attribute-auto#dirauto
but it has a few issues:

1. Microsoft doesn’t support it.
2. This is dependent on your page’s content instead of the system settings.
3. This will prevent you from making CSS attribute selectors that resolve to “ltr” and “rtl” (it’ll be “auto” instead which defeats the purpose). There is a proposed CSS4 :dir(…) pseudo-class which would resolve auto to “ltr” and “rtl” but it is currently experimental and browser support is very weak.

Android 4.2 added support for right-to-left (RTL) layout:
http://android-developers.blogspot.com/2013/03/native-rtl-support-in-android-42.html

iOS also has its own mechanism for this:
https://developer.apple.com/library/ios/documentation/MacOSX/Conceptual/BPInternational/SupportingRight-To-LeftLanguages/SupportingRight-To-LeftLanguages.html

I was not able to find any Microsoft documentation that says whether UWP has anything equivalent to Android and iOS.

Unfortunately these disparate mechanisms are not abstracted into a unified, built-in Cordova API, the Cordova globalization plug-in, nor from what I can tell, any 3rd party plug-in.

This means you’ll either have to write your own Cordova plug-in using platform-specific code or alternatively add your own JavaScript code that uses the locale’s language code to determine whether you need to add dir=”ltr” or dir=”rtl” on your page’s HTML element.

Here is some sample JavaScript code to run when your page initially loads:

// Apply a "dir" attribute to the HTML element:
var bcp47Tag = ...; // e.g. "en-us", etc.
var scriptIndex = bcp47Tag.indexOf("-");
var language =
  bcp47Tag.substring(
    0,
    scriptIndex == -1 ? undefined : scriptIndex).toLowerCase();
if (language == "ar" || // Arabic
 language == "dv" || // Divehi
 language == "ha" || // Hausa
 language == "he" || // Hebrew
 language == "iw" || // Hebrew (legacy code)
 language == "ps" || // Pashto, Pushto
 language == "fa" || // Persian (Farsi)
 language == "ur" || // Urdu
 language == "ji" || // Yiddish (legacy code)
 language == "yi") // Yiddish
{
  document.documentElement.setAttribute("dir", "rtl");
}
else
{
  document.documentElement.setAttribute("dir", "ltr");
}