Subtitle styling

[willmtemple]

The default style for HTML5 subtitle tracks is designed to look like closed-captions on television, but users who are familiar with VLC or MPV and not with closed captioning will probably prefer the nicer styles of those players. I would think that it should be configurable, since some users will require captions rather than just subtitles and might prefer the caption style.

@dularion mentioned in #152 that she plans to move away from HTML5 subtitles/captions, but it might be easier to let HTML5 handle the subs and let the server work out how to extract embedded subtitles and convert ASS and other formats to VTT. You can add the styles directly to the converted VTT or put them in the page CSS. Is there a reason to render subtitles manually that I haven't thought of?

I whipped up some real quick CSS in dev tools that changes how the ::cue pseudoelement looks:

::cue {
    color: white;
    background: transparent;
    font-weight: 700;
    font-size: 48pt;
    text-shadow: 4px 4px 0 #000, -2px -2px 0 #000, 2px -2px 0 #000, -2px 2px 0 #000, 2px 2px 0 #000;
}

The biggest differences are that the subtitles are much larger, bolder, and only outlined, rather than completely filled in black. I only tested it in Chrome on a large monitor.

changes this:

to this:

[Shrinks99]

Looks nice, perhaps a few options could be given to users in the profile settings?

[MrArca9]

Would suggest adding a CSS edit text where adding any CSS code would override current implementation.

This would allow the users to customize the styling to their liking.

[ibito]

@willmtemple how can I do that?

[BeardOverflow]

Check out this project https://github.com/YePpHa/crunchyroll-html5

Adding the support for libass engine would be a great feature and less painful than using CSS styles. Also, would no longer be needed to convert from ssa/ass to vtt.

Please, consider it.

[sabian2008]

@willmtemple how can I do that?

For example, in firefox, you might open the Developer Console (F12), go to Style Editor, select *.css on the left and paste his code at the bottom, in the right panel.

What I want to ask is.. is there some way to make this css change persistent?

[jaroslawjanas]

Please add height adjustment as well.