Fix for TTML text alignment (#573)

Parse TTML textAlign settings into align property of a VTTCue.
shaka-project · Nov 29, 2016 · a07da64 · a07da64
1 parent 7d4f001
commit a07da64
Show file tree

Hide file tree

Showing 2 changed files with 65 additions and 4 deletions.
diff --git a/lib/media/ttml_text_parser.js b/lib/media/ttml_text_parser.js
@@ -154,6 +154,19 @@ shaka.media.TtmlTextParser.timeHMSFormat_ =
 shaka.media.TtmlTextParser.percentValues_ = /^(\d{1,2}|100)% (\d{1,2}|100)%$/;
 
 
+/**
+ * @const
+ * @private {!Object}
+ */
+shaka.media.TtmlTextParser.textAlignToLineAlign_ = {
+  'left': 'start',
+  'center': 'center',
+  'right': 'end',
+  'start': 'start',
+  'end': 'end'
+};
+
+
 /**
  * Gets leaf nodes of the xml node tree. Ignores the text, br elements
  * and the spans positioned inside paragraphs
@@ -274,10 +287,6 @@ shaka.media.TtmlTextParser.addStyle_ = function(
   var TtmlTextParser = shaka.media.TtmlTextParser;
   var results = null;
 
-  var align = TtmlTextParser.getStyleAttribute_(
-      cueElement, region, styles, 'tts:textAlign');
-  if (align)
-    cue.lineAlign = align;
 
   var extent = TtmlTextParser.getStyleAttribute_(
       cueElement, region, styles, 'tts:extent');
@@ -317,6 +326,20 @@ shaka.media.TtmlTextParser.addStyle_ = function(
       }
     }
   }
+
+  var align = TtmlTextParser.getStyleAttribute_(
+      cueElement, region, styles, 'tts:textAlign');
+  if (align) {
+    if (align == 'center') {
+      // Need to set cue.position to auto to get centered
+      // subtitles
+      cue.align = 'middle';
+      cue.position = 'auto';
+    } else {
+      cue.align = align;
+    }
+    cue.lineAlign = TtmlTextParser.textAlignToLineAlign_[align];
+  }
 };
 
 

diff --git a/test/media/ttml_text_parser_unit.js b/test/media/ttml_text_parser_unit.js
@@ -399,6 +399,42 @@ describe('TtmlTextParser', function() {
         'end="01:02:03.200">Line1<br/>Line2</p></body></tt>');
   });
 
+  it('parses cue alignment from textAlign attribute', function() {
+    verifyHelper(
+        [
+          {start: 62.05, end: 3723.2, text: 'Test', lineAlign: 'start',
+            align: 'left'}
+        ],
+        '<tt xmlns:tts="ttml#styling">' +
+        '<styling>' +
+        '<style xml:id="s1" tts:textAlign="left"/>' +
+        '</styling>' +
+        '<layout xmlns:tts="ttml#styling">' +
+        '<region xml:id="subtitleArea" />' +
+        '</layout>' +
+        '<body region="subtitleArea">' +
+        '<p begin="01:02.05" end="01:02:03.200" style="s1">Test</p>' +
+        '</body>' +
+        '</tt>');
+    verifyHelper(
+        [
+          {start: 62.05, end: 3723.2, text: 'Test', lineAlign: 'center',
+            align: 'middle', position: 'auto'}
+        ],
+        '<tt xmlns:tts="ttml#styling">' +
+        '<styling>' +
+        '<style xml:id="s1" tts:textAlign="center"/>' +
+        '</styling>' +
+        '<layout xmlns:tts="ttml#styling">' +
+        '<region xml:id="subtitleArea" />' +
+        '</layout>' +
+        '<body region="subtitleArea">' +
+        '<p begin="01:02.05" end="01:02:03.200" style="s1">Test</p>' +
+        '</body>' +
+        '</tt>');
+  });
+
+
   /**
    * @param {!Array} cues
    * @param {string} text
@@ -416,6 +452,8 @@ describe('TtmlTextParser', function() {
       expect(result[i].endTime).toBeCloseTo(cues[i].end, 3);
       expect(result[i].text).toBe(cues[i].text);
 
+      if (cues[i].align)
+        expect(result[i].align).toBe(cues[i].align);
       if (cues[i].lineAlign)
         expect(result[i].lineAlign).toBe(cues[i].lineAlign);
       if (cues[i].size)