Language sniffing + global rtl/ltr direction

pelagios · Oct 13, 2016 · a96a653 · a96a653
1 parent e046cd6
commit a96a653
Show file tree

Hide file tree

Showing 3 changed files with 35 additions and 3 deletions.
diff --git a/app/assets/javascripts/common/ui/formatting.js b/app/assets/javascripts/common/ui/formatting.js
@@ -31,6 +31,31 @@ define(function() {
           year = date.getFullYear();
 
       return MONTH_NAMES_SHORT[month] + ' ' + day + ', ' + year;
+    },
+
+    initTextDirection : function(containerEl) {
+      var plaintext = containerEl.innerHTML.substring(0, 200),
+
+          isRTL = function() {
+            var ltrChars = 0,
+                rtlChars = 0,
+                charCode;
+
+            for (var i = 0, len = plaintext.length; i < len; i++) {
+              charCode = plaintext[i].charCodeAt();
+              if (charCode > 64) {
+                if (charCode < 1478)
+                  ltrChars++;
+                else
+                  rtlChars++;
+              }
+            }
+
+            return rtlChars > ltrChars;
+          };
+
+      if (isRTL())
+        jQuery(containerEl).addClass('rtl');
     }
 
   };

diff --git a/app/assets/javascripts/document/annotation/text/app.js b/app/assets/javascripts/document/annotation/text/app.js
@@ -4,6 +4,7 @@ require.config({
 });
 
 require([
+  'common/ui/formatting',
   'common/utils/annotationUtils',
   'common/api',
   'common/config',
@@ -14,6 +15,7 @@ require([
   'document/annotation/text/selection/highlighter',
   'document/annotation/text/selection/selectionHandler',
 ], function(
+  Formatting,
   AnnotationUtils,
   API,
   Config,
@@ -40,7 +42,7 @@ require([
 
         colorschemeStylesheet = jQuery('#colorscheme'),
 
-        initPagePrefs = function() {
+        initPage = function() {
           var storedColorscheme = localStorage.getItem('r2.document.edit.colorscheme'),
               colorscheme = (storedColorscheme) ? storedColorscheme : 'BY_STATUS';
 
@@ -49,6 +51,8 @@ require([
 
           if (Config.IS_TOUCH)
             contentNode.className = 'touch';
+
+          Formatting.initTextDirection(contentNode);
         },
 
         setColorscheme = function(mode) {
@@ -80,7 +84,7 @@ require([
 
     rangy.init();
 
-    initPagePrefs();
+    initPage();
 
     API.listAnnotationsInPart(Config.documentId, Config.partSequenceNo)
        .done(this.onAnnotationsLoaded.bind(this))

diff --git a/app/assets/stylesheets/document/annotation/text/index.less b/app/assets/stylesheets/document/annotation/text/index.less
@@ -72,13 +72,16 @@ body {
   line-height:170%;
   font-family:"Times New Roman", Times, serif;
   white-space:pre-wrap;
-  unicode-bidi:plaintext;
   font-size:17px;
   min-width:568px;
   max-width:1024px;
   word-wrap:break-word;
 }
 
+#content.rtl {
+  direction:rtl;
+}
+
 #content.touch {
   margin-top:5px;
 }