Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

PNG different from browser display #74

Open
EyalLavi opened this issue Jan 19, 2018 · 12 comments
Open

PNG different from browser display #74

EyalLavi opened this issue Jan 19, 2018 · 12 comments

Comments

@EyalLavi
Copy link

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

image

PNG

image

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>
@palemieux
Copy link
Contributor

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.

@EyalLavi
Copy link
Author

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?

image

image

@palemieux
Copy link
Contributor

@EyalLavi Can you attach the source of the example above?

@EyalLavi
Copy link
Author

@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>

@palemieux
Copy link
Contributor

palemieux commented Jan 31, 2018 •
edited
Loading

@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

720p

Screen

720p-screen

@nigelmegitt
Copy link
Contributor

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 #74 (comment) 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?

@palemieux
Copy link
Contributor

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.

@nigelmegitt
Copy link
Contributor

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.

@EyalLavi
Copy link
Author

EyalLavi commented Apr 3, 2018

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.

@nigelmegitt
Copy link
Contributor

Not supporting writing-mode could be a bit of a blocker!

@palemieux
Copy link
Contributor

A common approach is to use a UA in headless mode, e.g. https://en.wikipedia.org/wiki/PhantomJS

@cfadamp
Copy link

cfadamp commented Jul 11, 2019

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.
browser_936
39 038999999999994

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
4 participants
@palemieux @nigelmegitt @cfadamp @EyalLavi