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

textShadow Rendering Issue #133

Open
dkneeland opened this issue Nov 6, 2018 · 3 comments
Open

textShadow Rendering Issue #133

dkneeland opened this issue Nov 6, 2018 · 3 comments

Comments

@dkneeland
Copy link

dkneeland commented Nov 6, 2018 •
edited
Loading

When tts:textShadow has a negative X axis direction, the shadow will cover the preceding text.

image

IMSCJS_Issue_textShadow.xml.txt

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<tt xml:lang="en" 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" ttp:profile="http://www.w3.org/ns/ttml/profile/imsc1/text">
  <head>
    <styling>
      <style xml:id="proportional" tts:color="white" tts:backgroundColor="transparent" tts:fontFamily="proportionalSansSerif" tts:fontSize="80%" tts:fontWeight="normal" tts:fontStyle="normal"/>
    </styling>
    <layout>
      <region xml:id="trans_80"  tts:backgroundColor="transparent" tts:showBackground="whenActive" tts:origin="10% 10%"   tts:extent="80% 80%"  tts:textAlign="center" tts:displayAlign="after"/>
    </layout>
  </head>
  <body>
    <div>
      <p begin="15s" dur="1s" style="proportional" region="trans_80"><span tts:textShadow="-20% 10% 5% black">Shadow Example</span></p>
    </div>
  </body>
</tt>
@palemieux
Copy link
Contributor

This happens when text-shadow is applied across individual span elements: each of the span elements is rendered individually, resulting in span elements rendered later overlapping those rendered earlier. See example below:

https://codepen.io/palemieux/pen/aQvdQr

Until CSS supports becomes reality, imscJS unfortunately needs to wrap individual characters in span elements, e.g. to render itts:fillLineGap.

In typical use cases, isn't shadow offset small enough to avoid overlap?

@dkneeland
Copy link
Author

dkneeland commented Nov 6, 2018 •
edited
Loading

Normally the subtitle shadow will be slightly to the right/bottom of the text. I agree that in normal practice, this bug is not an issue.

@palemieux
Copy link
Contributor

@dkneeland Ok. That is good news. I suggest keeping the issue open in the backlog, revisiting it regularly.

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
2 participants
@palemieux @dkneeland