automatically add dir="rtl" to <html> tag when the language is RTL

src/index.js

@@ -38,6 +38,9 @@ const messageLoader = {
   'zh-TW': _ => import('./i18n.min/zh-TW.json')
 };
 
+// List of languages that are written right-to-left.
+const rtl = ['ar', 'fa', 'he', 'ur'];
+
 // Detect human language to use in the UI:
 //  Check parameters from URL hash #?hl=ru, then browser, then use 'en' as a fallback.
 const { params } = HashNavigation.parseUrlHash(window.location.hash);
@@ -55,9 +58,13 @@ const baseLanguage = normalized.split('-')[0].toLowerCase();
 // Try the full locale first, then the locale without the region code, fallback to 'en'.
 const htmlLang = messageLoader[normalized] ? language : messageLoader[baseLanguage] ? baseLanguage : 'en';
 
+const html = document.getElementsByTagName('html')[0];
 // Set lang attribute of the HTML element: <html lang="XX">
-document.getElementsByTagName('html')[0].setAttribute('lang', htmlLang);
-
+html.setAttribute('lang', htmlLang);
+if (rtl.includes(baseLanguage)) {
+  // Set right-to-left dir attribute of the HTML element: <html dir="rtl">
+  html.setAttribute('dir', 'rtl');
+}
 // Render the app.
 const root = createRoot(document.getElementById('mountPoint'));
 messageLoader[htmlLang]().then(messages =>