Comments (12)
palemieux
commented on May 28, 2024
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.
from imscjs.
EyalLavi
commented on May 28, 2024
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?
from imscjs.
palemieux
commented on May 28, 2024
@EyalLavi Can you attach the source of the example above?
from imscjs.
EyalLavi
commented on May 28, 2024
@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>from imscjs.
palemieux
commented on May 28, 2024
@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
from imscjs.
nigelmegitt
commented on May 28, 2024
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?
from imscjs.
palemieux
commented on May 28, 2024
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.
from imscjs.
nigelmegitt
commented on May 28, 2024
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.
from imscjs.
EyalLavi
commented on May 28, 2024
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.
from imscjs.
nigelmegitt
commented on May 28, 2024
Not supporting writing-mode could be a bit of a blocker!
from imscjs.
palemieux
commented on May 28, 2024
A common approach is to use a UA in headless mode, e.g. https://en.wikipedia.org/wiki/PhantomJS
from imscjs.
cfadamp
commented on May 28, 2024
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.
from imscjs.
Related Issues (20)
- For .. in loops not protected from iterating prototype properties HOT 14
- Upgrade to use es6 language features? HOT 1
- `Set()` has a name clash with the ES6 `Set` object HOT 1
- Multiple referenced generic font family names can result in duplicate font-family values
- Error parsing fontSize with two lengths HOT 2
- Improve performance with a large number of regions and ISDs
- Unable to specify rgba color values for tts:textShadow HOT 1
- elementBoundingRect needs to be declared a `var`
- Update timeBase attribute to accept full list of values HOT 6
- adjacent tts:textCombine spans are combined into a single span HOT 3
- HTML rb, rtc and rbc elements are deprecated HOT 2
- if a line starts/ends with a ruby definition, line padding is not applied
- SMPTE timecode parsed incorrectly (23.976 FPS) HOT 1
- Resolve images source while generating ISD HOT 18
- Replace the XML SAX parser with a DOM parser HOT 6
- Spaces in `tts:fontFamily` list not handled in HTMLStylingMapDefinition code HOT 1
- Firefox bug with negative margins HOT 1
- FontFamily `default` name mapping missing HOT 7
- fillLineGap doesn't always fill the gap HOT 11
- Uncaught (in promise) TypeError: Cannot set properties of undefined (setting 'imscISD') HOT 4
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from imscjs.