sandflow / imscjs

JavaScript library for rendering IMSC Text and Image Profile documents to HTML5

 _                                 _    _____ 
(_)                               | |  / ____|
 _   _ __ ___    ___    ___       | | | (___  
| | | '_ ` _ \  / __|  / __|  _   | |  \___ \ 
| | | | | | | | \__ \ | (__  | |__| |  ____) |
|_| |_| |_| |_| |___/  \___|  \____/  |_____/ 

INTRODUCTION

imscJS is a JavaScript library for rendering IMSC 1.0.1 and IMSC 1.1 documents to HTML5. IMSC is a profile of TTML 2 designed for subtitle and caption delivery worldwide.

A sample web app that uses imscJS is available at https://www.sandflow.com/imsc1_1/index.html.

Documentation is available on MDN.

KNOWN ISSUES AND LIMITATIONS

imscJS is primarily developed on Firefox. Latest versions of Chrome, Safari, and Microsoft Edge are intended to be supported nevertheless, albeit with potentially reduced capabilities. In particular, advanced ruby layout is currently only supported by Firefox.

imscJS is intended to reflect the most recent published versions of IMSC 1.0.1 and IMSC 1.1. These publications are routinely clarified by proposed resolutions to issues captured in their respective bug trackers.

imscJS bugs are tracked at https://github.com/sandflow/imscJS/issues.

RUNTIME DEPENDENCIES

(required) sax-js 1.2.1

Rendering to HTML5 requires a browser environment, but parsing an IMSC document and transforming it into ISDs does not.

DEVELOPMENT DEPENDENCIES

(required) node.js (see package.json for a complete list of dependencies)

(recommended) git

QUICK START

• run the build target defined in Gruntfile.js using grunt.

• the resulting imsc.js and sax.js files at build/public_html/libs are, respectively, the imscJS library and its sax-js dependency. For example, both libraries can be included in a web page as follows:

    <script src="libs/sax.js"></script>
    <script src="libs/imsc.js"></script>

See BUILD ARTIFACTS for a full list of build artifacts, and TESTS AND SAMPLES for a list of samples and tests available.

ARCHITECTURE

API

imscJS renders an IMSC document in three distinct steps:

• fromXML(xmlstring, errorHandler, metadataHandler) parses the document and returns a TT object. The latter contains opaque representation of the document and exposes the method getMediaTimeEvents() that returns a list of time offsets (in seconds) of the ISD, i.e. the points in time where the visual representation of the document change.

• generateISD(tt, offset, errorHandler) creates a canonical representation of the document (provided as a TT object generated by fromXML()) at a point in time (offset parameter). This point in time does not have to be one of the values returned by getMediaTimeEvents(). For example, given an ISOBMFF sample covering the interval [a, b[, generateISD(tt, offset, errorHandler) would be called first with offset = a, then in turn with offset set to each value of getMediaTimeEvents() that fall in the interval ]a, b[.

• renderHTML(isd, element, imgResolver, eheight, ewidth, displayForcedOnlyMode, errorHandler, previousISDState, enableRollUp) renders an isd object returned by generateISD() into a newly-created div element that is appended to the element. The element must be attached to the DOM. The height and width of the child div element are equal to eheight and ewidth if not null, or clientWidth and clientHeight of the parent element otherwise. Images URIs specified in smpte:background attributes are mapped to image resource URLs by the imgResolver function. The latter takes the value of the smpte:background attribute URI and an img DOM element as input and is expected to set the src attribute of the img DOM element to the absolute URI of the image. displayForcedOnlyMode sets the (boolean) value of the IMSC displayForcedOnlyMode parameter. enableRollUp enables roll-up as specified in CEA 708. previousISDState maintains states across calls, e.g. for roll-up processing.

In each step, the caller can provide an errorHandler to be notified of events during processing. The errorHandler may define four methods: info, warn, error and fatal. Each is called with a string argument describing the event, and will cause processing to terminate if it returns true.

Inline documentation provides additional information.

MODULES

imscJS consists of the following modules, which can be used in a node environment using the require functionality, or standalone, in which case each module hosts its definitions under a global name (the token between parantheses):

• doc.js (imscDoc): parses an IMSC document into an in-memory TT object
• isd.js (imscISD): generates an ISD object from a TT object
• html.js (imscHTML): generates an HTML fragment from an ISD object
• names.js (imscNames): common constants
• styles.js (imscStyles): defines TTML styling attributes processing
• utils.js (imscUtils): common utility functions

BUILD

imscJS is built using the build:release or build:debug Grunt tasks -- the build task is an alias of build:debug.

The dist directory contains the following build artifacts:

• imsc.all.debug.js: Non-minified build that includes the sax-js dependency.
• imsc.all.min.js: Minified build that includes the sax-js dependency.
• imsc.debug.js: Non-minified build that does not include the sax-js dependency.
• imsc.min.js: Minified build that does not include the sax-js dependency.

The build/public_html/libs/imsc.js files is identical to:

• imsc.debug.js, if the build:debug task is executed.
• imsc.min.js, if the build:release task is executed.

RELEASES

imscJS is released as an NPM package under imsc. The dev distribution tag indicates pre-releases.

Builds/dist are available on the unpkg CDN under the dist directory.

To access the latest builds, please consult the release page.

TESTS AND SAMPLES

W3C Test Suite

imscJS imports the IMSC test suite as a submodule at src/test/resources/imsc-tests. The gen-renders.html web app can be used to generate PNG renderings as as well intermediary files from these tests.

Unit tests

Unit tests run using QUnit are split between:

• src/test/webapp/js/unit-tests.js
• src/test/js

NOTABLE DIRECTORIES AND FILES

• package.json: NPM package definition

• Gruntfile.js: Grunt build script

• properties.json: General project properties

• LICENSE: License under which imscJS is made available

• src/main/js: JavaScript modules

• src/test: Test files

• dist: Built libraries

• build/public_html: Test web applications

imscjs's Issues

MediaTimeEvents and showBackground issue

Hi,

I try to parse this subtitles :

DASH-IF Live Simulator urn:ebu:distribution:2014-01 30 <style xml:id="s0" tts:fontStyle="normal" tts:fontFamily="sansSerif" tts:fontSize="100%" tts:lineHeight="normal" tts:color="#FFFFFF" tts:wrapOption="noWrap" tts:textAlign="center"/> <style xml:id="s1" tts:color="#00FF00" tts:backgroundColor="#000000" ebutts:linePadding="0.5c"/> <style xml:id="s2" tts:color="#ff0000" tts:backgroundColor="#000000" ebutts:linePadding="0.5c"/>

  <p xml:id="sub02000" begin="00:00:02.000" end="00:00:03.000" >
    <span style="s1">eng : 00:00:02.000</span>
  </p>
  
  <p xml:id="sub03000" begin="00:00:03.000" end="00:00:04.000" >
    <span style="s1">eng : 00:00:03.000</span>
  </p>
  
</div>

For it, I call first the function fromXML(), then I call getMediaEvents(). The returned arrays contains [0,2,3,4]. I don't understand the 0 value. Could someone help me? Perhaps, it's not an issue, just a misunderstanding... :-)

Thanks,
Nicolas

default region incorrect when one is defined

If a region is defined and not referenced (see w3c/ttml1#225) it appears to use that region anyway instead of the root container default.

linePadding not working on all lines

Rendering the example at http://bbc.github.io/subtitle-guidelines/codesamples/ebu-tt-d_example.xml the image at 10s appears as:

ebutts:linePadding is set to "0.5c" in this example but this is not being correctly honoured on the right end of the first line.

process unit tests via command line

I'm looking on this project, and try to run qunit tests via the command line.
I add the dependency to grunt-contrib-qunit and some code to run
npm test (just after npm install)

Based on this commit I got this message:

Running "qunit:files" (qunit) task
Testing ./src/test/webapp/unit_tests.html 
>> PhantomJS timed out, possibly due to:
>> - QUnit is not loaded correctly.
>> - A missing QUnit start() call.
>> - Or, a misconfiguration of this task.
Warning: 1 tests completed with 1 failed, 0 skipped, and 0 todo. 
0 assertions (in 0ms), passed: 0, failed: 0 Use --force to continue.

Aborted due to warnings.
npm ERR! Test failed.  See above for more details.

Do you know how to "start" the QUnit module ?

Unexpected region behaviour

The XML below is expected to display 3 consecutive subtitles in 3 regions. Each region extends vertically by 4.16% and has a different background colour. A different subtitle should display a the bottom of each region. The expected behaviour can be seen here: https://is.gd/zugopa

The observed unexpected behaviour: only the third region and subtitle are displayed. The third region is displayed from 00:00:00 instead of 00:00:04, and only the third subtitle is displayed, with correct times.

<?xml version="1.0" encoding="UTF-8"?>
<tt ttp:cellResolution="40 24" ttp:timeBase="media" xml:lang="en" xmlns="http://www.w3.org/ns/ttml" xmlns:ebuttm="urn:ebu:tt:urn:ebu:tt:metadata" xmlns:ebutts="urn:ebu:tt:style" xmlns:ttp="http://www.w3.org/ns/ttml#parameter" xmlns:tts="http://www.w3.org/ns/ttml#styling">
  <head>
    <metadata>
      <ebuttm:documentMetadata>
        <ebuttm:conformsToStandard>urn:ebu:tt:distribution:2014-01</ebuttm:conformsToStandard>
        <ebuttm:conformsToStandard>http://www.w3.org/ns/ttml/profile/imsc1/text</ebuttm:conformsToStandard>
      </ebuttm:documentMetadata>
    </metadata>
    <styling>
      <style xml:id="regionStyle1" tts:backgroundColor="#0000FF" />
      <style xml:id="regionStyle2" tts:backgroundColor="#00ff00" />
      <style xml:id="regionStyle3" tts:backgroundColor="#ff0000" />
      <style xml:id="paragraphStyle" ebutts:linePadding="0.5c" ebutts:multiRowAlign="center" tts:fontFamily="proportionalSansSerif" tts:fontSize="100%" tts:lineHeight="120%" tts:textAlign="center" tts:wrapOption="noWrap"/>
      <style xml:id="spanStyle" tts:backgroundColor="#000000" tts:color="#FFFFFF" />
    </styling>
    <layout>
      <region style="regionStyle1" tts:displayAlign="after" tts:extent="75% 4.16%" tts:origin="12.5% 0%" tts:overflow="visible" xml:id="r1"/>
      <region style="regionStyle2" tts:displayAlign="after" tts:extent="75% 8.32%" tts:origin="12.5% 0%" tts:overflow="visible" xml:id="r2"/>
      <region style="regionStyle3" tts:displayAlign="after" tts:extent="75% 12.48%" tts:origin="12.5% 0%" tts:overflow="visible" xml:id="r3"/>
    </layout>
  </head>
  <body>
    <div>
      <p xml:id="s1" begin="00:00:00" end="00:00:01" region="r1" style="paragraphStyle">
        <span style="spanStyle">Line 1</span>
      </p>
      <p xml:id="s2" begin="00:00:02" end="00:00:03" region="r2" style="paragraphStyle">
        <span style="spanStyle">Line 2</span>
      </p>
      <p xml:id="s3" begin="00:00:04" end="00:00:05" region="r3" style="paragraphStyle">
        <span style="spanStyle">Line 3</span>
      </p>
    </div>
  </body>
</tt>

tts:direction set incorrectly

tts:direction should be set by tts:writingMode only if tts:writingMode specifies a LTR or RTL inline-block-progression

See XSL 7.29.1

Incorrect line padding applied

Given the EBU-TT-D document below, I believe at least the following rendering is incorrect:

• Line padding appears to be applied incorrectly to every element eg, no left padding on "Top Left" and "PING!", no right padding on "Top Right", no left padding on any lines of the scale letters etc.
• Odd extra line breaks are being added in the scales eg between orange D and E, and yellow G and F.

<tt xmlns="http://www.w3.org/ns/ttml" xmlns:ttp="http://www.w3.org/ns/ttml#parameter" xmlns:tts="http://www.w3.org/ns/ttml#styling" xmlns:ttm="http://www.w3.org/ns/ttml#metadata" xmlns:ebuttm="urn:ebu:tt:metadata" xmlns:ebutts="urn:ebu:tt:style" xml:lang="en" xml:space="default" ttp:timeBase="media" ttp:cellResolution="35 18">
	<head>
		<metadata>
			<ttm:title>BBC DASH Testcard Stream</ttm:title>
			<ebuttm:documentMetadata>
				<ebuttm:conformsToStandard>urn:ebu:tt:distribution:2014-01</ebuttm:conformsToStandard>
				<ebuttm:authoredFrameRate>25</ebuttm:authoredFrameRate>
			</ebuttm:documentMetadata>
		</metadata>
		<styling>
			<style xml:id="S0" tts:wrapOption="wrap" tts:fontFamily="sansSerif" ebutts:linePadding="0.5c" tts:textAlign="center"/>
			<style xml:id="S1" tts:textAlign="start"/>
			<style xml:id="S2" tts:textAlign="end"/>
			<style xml:id="S10" tts:color="#FFFFFF" tts:backgroundColor="#000000"/>
			<style xml:id="S11" tts:color="#FFFF00" tts:backgroundColor="#000000"/>
			<style xml:id="S12" tts:color="#FF9010" tts:backgroundColor="#000000"/>
			<style xml:id="S13" tts:color="#FF1010" tts:backgroundColor="#000000"/>
			<style xml:id="S14" tts:color="#FFFFFF" tts:fontWeight="bold" tts:fontSize="200%" tts:backgroundColor="#000000"/>
			<style xml:id="S16" tts:fontStyle="italic" tts:color="#10FF10" tts:backgroundColor="#000000"/>
		</styling>
		<layout>
			<region xml:id="R2" tts:origin="5% 60%" tts:extent="20% 20%" tts:overflow="hidden" tts:displayAlign="after"/>
			<region xml:id="R3" tts:origin="33.5% 32%" tts:extent="33% 36%" tts:overflow="hidden" tts:displayAlign="before"/>
			<region xml:id="R4" tts:origin="6.51% 7.5%" tts:extent="30% 10%" tts:overflow="hidden" tts:displayAlign="before"/>
			<region xml:id="R5" tts:origin="63.49% 7.5%" tts:extent="30% 10%" tts:overflow="hidden" tts:displayAlign="before"/>
			<region xml:id="R8" tts:origin="35% 7.5%" tts:extent="30% 10%" tts:overflow="hidden" tts:displayAlign="before"/>
		</layout>
	</head>
	<body style="S0">
		<div region="R4">
			<p xml:id="p4-1-1" style="S1" begin="00:02:22.5" end="00:02:30">
				<span style="S16">Top left</span>
			</p>
		</div>
		<div region="R5">
			<p xml:id="p5-1-1" style="S2" begin="00:02:30.5" end="00:02:38">
				<span style="S16">Top right</span>
			</p>
		</div>
		<div region="R8">
			<p xml:id="p8-1-1" begin="00:02:38.5" end="00:02:46">
				<span style="S16">Top centre</span>
			</p>
		</div>
		<div region="R3">
			<p xml:id="p3-5-1" style="S1">
				<span style="S10" begin="00:02:31.5" end="00:02:37.5">Musical scale<br/></span>
				<span style="S12" begin="00:02:31.5" end="00:02:37.1">C</span>
				<span style="S12" begin="00:02:31.7" end="00:02:37.1">, D</span>
				<span style="S12" begin="00:02:31.9" end="00:02:37.1">, E</span>
				<span style="S12" begin="00:02:32.1" end="00:02:37.1">, F</span>
				<span style="S12" begin="00:02:32.3" end="00:02:37.1">, G</span>
				<span style="S12" begin="00:02:32.5" end="00:02:37.1">, A</span>
				<span style="S12" begin="00:02:32.7" end="00:02:37.1">, B</span>
				<span style="S12" begin="00:02:32.9" end="00:02:37.1">, C</span>
				<span style="S12" begin="00:02:33.1" end="00:02:37.1">, D</span>
				<span style="S12" begin="00:02:33.3" end="00:02:37.1">, E</span>
				<span style="S12" begin="00:02:33.5" end="00:02:37.1">, F</span>
				<span style="S12" begin="00:02:33.7" end="00:02:37.1">, G</span>
				<span style="S12" begin="00:02:33.9" end="00:02:37.1">, A</span>
				<span style="S12" begin="00:02:34.1" end="00:02:37.1">, B</span>
				<span style="S11" begin="00:02:34.3" end="00:02:37.1">, C</span>
				<span style="S11" begin="00:02:34.5" end="00:02:37.1">, B</span>
				<span style="S11" begin="00:02:34.7" end="00:02:37.1">, A</span>
				<span style="S11" begin="00:02:34.9" end="00:02:37.1">, G</span>
				<span style="S11" begin="00:02:35.1" end="00:02:37.1">, F</span>
				<span style="S11" begin="00:02:35.3" end="00:02:37.1">, E</span>
				<span style="S11" begin="00:02:35.5" end="00:02:37.1">, D</span>
				<span style="S11" begin="00:02:35.7" end="00:02:37.1">, C</span>
				<span style="S11" begin="00:02:35.9" end="00:02:37.1">, B</span>
				<span style="S11" begin="00:02:36.1" end="00:02:37.1">, A</span>
				<span style="S11" begin="00:02:36.3" end="00:02:37.1">, G</span>
				<span style="S11" begin="00:02:36.5" end="00:02:37.1">, F</span>
				<span style="S11" begin="00:02:36.7" end="00:02:37.1">, E</span>
				<span style="S11" begin="00:02:36.9" end="00:02:37.1">, D</span>
				<span style="S13" begin="00:02:37.1" end="00:02:37.5">C, D, E, F, G, A, B, C, D, E, F, G, A, B, C, B, A, G, F, E, D, C, B, A, G, F, E, D, C</span>
			</p>
			<p xml:id="p3-6-1" style="S1">
				<span style="S10" begin="00:02:39.5" end="00:02:45.5">Musical scale<br/></span>
				<span style="S12" begin="00:02:39.5" end="00:02:45.1">C</span>
				<span style="S12" begin="00:02:39.7" end="00:02:45.1">, D</span>
				<span style="S12" begin="00:02:39.9" end="00:02:45.1">, E</span>
			</p>
		</div>
		<div region="R2">
			<p xml:id="p2-4-1" style="S1" begin="00:02:30" end="00:02:30.08">
				<span style="S14">PING!</span>
			</p>
			<p xml:id="p2-5-1" style="S1" begin="00:02:38" end="00:02:38.08">
				<span style="S14">PING!</span>
			</p>
		</div>
	</body>
</tt>

parsing stalled at "loading..." with no errors

When there is a validation error, it can stall with that status. I observe that it seems to be when a namespace shortcut is misspelled, e.g. "ts:" instead of "tts:".

Overlap Regions and z order

When regions overlap, the library should return a warning message. However, zIndex parameter should be treated because this parameter is permitted in imsc1 profiles.

Element rendered incorrectly due to inherited styling

This project appears only to set properties which were explicitly set by the contents of the TTML document, with no default properties.

The problem with doing this is that when the document is rendered to HTML and attached to the DOM, the rendered div will inherit styling from its ancestors.

An example of this can be seen when testing the initial integration of imscJS into dash.js (https://github.com/Orange-OpenSource/dash.js/tree/feature/imscJSIntegration). The reference player for that project uses bootstrap.css, which sets the CSS line-height on body. This is ultimately inherited by the rendered div, causing the line-height on the captions to be set incorrectly.

The current parser in dash.js works around this by defining some default properties which are always set and then overridden with values parsed from the TTML as required. It seem like something like this may be needed here.

UI - change focus to media time button

After loading a document, change the UI focus to the lower left time button (saves a click).

Cannot see PNGs in case of IMSC1.0 image profile

Hello!

I could not see the PNG images from an IMSC1.0 image profile (http://www.w3.org/ns/ttml/profile/imsc1/image) file. Are the sample files are wrong or imscJS does not support this kind of IMSC files yet?

Attached the sample MXF as well as the XML+PNGs.

Thanks,
Adam

IMSC1.0-image_profile.ZIP

mergeReferencedStyles() dies when styling element is not present

mergeReferencedStyles() dies when <styling> is not present, and an element references a non-existent style.

The issue is the following line does not check for the existence of styling:

if (!(sref in styling.styles)) {

zIndex="auto" not parsed correctly

line height artifacts with whitespace

When whitespace is present on <p>, it alters the line height even though no glyph is output.
See the attached file. The four <p> differ as follows (other than time):

1 & 2 – tts:lineHeight not set
3 & 4 – tts:lineHeight set to 100% (whatever “normal” is)
1 & 3 – no direct content in <p> (all in the )
2 & 4 - a single trailing space between the </span> and </p>

When whitespace is present, the line height increases and shows a line gap. If there is no whitespace on the <p> there the line height is as expected.

FYI, newlines have the same affect as the space.

lineHeight.zip

PNG sequence rendered differently from HTML

There seems to be an issue with the png sequence generation in the demo page at http://sandflow.com/imsc1proc/index.html - the png rendering does not match the html rendering. See screen shot below. It looks like the rendering div in the svg container is a different size to the one used for the html render but I have no idea why.

I appreciate this isn't core functionality so its priority is probably low.

PNG different from browser display

The EBU-TT-D below renders without gaps between lines in the browser, but the downloaded PNGs have gaps between lines (observed in latest FF and Chrome on OSX).

I believe the renderer display is correct but it will be great to have that confirmed.

Renderer

PNG

EBU-TT-D

<tt xmlns="http://www.w3.org/ns/ttml" xmlns:tts="http://www.w3.org/ns/ttml#styling"
	xmlns:ttm="http://www.w3.org/ns/ttml#metadata" xmlns:ttp="http://www.w3.org/ns/ttml#parameter"
	xmlns:ebuttm="urn:ebu:tt:metadata" xmlns:ebutts="urn:ebu:tt:style" ttp:timeBase="media"
	xml:lang="en-GB" ttp:cellResolution="32 15" >
	<head>
		<styling>
			<style xml:id="parStyle" tts:fontSize="80%" tts:textAlign="left" tts:lineHeight="100%"
				ebutts:linePadding="0.5c" tts:fontFamily="Reith-sans,proportionalSansSerif"/>
				<style xml:id="white" tts:color="#FFFFFF" tts:backgroundColor="#000000" />
				<style xml:id="yellow" tts:color="#FFFF00" tts:backgroundColor="#000000" />
				<style xml:id="cyan" tts:color="#00FFFF" tts:backgroundColor="#000000" />
				<style xml:id="green" tts:color="#00FF00" tts:backgroundColor="#000000" />
		</styling>
		<layout>
			<region xml:id="top" tts:origin="10% 10%" tts:extent="80% 40%" tts:displayAlign="before"/>
			<region xml:id="bottom" tts:origin="10% 50%" tts:extent="80% 40%" tts:displayAlign="after"/>
		</layout>
	</head>
	<body>
		<div style="parStyle">
			<p xml:id="S1" begin="00:00:00" end="00:00:05" region="top">
				<span style="white">White on black, top region.</span><br/>
				<span style="yellow">Yellow on black, top region.</span><br/>
				<span style="cyan">Cyan on black, top region.</span><br/>
				<span style="green">Green on black, top region.</span><br/>
			</p>
			<p xml:id="S2" begin="00:00:05" end="00:00:10" region="bottom">
				<span style="white">White on black, bottom region.</span><br/>
				<span style="yellow">Yellow on black, bottom region.</span><br/>
				<span style="cyan">Cyan on black, bottom region.</span><br/>
				<span style="green">Green on black, bottom region.</span><br/>
			</p>
			<p xml:id="S3" begin="00:00:10" end="00:00:15" region="top">
				<span style="white">White text on black background in the top region.
				The subtitle is very long. The attributes wrapOption and overflow are
				omitted, so the initial values "wrap" and "hidden" apply.
				The text should wrap in the region and the overflow hidden somewhere
				under this very very very very very very very very very very very very
				very very very very very very very very very very very very very very
				long line.
			</span>
			</p>
		</div>
	</body>
</tt>

EBU-TTD line padding not rendered

The sample http://vm2.dashif.org/dash/vod/testpic_2s/sub_swe_short.xml does not render the EBU-TTD line padding specified. Is there any error in the syntax, or is there an issue with imscJS?

The styles look like

  <style xml:id="s1" tts:color="#00ff00" tts:backgroundColor="#000000" ebutts:linePadding="0.5c"/>

Add support for #fontShear

https://www.w3.org/TR/ttml2/#style-attribute-fontShear

Add height and width to renderHTML

Per Dash-Industry-Forum/dash.js#1693 (comment), the div passed to renderHTML may have zero width, but still attached to the DOM.

Allow the client to pass height and width explicitly to renderHTML

tts:textAlign="left" | "right" is equal to "start" | "end" per XSL

See XSL 7.16.9

Improvements based on PR #36

• Catch failure to create HTML element from ISD element
• Catch failure to compute style and avoid styles with null values

Add documentation for image resolver callback in renderHTML()

The library allows the caller to provide an "image resolver" function to renderHTML(). This function takes as input the URI found in the IMSC1 document and returns a URL that the library assigns to the 'src' attribute on an 'img' element.

`set` styling is overridden by implicit inherited styling

      <p dur="10s">
        <set begin="5s" tts:fontFamily="proportionalSansSerif"/>
        The font family should become "proportionalSansSerif" at 5s
      </p>

tts:fontFamily="proportionalSansSerif will never be applied

Add support for smpte:image

Hi,

I try to use the image profile with the attached sample.
image_subtitle.zip

In the imgResolver function of the renderHTML function, the uri parameter is set to smpte:backgroundImage value. How can I get the smpte:image information with this parameter? Maybe, it's not really an issue...

Thanks,
Nicolas

timeContainer="seq" fails if children are missing specified @dur attributes

<?xml version="1.0" encoding="UTF-8"?>
<tt:tt xmlns:tt="http://www.w3.org/ns/ttml" xmlns:ttp="http://www.w3.org/ns/ttml#parameter" xmlns="http://www.w3.org/ns/ttml" xmlns:tts="http://www.w3.org/ns/ttml#styling" xmlns:ttm="http://www.w3.org/ns/ttml#metadata" ttp:profile="http://www.w3.org/ns/ttml/profile/imsc1/text" xml:lang="en">
  <body>
    <div timeContainer="seq" dur="20s">
      <p end="10s" tts:backgroundColor="red" tts:color="white">
	<set tts:backgroundColor="blue" begin="5s"/>This background of this sentence should change from red to blue at 5s</p>
    </div>
  </body>
</tt:tt>

(optionall) zero pad the filenames of the output PNGs

In the hosted version, it'd be very helpful if there were an option to zero-pad the file names based on seconds times so that they sort correctly.

i.e. instead of:

0.png
10.5.png
5.5.png

they came out as:

00.0.png
05.5.png
10.5.png

I guess you'd have to work out the longest number of digits needed before and after the decimal point and pad to that.

imsc 1.0.0-beta.3

Hi,

I have a problem with the new npm package : the src folder is empty.... :-(

Regards,
Nicolas

Origin/extent information does not take effect from <p> section

Hello,

attached is a sample problematic file. The origin and extent information are not stored under styling \ region but in the div \ p sections. The imscJS library positioned all the subtitle spots to the 0,0 (upper left corner), I think because it ignores the origin/extent values from

. My question is that should this work? Or does the spec clearly state that the origin/extent data in

must be ignored?

Thanks,
Adam

caption.zip

linePadding and xml:space="preserve".

When using linePadding, it appears to ignore concurrent use of xml:space="preserve".
test-space.zip

Font size percentage

Using this TTML content:

<?xml version="1.0" encoding="utf-8"?>
<tt xmlns="http://www.w3.org/ns/ttml" xmlns:smpte="http://www.smpte-ra.org/schemas/2052-1/2010/smpte-tt" xmlns:ttm="http://www.w3.org/ns/ttml#metadata" xmlns:tts="http://www.w3.org/ns/ttml#styling" xml:lang="ita">
    <head>
        <smpte:information smpte:mode="Enhanced" />
        <metadata>
            <ttm:title></ttm:title>
            <ttm:desc></ttm:desc>
            <ttm:copyright></ttm:copyright>
        </metadata>
        <styling>
            <style xml:id="ttx" tts:fontFamily="monospaceSansSerif" tts:fontSize="80%" />
        </styling>
        <layout>
            <region xml:id="region-1" tts:extent="82.50% 4.17%" tts:origin="17.50% 91.67%" />
        </layout>
    </head>
    <body>
        <div>
            <p begin="418692:19:25.000" end="418692:19:25.040" region="region-1" style="ttx">
                <span tts:color="#FF00FF" tts:backgroundColor="#000000">He sings in english.</span>
            </p>
        </div>
    </body>
</tt>

We can see that the paragraph should be displayed in region-1 using styles ttx.

With a root container having a size of 777px x 437px, the computed values for the extent attribute of the region are: width: 679.875px; height: 18.2229px;.

The fontSize value used for the span element is inherited from its parent (the paragraph) and has a computed value set to 23.3067px. We can see that this value is greater than the height of the region and so the caption seems cropped at the bottom because of the overflow: hidden CSS property applied to the region element.

The computed value for the font size seems to be based on the computed cell size (1c = 32px x 15px). However, as the ttx styles are combined with the region-1 definition at the paragraph level, shouldn't it be 80% of the region's height?

Multi-hour time expressions not supported

Time expressions of the form 100:00:00 are supported by TTML1

Reported at Dash-Industry-Forum/dash.js#1693 (comment)

Add support for roll-up animation

Roll-up animation, i.e. the smooth scrolling of lines upwards when a new line is added to a region where tts:displayAlign='after', improves readibility.

Space is not removed before BR at br-in-span-001 and br-in-p-001

add support for "free-run" presentation

In addition to manually stepping through the ISDs, allow the presentation to run beginning to end. There are certain flow dynamics that are better observed in real time.

Add displayForcedOnlyMode switch

The caller should be able to provide a value for the displayForcedOnlyMode parameter.

Add support for #displayAspectRatio

https://www.w3.org/TR/ttml2/#parameter-attribute-displayAspectRatio

No render if begin and end attributes are prefixed using namespace

Using the following xml :
test_XML.txt

The text is not rendered, because begin and end are not found.
In docs.js , function processingTiming, the attributes searched is 'begin', whereas in this case, attribute is tt::begin.
It is the same for end.

The xml seems ok.

linePadding and multiRowAlign fail on uneven lines

Line break detection fails when font size changes across a line. See, for instance,

<?xml version="1.0" encoding="UTF-8"?>
<!--
Copyright 2015 Institut für Rundfunktechnik GmbH, Munich, Germany

Licensed under the Apache License, Version 2.0 (the "License"); 
you may not use this file except in compliance with the License.
You may obtain a copy of the License 

at http://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing, the subject work
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.

See the License for the specific language governing permissions and
limitations under the License.
-->
<!-- Modifications Copyright (c) 2017, Pierre-Anthony Lemieux ([email protected]) -->
<tt:tt 
 xmlns:tt="http://www.w3.org/ns/ttml" xmlns:ttp="http://www.w3.org/ns/ttml#parameter"
 xmlns:tts="http://www.w3.org/ns/ttml#styling" xmlns:ebutts="urn:ebu:tt:style" xmlns:ebuttm="urn:ebu:tt:metadata" ttp:timeBase="media"
 xml:lang="de" ttp:cellResolution="50 30">
	<tt:head>
		<tt:metadata>
			<ebuttm:documentMetadata>
				<ebuttm:conformsToStandard>urn:ebu:tt:distribution:2014-01</ebuttm:conformsToStandard>
				<ebuttm:conformsToStandard>http://www.w3.org/ns/ttml/profile/imsc1/text</ebuttm:conformsToStandard>
			</ebuttm:documentMetadata>
		</tt:metadata>
		<tt:styling>
			<tt:style xml:id="textWhite" tts:color="#ffffff" tts:backgroundColor="#000000" tts:fontSize="160%" tts:fontFamily="monospaceSerif" />
      <tt:style xml:id="textWhiteLarge" tts:color="#ffffff" tts:backgroundColor="#000000" tts:fontSize="200%" tts:fontFamily="monospaceSerif" />
			<tt:style xml:id="paragraphStyle" tts:textAlign="center" ebutts:linePadding="0.5c"/>
		</tt:styling>
		<tt:layout>
			<tt:region xml:id="bottom" tts:origin="10% 10%" tts:extent="80% 80%" tts:displayAlign="after"/>
		</tt:layout>
	</tt:head>
	<tt:body>
		<tt:div>
			<tt:p xml:id="subtitle1" region="bottom" begin="00:00:00.000" end="00:00:10.000" style="paragraphStyle">
				<tt:span style="textWhite">This subtitle</tt:span><tt:span style="textWhiteLarge"> uses</tt:span><tt:br/>
				<tt:span style="textWhite">linepadding</tt:span>
			</tt:p>
		</tt:div>
	</tt:body>
</tt:tt>

textAlign=start/end not supported in Edge

Edge does not support text-align=start/end, which needs to be polyfilled

Variable in region initialisation methoid is used but not provided/initialized

The parsing procedure in doc.js contains the following function for region objects:

    Region.prototype.initFromNode = function (doc, node, errorHandler) {
     ...
        var t = processTiming(doc, parent, node, errorHandler);
     ... 
    };

processTiming uses the variable parent although this was not provided as parameter through the initFromNode function (and parent is also not initialized in scope). As a region element in TTML does not have a parent element that can contain timing it maybe best to change the call of the processTiming function as follows:

processTiming(doc, null, node, errorHandler);

Note that this does result in processing exceptions only on some platforms.

tts:zIndex should be relative to root container when mapping to HTML

CSS z-index should be set to "0" on root container div, otherwise the zIndex is relative to some other page element.

display artifacts after animation

[Example document provided privately.]

Clarify that div must be attached to DOM before calling renderHTML(isd, div)

Line padding appears to be implemented using CSS box-shadow. In order to apply the correct colour to the box-shadow, the parser calls window.getComputedStyle. However, getComputedStyle only works if the element whose style should be computed is ultimately attached to the DOM.

If you attempt to render the ISD to a div which is not attached to the DOM it is mostly rendered correctly but the padding will be applied with no colour information. The default colour for the box-shadow is browser dependent but is usually CSS color, which is unlikely to be the author's intention.

Either the documentation should mention the requirement that the div be attached to the DOM prior to calling renderHTML, or the implementation should be changed such that this is not required (ie don't use getComputedStyle to determine the box-shadow colour).

Singleton anonymous spans not pruned

The following line should be removed since text property is never present in Anonymous Spans.

imscJS/src/main/js/doc.js

Line 130 in 20017f4

estack[0].text === null) {

tts:textOutline

I'm unable to get a text outline to render for any of the attached sample files.

tts_textOutline_black_2px_0px.ttml is based on the fragment from the TTML1 SE spec ( https://www.w3.org/TR/ttaf1-dfxp/#style-attribute-textOutline ) but fails to load with the error "error: Cannot parse styling attribute http://www.w3.org/ns/ttml#styling textOutline --> black 2px 0px"

The other two samples, tts_textOutline_black_2px.ttml and tts_textOutline_blue_5pct.ttml both load but fail to render any outline on the text. I tried in recent versions of Chrome, IE, and Firefox.

tts_textOutline_blue_5pct.ttml.txt
tts_textOutline_black_2px_0px.ttml.txt
tts_textOutline_black_2px.ttml.txt

I also tested specifying the outline color in #rrggbb, #rrggbbaa, rgb(0,0,0) and rgba(0,0,0,255) formats and these did not make a difference.

linefeeds are not treated as space when xml:space="default"

See w3c/ttml1#225

Consider adding demo renderer to codebase

The renderer demo at http://sandflow.com/imsc1proc/index.html has proved really useful for debugging and determining if issues lie in the library or the integration elsewhere, but obviously it can only use the version of the library hosted alongside it.

It would be awesome if this app could be added to the src/test/webapp so that versions of the library built locally can be tested in the same way.

Overlapping lines

When I render the attached file (please rename to .xml), the second subtitle is rendered with overlapping lines:

However my expectation was that these lines don't overlap, as the tts:lineHeight is 125% here and "relative to this element's font size". I hope I didn't miss something...

I tested with http://sandflow.com/imsc1proc and:

• Firefox 58.0.2 @ Win7
• Chrome 64.0.3282.167 @ Win 7
• Chromium 64.0.3282.140 @ Ubuntu MATE 16.04

error: Cannot parse styling attribute http://www.w3.org/ns/ttml#styling color --> fuchsia

"fuchsia" is listed as one of the namedColors in the TTML spec (same RGB value as "magenta") but is not working here. Is "fuchsia" not permitted in IMSC 1.0?