[VTT writer]Missing vertical position styling in output VTT file

[aligator4sah]

Hello, team! Thanks for this awesome tool for helping us convert the subtitle format. My team is mainly working on the APAC related subtitles and we found there are some issues while converting the ttml file to VTT. One of the problem is that the output VTT file didn't include the vertical information even though the original ttml writingMode was defined the vertical subtitle in layout field. Furthermore, if the vertical and horizontal subtitle display on the same screen, the timecode seems have overlap and therefore, there are duplicate subtitles appear on the main scree.

[palemieux]

Duplicate of #430

[palemieux]

@aligator4sah Does pull request #434 work for you? I have been reluctant to add support for vertical text in WebVTT until there is some level of test material and sample players available. Can you share test material? Which WebVTT player have you been using for testing?

[aligator4sah]

Thanks for the update but I don't think it's the same issue. #434 solved the problem on , that's also one of the issues I found. But this issue was about vertical position. More specifically, in the ttml file, the vertical subtitle will be defined as
<region xml:id="Region_Vertical_Left" tts:backgroundColor="transparent" tts:showBackground="whenActive" tts:origin="5% 5%" tts:extent="90% 90%" tts:textAlign="start" tts:displayAlign="after" tts:writingMode="tbrl" tts:luminanceGain="3.0"/>,
However, after convert to VTT, the subtitle was marked as
170 00:24:04.526 --> 00:24:06.195 line:95%,end プリセプター… 教育担当

While it should be
170 00:24:04.526 --> 00:24:06.195 vertical:rl line:5% position:5% size:80% プリセプター… 教育担当

Sorry I can't share the content due to enterprise policy but I added a fix already and I will create PR on it. Appreciate it if you can help review!

[palemieux]

Sorry I can't share the content due to enterprise policy but I added a fix already and I will create PR on it. Appreciate it if you can help review!

What player are you using?

[aligator4sah]

Video.js

[palemieux]

@aligator4sah Two (hopefully) quick questions:

• have you tried Safari in addition to video.js?
• what is your workflow for testing VTT files in video.js? What is the minimal setup?

[palemieux]

@aligator4sah @MtHunny I would like to make progress on ruby support. It sounds like playback on Safari and video.js is a good test. We also need a basic set of test files. Can you help?

[MtHunny]

@palemieux Is it okay if I prepare the corresponding IMSC and VTT files? I'm thinking of preparing them based on the IMSC test. It might take some time, is that alright?

[palemieux]

@MtHunny It would be ideal to use selected files from the IMSC test suite since these have reference renders (PNGs). So the process would be:

• convert the IMSC file to a VTT file using ttconv
• render the VTT file to PNG using video.js and Safari
• compare the rendered PNG with the reference IMSC PNG

See for example: https://github.com/w3c/imsc-tests/blob/main/imsc1_1/png/rubyAlign003/0.000000.png

We do not need to do all of the IMSC test suite, just the vertical writing tests.

Makes sense?