Fixes rtl languages

web/locale.properties

@@ -3,7 +3,7 @@ bookmark.title=Current view (copy or open in new window)
 previous.title=Previous
 next.title=Next
 print.title=Print
-download_label.title=Download
+download.title=Download
 zoom_out.title=Zoom Out
 zoom_in.title=Zoom In
 error_more_info=More Information
@@ -30,35 +30,35 @@ page_of=of {{pageCount}}
 no_outline=No Outline Available
 
 [ar]
-‏‫bookmark.title=الحالية عرض (نسخة أو في فتح نافذة جديدة)‬
-‏‫previous.title=سابق‬
-‏‫next.title=التالي‬
-‏‫print.title=طباعة‬
-‏‫download_label.title=تحميل‬
-‏‫zoom_out.title=التصغير‬
-‏‫zoom_in.title=تكبير‬
-‏‫error_more_info=مزيد من المعلومات‬
-‏‫error_less_info=أقل المعلومات‬
-‏‫error_close=أغلق‬
-‏‫error_build=PDF.JS البناء: ‬{{build}}
-‏‫error_message=الرسالة: ‬{{message}}
-‏‫error_stack=المكدس: ‬{{stack}}
-‏‫error_file=ملف:‬ {{file}}
-‏‫error_line=خط: ‬{{line}}
-‏‫page_scale_width=صفحة العرض‬
-‏‫page_scale_fit=صفحة صالح‬
-‏‫page_scale_auto=التلقائي تكبير‬
-‏‫page_scale_actual=الحجم الفعلي‬
-‏‫toggle_slider.title=تبديل المتزلج‬
-‏‫thumbs.title=وتظهر الصور المصغرة‬
-‏‫outline.title=عرض المخطط التفصيلي وثيقة‬
-‏‫loading=تحميل ... {{percent}}٪ في المئة‬
-‏‫loading_error_indicator=خطأ‬
-‏‫loading_error=حدث خطأ أثناء تحميل قوات الدفاع الشعبي.‬
-‏‫rendering_error=حدث خطأ في حين جعل صفحة.‬
-‏‫page_label=الصفحة:‬
-‏‫page_of=من {{pageCount}}‬
-‏‫no_outline=لا مخطط متاح‬
+bookmark.title=الحالية عرض (نسخة أو في فتح نافذة جديدة)‬
+previous.title=سابق‬
+next.title=التالي‬
+print.title=طباعة‬
+download.title=تحميل‬
+zoom_out.title=التصغير‬
+zoom_in.title=تكبير‬
+error_more_info=مزيد من المعلومات‬
+error_less_info=أقل المعلومات‬
+error_close=أغلق‬
+error_build=PDF.JS البناء: ‬{{build}}
+error_message=الرسالة: ‬{{message}}
+error_stack=المكدس: ‬{{stack}}
+error_file=ملف:‬ {{file}}
+error_line=خط: ‬{{line}}
+page_scale_width=صفحة العرض‬
+page_scale_fit=صفحة صالح‬
+page_scale_auto=التلقائي تكبير‬
+page_scale_actual=الحجم الفعلي‬
+toggle_slider.title=تبديل المتزلج‬
+thumbs.title=وتظهر الصور المصغرة‬
+outline.title=عرض المخطط التفصيلي وثيقة‬
+loading=تحميل ... {{percent}}٪ في المئة‬
+loading_error_indicator=خطأ‬
+loading_error=حدث خطأ أثناء تحميل قوات الدفاع الشعبي.‬
+rendering_error=حدث خطأ في حين جعل صفحة.‬
+page_label=الصفحة:‬
+page_of=من {{pageCount}}‬
+no_outline=لا مخطط متاح‬
 
 [ru]
 bookmark.title=Ссылка на текущий вид (скопировать или открыть в новом окне) 
@@ -96,7 +96,7 @@ bookmark.title=<<<_¢ȗггεпţ ṿiεẂ (¢OÞӳ Oг OÞεп iп пεẂ Ẃ
 previous.title=<<<_ÞгεṿiOȗ§_>>>
 next.title=<<<_пεӾţ_>>>
 print.title=<<<_Þгiпţ_>>>
-download_label.title=<<<_ÐOẂпḻOãÐ_>>>
+download.title=<<<_ÐOẂпḻOãÐ_>>>
 zoom_out.title=<<<_ƩOOм Oȗţ_>>>
 zoom_in.title=<<<_ƩOOм iп_>>>
 error_more_info=<<<_мOгε iп£OгмãţiOп_>>>
@@ -120,4 +120,4 @@ loading_error=<<<_ãп εггOг O¢¢ȗггεÐ ẂНiḻε ḻOãÐiпģ ţН
 rendering_error=<<<_ãп εггOг O¢¢ȗггεÐ ẂНiḻε гεпÐεгiпģ ţНε Þãģε._>>>
 page_label=Þãģε:
 page_of=<<<_O£ {{pageCount}}_>>>
-no_outline=<<<_пO Oȗţḻiпε ãṿãiḻãьḻε_>>>
+no_outline=<<<_пO Oȗţḻiпε ãṿãiḻãьḻε_>>>

web/viewer.css

@@ -22,16 +22,26 @@ body {
 }
 
 /* outer/inner center provides horizontal center */
-.outerCenter {
+html[dir='ltr'] .outerCenter {
   float: right;
   position: relative;
   right: 50%;
 }
-.innerCenter {
+html[dir='rtl'] .outerCenter {
+  float: left;
+  position: relative;
+  left: 50%;
+}
+html[dir='ltr'] .innerCenter {
   float: right;
   position: relative;
   right: -50%;
 }
+html[dir='rtl'] .innerCenter {
+  float: left;
+  position: relative;
+  left: -50%;
+}
 
 #outerContainer {
   width: 100%;
@@ -42,7 +52,6 @@ body {
   position: absolute;
   top: 0;
   bottom: 0;
-  left: -200px;
   width: 200px;
   -moz-transition-property: left;
   -moz-transition-duration: 200ms;
@@ -51,9 +60,19 @@ body {
   -webkit-transition-duration: 200ms;
   -webkit-transition-timing-function: ease;
 }
-#outerContainer.sidebarOpen > #sidebarContainer {
+html[dir='ltr'] #sidebarContainer {
+  left: -200px;
+}
+html[dir='rtl'] #sidebarContainer {
+  right: -200px;
+}
+
+html[dir='ltr'] #outerContainer.sidebarOpen > #sidebarContainer {
   left: 0px;
 }
+html[dir='rtl'] #outerContainer.sidebarOpen > #sidebarContainer {
+  right: 0px;
+}
 
 #mainContainer {
   position: absolute;
@@ -68,13 +87,15 @@ body {
   -webkit-transition-duration: 200ms;
   -webkit-transition-timing-function: ease;
 }
-#outerContainer.sidebarOpen > #mainContainer {
+html[dir='ltr'] #outerContainer.sidebarOpen > #mainContainer {
   left: 200px;
 }
+html[dir='rtl'] #outerContainer.sidebarOpen > #mainContainer {
+  right: 200px;
+}
 
 #sidebarContent {
   top: 32px;
-  left: 0;
   bottom: 0;
   overflow: auto;
   position: absolute;
@@ -83,6 +104,12 @@ body {
   background-color: hsla(0,0%,0%,.1);
   box-shadow: inset -1px 0 0 hsla(0,0%,0%,.25);
 }
+html[dir='ltr'] #sidebarContent {
+  left: 0;
+}
+html[dir='rtl'] #sidebarContent {
+  right: 0;
+}
 
 #viewerContainer {
   overflow: auto;
@@ -138,30 +165,46 @@ body {
               0 1px 1px hsla(0,0%,0%,.1);
 }
 
-#toolbarViewerLeft {
+
+html[dir='ltr'] #toolbarViewerLeft,
+html[dir='rtl'] #toolbarViewerRight {
   position: absolute;
   top: 0;
   left: 0;
 }
-#toolbarViewerRight {
+html[dir='ltr'] #toolbarViewerRight,
+html[dir='rtl'] #toolbarViewerLeft {
   position: absolute;
   top: 0;
   right: 0;
 }
-#toolbarViewerLeft > *,
-#toolbarViewerMiddle > *,
-#toolbarViewerRight > * {
+html[dir='ltr'] #toolbarViewerLeft > *,
+html[dir='ltr'] #toolbarViewerMiddle > *,
+html[dir='ltr'] #toolbarViewerRight > * {
   float: left;
 }
+html[dir='rtl'] #toolbarViewerLeft > *,
+html[dir='rtl'] #toolbarViewerMiddle > *,
+html[dir='rtl'] #toolbarViewerRight > * {
+  float: right;
+}
 
-.splitToolbarButton {
+html[dir='ltr'] .splitToolbarButton {
   margin: 3px 2px 4px 0;
   display: inline-block;
 }
-.splitToolbarButton > .toolbarButton {
+html[dir='rtl'] .splitToolbarButton {
+  margin: 3px 0 4px 2px;
+  display: inline-block;
+}
+html[dir='ltr'] .splitToolbarButton > .toolbarButton {
   border-radius: 0;
   float: left;
 }
+html[dir='rtl'] .splitToolbarButton > .toolbarButton {
+  border-radius: 0;
+  float: right;
+}
 
 .toolbarButton {
   border: 0 none;
@@ -200,7 +243,8 @@ body {
               0 0 1px hsla(0,0%,0%,.05);
   z-index: 199;
 }
-.splitToolbarButton > .toolbarButton:first-child  {
+html[dir='ltr'] .splitToolbarButton > .toolbarButton:first-child,
+html[dir='rtl'] .splitToolbarButton > .toolbarButton:last-child {
   position: relative;
   margin: 0;
   margin-right: -1px;
@@ -208,7 +252,8 @@ body {
   border-bottom-left-radius: 2px;
   border-right-color: transparent;
 }
-.splitToolbarButton > .toolbarButton:last-child  {
+html[dir='ltr'] .splitToolbarButton > .toolbarButton:last-child,
+html[dir='rtl'] .splitToolbarButton > .toolbarButton:first-child {
   position: relative;
   margin: 0;
   margin-left: -1px;
@@ -224,8 +269,13 @@ body {
   box-shadow: 0 0 0 1px hsla(0,0%,100%,.08);
   display: inline-block;
   margin: 5px 0;
+}
+html[dir='ltr'] .splitToolbarButtonSeparator {
   float:left;
 }
+html[dir='rtl'] .splitToolbarButtonSeparator {
+  float:right;
+}
 .splitToolbarButton:hover > .splitToolbarButtonSeparator,
 .splitToolbarButton.toggled > .splitToolbarButtonSeparator {
   padding: 12px 0;
@@ -243,7 +293,6 @@ body {
 .dropdownToolbarButton {
   min-width: 16px;
   padding: 2px 6px 0;
-  margin: 3px 2px 4px 0;
   border: 1px solid transparent;
   border-radius: 2px;
   color: hsl(0,0%,95%);
@@ -260,6 +309,15 @@ body {
   -webkit-transition-timing-function: ease;
 }
 
+html[dir='ltr'] .toolbarButton,
+html[dir='ltr'] .dropdownToolbarButton {
+  margin: 3px 2px 4px 0;
+}
+html[dir='rtl'] .toolbarButton,
+html[dir='rtl'] .dropdownToolbarButton {
+  margin: 3px 0 4px 2px;
+}
+
 .toolbarButton:hover,
 .dropdownToolbarButton {
   background-color: hsla(0,0%,0%,.12);
@@ -321,7 +379,13 @@ body {
   max-width: 120px;
   padding: 3px 2px 2px;
   overflow: hidden;
-  background: url(images/toolbarButton-menuArrows.png) no-repeat 95%;
+  background: url(images/toolbarButton-menuArrows.png) no-repeat;
+}
+html[dir='ltr'] .dropdownToolbarButton {
+  background-position: 95%;
+}
+html[dir='rtl'] .dropdownToolbarButton {
+  background-position: 5%;
 }
 
 .dropdownToolbarButton > select {
@@ -344,12 +408,16 @@ body {
   border-bottom: 1px rgba(255, 255, 255, .5) solid;
 }
 
-.splitToolbarButton:first-child,
-.toolbarButton:first-child {
+html[dir='ltr'] .splitToolbarButton:first-child,
+html[dir='ltr'] .toolbarButton:first-child,
+html[dir='rtl'] .splitToolbarButton:last-child,
+html[dir='rtl'] .toolbarButton:last-child {
   margin-left: 4px;
 }
-.splitToolbarButton:last-child,
-.toolbarButton:last-child {
+html[dir='ltr'] .splitToolbarButton:last-child,
+html[dir='ltr'] .toolbarButton:last-child,
+html[dir='rtl'] .splitToolbarButton:first-child,
+html[dir='rtl'] .toolbarButton:first-child {
   margin-right: 4px;
 }
 

web/viewer.html

@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html>
+<html dir="ltr">
   <head>
     <meta charset="utf-8">
     <title>PDF.js viewer</title>
@@ -114,7 +114,7 @@
         </div>
 
         <div id="viewerContainer">
-          <div id="viewer"></div>
+          <div id="viewer" dir="ltr"></div>
         </div>
 
         <div id="loadingBox">

web/viewer.js

@@ -1541,6 +1541,10 @@ function selectScaleOption(value) {
   return predefinedValueFound;
 }
 
+window.addEventListener('localized', function localized(evt) {
+  document.getElementsByTagName('html')[0].dir = mozL10n.language.direction;
+}, true);
+
 window.addEventListener('scalechange', function scalechange(evt) {
   var customScaleOption = document.getElementById('customScaleOption');
   customScaleOption.selected = false;