search

sandflow / imscJS

JavaScript library for rendering IMSC Text and Image Profile documents to HTML5
BSD 2-Clause "Simplified" License
84 stars 31 forks source link

textShadow Rendering Issue #133

Open dkneeland opened 6 years ago

dkneeland commented 6 years ago

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 commented 6 years ago

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 commented 6 years ago

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 commented 6 years ago

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