use transcription.orientation for display

js/config.js

@@ -240,6 +240,27 @@ export const MONTHS = [
 
 export const MANUAL_WORKER_VERSION = '__manual__'
 
+/*
+ * Text orientation values to display and create non-left-to-right language transcriptions.
+ * "writing" is the value of the corresponding "writing-mode" CSS style property.
+ * For horizontal right to left text, a secondary "direction" style property also has to be specified.
+ */
+export const TEXT_ORIENTATIONS = {
+  'horizontal-lr': {
+    writing: 'horizontal-tb'
+  },
+  'horizontal-rl': {
+    writing: 'horizontal-tb',
+    direction: 'rtl'
+  },
+  'vertical-lr': {
+    writing: 'vertical-lr'
+  },
+  'vertical-rl': {
+    writing: 'vertical-rl'
+  }
+}
+
 export const ENTITY_TYPES = {
   person: {
     icon: 'icon-user',

test/Element/Transcription/Box.js

@@ -10,7 +10,8 @@ localVue.use(Vuex)
 describe('Element/Transcription/Box.vue', () => {
   const transcription = {
     id: 'transcriptionid',
-    text: 'Vulpix used EMBER!'
+    text: 'Vulpix used EMBER!',
+    orientation: 'vertical-lr'
   }
   const entity1 = {
     id: 'entity1',

vue/Element/Transcription/Box.vue

 <template>
-  <div class="content">
+  <div
+    class="content"
+    :style="transcriptionOrientation"
+  >
     <blockquote>
       <Token
         v-for="(token, index) in tokens"
@@ -12,7 +15,7 @@
 
 <script>
 import { mapState } from 'vuex'
-import { MANUAL_WORKER_VERSION } from '~/js/config'
+import { MANUAL_WORKER_VERSION, TEXT_ORIENTATIONS } from '~/js/config'
 import { parseEntities } from '~/js/helpers'
 import Token from './Token'
 
@@ -47,6 +50,13 @@ export default {
       // No version filter = display no entities at all
       else entityTs = []
       return parseEntities(this.transcription.text, entityTs)
+    },
+    transcriptionOrientation () {
+      const trOrientation = TEXT_ORIENTATIONS[this.transcription.orientation]
+      let orientationStyle = { 'writing-mode': 'horizontal-tb' }
+      if ('direction' in trOrientation) orientationStyle = { 'writing-mode': trOrientation.writing, direction: trOrientation.direction }
+      else orientationStyle = { 'writing-mode': trOrientation.writing }
+      return orientationStyle
     }
   }
 }