Merge pull request #80 from scaife-viewer/fix/arabic-rtl-improvements

Improve display of Arabic text and customize syntax tree field display
scaife-viewer · Jan 3, 2024 · bfdd055 · bfdd055
2 parents d84b3ab + 4c68524
commit bfdd055
Show file tree

Hide file tree

Showing 4 changed files with 41 additions and 18 deletions.
diff --git a/packages/reader-syntax-trees-mode/src/SyntaxTreesModeReader.vue b/packages/reader-syntax-trees-mode/src/SyntaxTreesModeReader.vue
@@ -260,12 +260,26 @@
           return this.passage.textGroup === 'tlg0012';
         }
         if (propertyName === SHOW_RELATIONSHIP) {
-          return this.passage.nss === 'greekLit';
+          // TODO: Consistency with field names
+          return this.collectionFields
+            ? this.collectionFields.morph
+            : this.passage.nss === 'greekLit';
+        }
+        if (propertyName === SHOW_GLOSS) {
+          return this.collectionFields
+            ? this.collectionFields.gloss
+            : this.passage.nss === 'greekLit';
         }
         return true;
       },
     },
     computed: {
+      collectionFields() {
+        if (!this.selectedCollection) {
+          return {};
+        }
+        return this.selectedCollection.data.fields;
+      },
       passageHasTrees() {
         return this.treeCollections && this.treeCollections.length > 0;
       },
@@ -471,6 +485,7 @@
                   id
                   label
                   urn
+                  data
                 }
               }
             }
@@ -484,6 +499,7 @@
             return {
               value: e.node.urn,
               title: e.node.label,
+              data: e.node.data,
             };
           })[0];
         },

diff --git a/packages/widget-reader/src/ReaderTextPart.vue b/packages/widget-reader/src/ReaderTextPart.vue
@@ -130,17 +130,17 @@
       color: var(--sv-widget-reader-line-ref-text-color, #69c);
       font-family: var(--sv-widget-reader-line-ref-font-family, 'Noto Sans');
       min-width: 4em;
-      margin-left: 1em;
-      text-align: right;
+      margin-inline-start: 1em;
+      text-align: end;
       cursor: pointer;
       > svg {
-        margin-left: -10px;
-        margin-right: 10px;
+        margin-inline-start: -10px;
+        margin-inline-end: 10px;
         color: var(--sv-widget-reader-line-ref-svg-color, #495057);
       }
     }
     .line-text {
-      margin-left: 1em;
+      margin-inline-start: 1em;
     }
   }
 
@@ -174,19 +174,19 @@
       padding: 1px 3px;
     }
     span.syll:first-child {
-      border-left: 2px solid
+      border-inline-start: 2px solid
         var(--sv-widget-reader-metrical-syll-first-border-color, black);
     }
     span.syll.caesura:first-child {
-      border-left: 3px solid
+      border-inline-start: 3px solid
         var(--sv-widget-reader-metrical-syll-caesura-first-border-color, blue);
     }
     span.syll:not(:first-child) {
-      border-left: 1px dotted
+      border-inline-start: 1px dotted
         var(--sv-widget-reader-metrical-syll-first-border-color, black);
     }
     span.syll.caesura:not(:first-child) {
-      border-left: 3px dotted
+      border-inline-start: 3px dotted
         var(--sv-widget-reader-metrical-syll-caesura-first-border-color, blue);
     }
 

diff --git a/packages/widget-reader/src/ReaderWidget.vue b/packages/widget-reader/src/ReaderWidget.vue
@@ -44,11 +44,17 @@
     SET_TEXT_WIDTH,
     CHANGE_SIDEBAR_VISIBILITY,
     DISPLAY_MODE_DEFAULT,
+    DISPLAY_MODE_INTERLINEAR,
     EMBED_MODE,
   } from '@scaife-viewer/store';
 
   import PassageLanguageIsRtlMixin from './mixins';
 
+  const directionalDisplayModes = new Set([
+    DISPLAY_MODE_DEFAULT,
+    DISPLAY_MODE_INTERLINEAR,
+  ]);
+
   export default {
     mixins: [PassageLanguageIsRtlMixin],
     components: {
@@ -163,16 +169,17 @@
       fullHeight() {
         return this.namedEntitiesMode;
       },
-      isDefaultDisplayMode() {
-        return (
-          this.$store.getters[`${MODULE_NS}/displayMode`] ===
-          DISPLAY_MODE_DEFAULT
+      displayModeIsDirectional() {
+        return directionalDisplayModes.has(
+          this.$store.getters[`${MODULE_NS}/displayMode`],
         );
       },
       textDirection() {
         // FIXME: Further localization required across
         // the other display modes
-        return this.passageIsRtl && this.isDefaultDisplayMode ? 'rtl' : 'ltr';
+        return this.passageIsRtl && this.displayModeIsDirectional
+          ? 'rtl'
+          : 'ltr';
       },
       pagerPrevious() {
         return this.textDirection === 'ltr' ? 'left' : 'right';
@@ -221,10 +228,10 @@
     align-items: baseline;
     justify-content: left;
     & nav:last-child {
-      margin-left: auto;
+      margin-inline-start: auto;
     }
     ::v-deep .ball-pulse {
-      margin-left: auto;
+      margin-inline-start: auto;
       padding-top: 40px;
     }
   }

diff --git a/packages/widget-reader/src/mixins.js b/packages/widget-reader/src/mixins.js
@@ -1,6 +1,6 @@
 import { MODULE_NS } from '@scaife-viewer/store';
 
-const RTL_LANGUAGES = new Set(['far']);
+const RTL_LANGUAGES = new Set(['far', 'ara']);
 
 const PassageLanguageIsRtlMixin = {
   computed: {