WebVTT line cue setting not following the spec in UITextDisplayer

[Robloche]

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

What version of Shaka Player are you using?
4.2.2

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

Can you reproduce the issue with the latest code from main?
Not tried.

Are you using the demo app or your own custom app?
My custom app.

If custom app, can you reproduce the issue using our demo app?
Not tried.

What browser and OS are you using?
Chrome 105.0.5195.127 (Build officiel) (64 bits)
Windows 10 Pro 21H2

What did you do?
I'm using UITextDisplayer to display WebVTT subtitles.
This particular subtitles file contains lines like:

00:04:32.760 --> 00:04:35.160 align:end position:90% line:91%,end
-J'y vais. Tu viens pas avec moi ?

What did you expect to happen?
The line should be displayed at the bottom of the screen, as per specification:
For horizontal cues, this is the vertical offset from the top of the video viewport, [...]

What actually happened?
The line appears at the top of the screen.
Inspecting the style shows me:
<div style="white-space: pre-wrap; direction: ltr; opacity: 1; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; font-weight: 400; font-style: normal; position: absolute; left: 0px; top: 0px; width: 100%; bottom: 91%; text-align: end; writing-mode: horizontal-tb;"><span style="background-color: rgba(0, 0, 0, 0.8);">-J'y vais. Tu viens pas avec moi ?</span></div>

I guess bottom: 91% should be top: 91%.
And indeed, doing it in Chrome DevTools actually moves the line to the bottom of the screen, as expected.

[Robloche]

After reading the specs here and here again, it appears that line:91%,end means that the bottom of the cue box is positionned at 91% of the viewport's height from the top of the viewport.
So, the subtitles should indeed appear at the bottom of the screen, but not by using top: 91% (which would be the translation of line:91%,start).

To clarify, line:91%,end means that the cue box should have a top property set to 91% - <height of cue box>.

So, it's my understanding that the problem is here:

shaka-player/lib/text/ui_text_displayer.js

Line 594 in 62906bd

style.bottom = cue.line + '%';

Please feel free to correct me if I misunderstood the specs.

[koenoe]

I'm actually having issues with this right now as well, but with absolute values. I've noticed this TODO in the code, so I'm looking if I can implement this in a PR. Could have a look at the problem @Robloche is having as well, or would it be better to keep this separate?

[Robloche]

You could have a look but should you able to fix both issues, 2 PRs would be better, I guess.
I also intend to fix this issue myself but don't have enough time right now.

EDIT: And by the way, if you solve the bug I reported, I'll be grateful forever. ;)

[Robloche]

To clarify, line:91%,end means that the cue box should have a top property set to 91% - <height of cue box>.

In fact, a simpler way ot fix it would be to replace:
style.bottom = cue.line + '%';
by:
style.bottom = (100 - cue.line) + '%';