imscJS
imscJS copied to clipboard
sandflow
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>
Gaps are generally expected between lines when background is applied to span. `itts:fillLineGap' is used to fill these gaps.
It looks like the difference noted above between the PNG export and the in-browser view is due to a difference in pixel resolution between the two.
I am not sure the difference in resolution alone accounts for the difference between the in-browser display and the PNG. In the example below, the in-browser region fits an additional line of text compared to the PNG. Both are set to 1920x1080, so shouldn't the region and the text occupy the same number of pixels in both?
@palemieux see below. Interestingly, Chrome and FF produce slightly different versions of the PNG as well (although the difference is not as pronounced as compared to the browser).
<?xml version="1.0" encoding="UTF-8"?>
<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="S3" begin="00:00:10" end="00:00:15" region="top">
<!-- White space between spans renders as vertical gaps in the background colour. -->
<span style="white">White text on black background in the top region. </span><span style="white">The attributes wrapOption and overflow are omitted, </span><span style="white">so the initial values "wrap" and "hidden" apply. </span><span style="white">The text should wrap in the region and the overflow hidden. </span><span style="white">This line should be wrapped and cropped as it's 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 very very very very very very very very very long.</span>
</p>
</div>
</body>
</tt>
@EyalLavi Setting 1920x1080 in the app does not change the pixel resolution of the root container within the app. It only changes the exported pixel resolution. Exporting the same document at two different resolutions yields different line heights. This might be due to fractional font sizes. I have also engineered a special version of the app that uses a 1280x720 container, and the line heights on-screen and in the export are the same.
PNG
Screen
I'm interested in this working consistently too - this difference in behaviour is really awkward, though I can appreciate it's hard to fix. Even the two examples in https://github.com/sandflow/imscJS/issues/74#issuecomment-361955415 look different to me @palemieux : the screen one looks like it has a slightly heavier font, and fits slightly more of the cropped last line in. Could this be something to do with anti-aliasing or sub-pixel font smoothing in the on screen version that is not duplicated in the PNG presentation?
Could this be something to do with anti-aliasing or sub-pixel font smoothing in the on screen version that is not duplicated in the PNG presentation?
PNGs are rendered through a hack that wraps the HTML fragment that correspond to the root container into an svg element, which is then rendered to a PNG.
There is really no guarantee that the resulting PNG render of the svg element is equivalent to the HTML rendered to the user.
I could not find a means of generating a screenshot from within a web app, and plan on closing this ticket until/unless an approach is proposed.
Ah, shame, I don't know how to do this, but it looks like other people would like something similar too! I see that Firefox now has built-in 'Take a screenshot' functionality, but I do not know if that is available as an API call.
It may be possible to render the HTML fragment directly into an image (perhaps with something like http://html2canvas.hertzen.com/), but I admit I am no expert on this. If this isn't possible, a note to the user that caveats the PNG may be helpful.
A common approach is to use a UA in headless mode, e.g. https://en.wikipedia.org/wiki/PhantomJS
The same issue can be reproduced with the latest IMF Plugfest's FOX IMSC xml test file named "IMSC1-1_TEXT_Test-Reel_FMS_v3-1_2019-04-11.xml" (I am not sure I can share the source file for the public). In frame number 936, TC 00:00:39:00. I used Firefox 67.0.4 (64-bit) , Windows10
Notice the gap between the first and a second line is different in the two screenshots.
