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

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

Closed
kumarashu123 opened this issue Aug 31, 2021 · 2 comments
Closed

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

kumarashu123 opened this issue Aug 31, 2021 · 2 comments
Assignees
@theodab
Labels
component: captions/subtitles The issue involves captions or subtitles component: TTML The issue involves TTML subtitles specifically priority: P3 Useful but not urgent status: archived Archived and locked; will not be updated type: enhancement New feature or request
Milestone
v3.3

Comments

@kumarashu123
Copy link
Contributor

kumarashu123 commented Aug 31, 2021 •
edited

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
Copy link
Collaborator

avelad commented Aug 31, 2021

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

@theodab theodab added component: captions/subtitles The issue involves captions or subtitles type: enhancement New feature or request priority: P3 Useful but not urgent component: TTML The issue involves TTML subtitles specifically and removed needs triage labels Sep 14, 2021
@shaka-bot shaka-bot added this to the Backlog milestone Sep 14, 2021
@theodab
Copy link
Collaborator

theodab commented Sep 14, 2021 •
edited

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.

@theodab theodab self-assigned this Sep 14, 2021
@shaka-bot shaka-bot added the status: archived Archived and locked; will not be updated label Nov 13, 2021
@shaka-project shaka-project locked and limited conversation to collaborators Nov 13, 2021
@avelad avelad modified the milestones: Backlog, v3.3 May 4, 2022
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Assignees

@theodab theodab

Labels
component: captions/subtitles The issue involves captions or subtitles component: TTML The issue involves TTML subtitles specifically priority: P3 Useful but not urgent status: archived Archived and locked; will not be updated type: enhancement New feature or request
Projects
None yet
Milestone
v3.3
Development

No branches or pull requests
4 participants
@avelad @kumarashu123 @shaka-bot @theodab