Repository navigation
textShadow Rendering Issue #133
Description
When tts:textShadow has a negative X axis direction, the shadow will cover the preceding text.
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>
Activity
palemieux commentedon Nov 6, 2018
This happens when
text-shadowis applied across individualspanelements: each of thespanelements is rendered individually, resulting inspanelements 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
spanelements, e.g. to renderitts:fillLineGap.In typical use cases, isn't shadow offset small enough to avoid overlap?
dkneeland commentedon Nov 6, 2018
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 commentedon Nov 6, 2018
@dkneeland Ok. That is good news. I suggest keeping the issue open in the backlog, revisiting it regularly.