sandflow / imscjs Goto Github PK
View Code? Open in Web Editor NEWJavaScript library for rendering IMSC Text and Image Profile documents to HTML5
License: BSD 2-Clause "Simplified" License
JavaScript library for rendering IMSC Text and Image Profile documents to HTML5
License: BSD 2-Clause "Simplified" License
<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
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.
Edge does not support text-align=start/end, which needs to be polyfilled
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
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.
When using linePadding, it appears to ignore concurrent use of xml:space="preserve".
test-space.zip
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.
<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>
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.
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:
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.
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"/>
[Example document provided privately.]
Hi,
I have a problem with the new npm package : the src folder is empty.... :-(
Regards,
Nicolas
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.
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
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
The following line should be removed since text
property is never present in Anonymous Spans.
Line 130 in 20017f4
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
Given the EBU-TT-D document below, I believe at least the following rendering is incorrect:
<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>
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:".
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?
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 ?
<?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>
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>
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.
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.
null
valuesIf a region is defined and not referenced (see w3c/ttml1#225) it appears to use that region anyway instead of the root container default.
After loading a document, change the UI focus to the lower left time button (saves a click).
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>
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.
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
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.
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)) {
The caller should be able to provide a value for the displayForcedOnlyMode
parameter.
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.
"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?
See XSL 7.16.9
When regions overlap, the library should return a warning message. However, zIndex parameter should be treated because this parameter is permitted in imsc1 profiles.
See w3c/ttml1#225
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).
CSS z-index
should be set to "0" on root container div
, otherwise the zIndex is relative to some other page element.
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.
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.
Time expressions of the form 100:00:00 are supported by TTML1
Reported at Dash-Industry-Forum/dash.js#1693 (comment)
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
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.