Jellyfin-web: Inconsistent size of subtitles

[purcell]

Describe the bug

When choosing "extra large" subtitles, the subtitles are not actually large when viewed in full screen, and do not scale with the overall viewport.

To Reproduce

• Select "extra large" subtitles
• Play a video with soft subs in a smallish browser window. The subtitles will seem relatively large.
• Make the window full-screen to view the video from a distance. The subtitles will remain the same absolute size, and not be reasily eadable.

Expected behavior

I would expect the large subtitles to be _relatively_ large, so that when a player window is made bigger for convenient viewing at a distance, the subtitles are correspondingly larger.

Context/notes

The corresponding HTML is the following:

<div class="videoSubtitles">
  <div class="videoSubtitlesInner" style="font-size: 2.2em; text-shadow: rgb(0, 0, 0) 0px 0px 7px; background-color: transparent; color: rgb(255, 255, 255); font-family: inherit; font-variant: none;">
    <font size="36">A VERY SECRET SERVICE</font>
  </div>
</div>

There are 2 impediments here to correct scaling. Firstly, the <font> element wrapper appears to defeat the font style of the wrapper element, which is clearly designed to cascade onto the sub text itself.

Secondly, the videoSubtitlesInner element specifies a font size that is effectively fixed in height, since the default font size for the page is fixed, and not relative to the viewport height.

The suggested fix would be as follows:

• Remove the <font> wrapper element. I couldn't see where that's added, sorry.
• Set the font size of the videoSubtitles to a fraction of the viewport height so that it is a useful relative basis height for scaling the subs it contains.

I did the above in the browser dev tools and got a good result by effectively adding the style rule

.videoSubtitles { font-size: 4vh; }

(As a more general suggestion, since Jellyfin offers an "in-browser player app" experience it might make sense to set the font size for the entire UI in vh units. That's beyond the scope of this bug report, though!)

System:

• OS: macOS
• Browser: Firefox
• Jellyfin Version: 10.4

Hope that helps, and many thanks for Jellyfin!

[stale[bot]]

Issues go stale after 90d of inactivity. Mark the issue as fresh by adding a comment or commit. Stale issues close after an additional 14d of inactivity. If this issue is safe to close now please do so. If you have any questions you can reach us on Matrix or Social Media.

[JustAMan]

shoo bot
also cc @redSpoutnik as one of subs contributors

[redSpoutnik]

The font-sizes of subtitles are defined here:

https://github.com/jellyfin/jellyfin-web/blob/9dbf4b63d6760551c51426dd632a3ada6fdedaab/src/components/subtitlesettings/subtitleappearancehelper.js#L8-L53

We could use a font-size relative to the window but how to choose the values for textSizes?
This might look very different depending on the screen you use (in my understanding, the em unit avoid the problem).

Besides, I am not sure vh is the best unit to use: for very large screens it will result in smaller subtitles, I think vw could be better.

[purcell]

Besides, I am not sure vh is the best unit to use: for very large screens it will result in smaller subtitles, I think vw could be better.

Isn't vh the ideal unit for subtitles? Screens of the same height often vary in width due to different aspect ratios, but the relative height of the text compared to the height of the image is presumably what determines legibility. Maybe I'm missing something though!

[stale[bot]]

Issues go stale after 90d of inactivity. Mark the issue as fresh by adding a comment or commit. Stale issues close after an additional 14d of inactivity. If this issue is safe to close now please do so. If you have any questions you can reach us on Matrix or Social Media.

[purcell]

Mark the issue as fresh by adding a comment or commit.

Still fresh IMO.

[pericoloso69]

Considering the fact that the subtitles size is not saved after being updated in the user preferences and the default subtitles size is so small, this issue is really boring. A font size relative to the screen size is a good solution.

[dmitrylyzo]

Considering the fact that the subtitles size is not saved after being updated in the user preferences

Looks like now you have to explicitly save settings after #1541
At current moment, there is an issue with warning about unsaved changes - it pops up only on view destroying, but should pop up on Back.

[pericoloso69]

Thx, I looked for opened issue and didn't find this one.

Anyway, I made a quick TamperMonkey script here to set the subtitles size to 6vh (overrides the size set in the user preferences, you just need to update the @Include). It seems to be sufficient for me but I haven't spend much time testing.
I will try to get the necessary time for a pull request with proper values and testing...

[purcell]

I made a quick TamperMonkey script here

Similarly, I have UserStyles rules that override the size to what I consider a comfortably large size:

.videoSubtitles {
    font-size: 4vh !important;
}
.videoSubtitles font {
    font-size: inherit !important;
}

I'd have submitted a PR myself if I could see where the <font> elements are getting produced. IIRC I had the impression that the HTML looked different for different sub formats, but I might have been mistaken.

Obviously in any decent PR there should be no need for !important. 😄

[stale[bot]]

Issues go stale after 90d of inactivity. Mark the issue as fresh by adding a comment or commit. Stale issues close after an additional 14d of inactivity. If this issue is safe to close now please do so. If you have any questions you can reach us on Matrix or Social Media.

[purcell]

This is still broken despite the bot closing it.