tts:textOutline style is not applied to the subtitle

kumarashu123 commented 3 years ago

Have you read the FAQ and checked for duplicate open issues? yes

What version of Shaka Player are you using? 2.5.10

Can you reproduce the issue with our latest release version? Yes

Can you reproduce the issue with the latest code from master? Yes

Are you using the demo app or your own custom app? Custom App

If custom app, can you reproduce the issue using our demo app? Yes

What browser and OS are you using? Version 92.0.4515.159 (Official Build) (x86_64), MAC Big Sur Version 11.4 (20F71)

For embedded devices (smart TVs, etc.), what model and firmware version are you using? N/A

What are the manifest and license server URIs?

What configuration are you using? What is the output of player.getConfiguration()?

What did you do? Play the asset and observe tts:textOutline is not getting applied

What did you expect to happen? tts:textOutline should be applied. As in ttml doc i see tts:textOutline is present https://www.w3.org/TR/2018/REC-ttml1-20181108/#style-attribute-textOutline

What actually happened?

tts:textOutline is not applied

Below is the sample ttml file


    <metadata>
      <ttm:title/>
    </metadata>
    <styling>
    <style xml:id="style.center.outline" xmlns:tts="http://www.w3.org/ns/ttml#styling" tts:fontFamily="Arial" tts:fontSize="100%" tts:fontStyle="normal" tts:fontWeight="normal" tts:backgroundColor="transparent" tts:color="yellow" tts:textOutline="black 2px" tts:textAlign="center"/>
    <style xml:id="style.right.outline" tts:fontFamily="Arial" tts:fontSize="100%" tts:fontStyle="normal" tts:fontWeight="normal" tts:backgroundColor="transparent" tts:color="yellow" tts:textOutline="black 2px" tts:textAlign="right"/>
    <style xml:id="style.left.outline" tts:fontFamily="Arial" tts:fontSize="100%" tts:fontStyle="normal" tts:fontWeight="normal" tts:backgroundColor="transparent" tts:color="yellow" tts:textOutline="black 2px" tts:textAlign="left"/>
    </styling>
    <layout>
      <region xml:id="r0" tts:displayAlign="after" tts:origin="10% 69%" tts:extent="80% 26%"/>
      <region xml:id="r1" tts:displayAlign="after" tts:origin="10% 53%" tts:extent="80% 26%"/>
      <region xml:id="r2" tts:displayAlign="before" tts:origin="10% 2%" tts:extent="80% 26%"/>
    </layout>
  </head><body><div><p style="style.center.outline" begin="00:01:36.040" region="r0" xml:id="p53" end="00:01:38.279" ><span tts:direction="rtl">Tak sesuai dengan rancangan kita.<br/>- Kenapa?</span></p><p style="style.center.outline" begin="00:01:38.520" region="r0" xml:id="p54" end="00:01:40.599" ><span tts:direction="rtl">Kenapa pula tak sesuai?<br/>- Tak sesuai untuk hari ini.</span></p><p style="style.center.outline" begin="00:01:40.679" region="r0" xml:id="p55" end="00:01:42.000" ><span tts:direction="rtl">Ini bukan rancangan muzik.<br/>- Awak perlu nampak kasual.</span></p></div></body></tt>```

  **expected subtitle**
https://www.w3.org/TR/2018/REC-ttml1-20181108/images/textOutline.png
![Screenshot 2021-08-31 at 5 03 20 PM](https://user-images.githubusercontent.com/10974291/131495700-df82b1cd-593d-426c-8aa6-492a4578432b.png)

avelad commented 3 years ago

tts: textOutline does not yet support the TTML parser https://github.com/google/shaka-player/blob/master/lib/text/ttml_text_parser.js.

theodab commented 3 years ago

According to the w3g's wiki, this property is being deprecated, due to the corresponding CSS property not being supported by browsers. Despite that, though, we could replicate most of the tts:textOutline property using the non-standard -webkit-text-stroke-width and -webkit-text-stroke-color properties. We would be unable to replicate the blur radius, but it looks like you aren't using the blur radius feature anyway.

shaka-project / shaka-player

tts:textOutline style is not applied to the subtitle #3612