Improve subs

[dannymichel]

Changes Improve subtitles by changing default dont to universal system font stack(the same one github uses) and improving stroke for uniform option.

Before/after video 00:00-00:17 = before(current jellyfin) 00:18-00:32 = after(pull request version) https://youtu.be/XpWnDU5S_6k

Screenshot

[cvium]

When making visual changes it's very helpful if you include before and after pics.

[dannymichel]

When making visual changes it's very helpful if you include before and after pics.

Good point

[dannymichel]

Before/after video 00:00-00:17 = before(current jellyfin) 00:18-00:32 = after(pull request version) https://youtu.be/XpWnDU5S_6k

[thornbill]

I think the font changes are fine, but the shadow looks a bit harsh. I believe @dmitrylyzo had a suggestion for a softer shadow.

[dannymichel]

I think the font changes are fine, but the shadow looks a bit harsh. I believe @dmitrylyzo had a suggestion for a softer shadow.

Thanks I mean sure I guess I can do that I just took the css directly from Netflix to be perfectly honest

[dmitrylyzo]

The problem is that px is always px. With a small font, the shadow starts to look oversized.

As has been said, to show the UI changes, it is better to add "before/after" pics. The video is good for demonstrating changes in behavior (or issues).

Before These are Smaller, Normal and Extra Large. But they are scaled down in the preview window, so you can skip the first line, and the rest are equal to Smaller and Normal. After (px - yours)

I tried to use em as 1px -> 0.02em and added more layers (which I don't like because it is more things to draw). In my test, I also removed 0,0.

After (em)

Your pattern:

 22222 
3211123
3210123
3211123
 22222 

My pattern:

 33333 
3222223
3211123
321 123
3211123
3222223
 33333 

You could try (with 1px -> 0.03em):

 222 
21112
21 12
21112
 222 

Actually, I just tried it and it looks acceptable.

Moreover, I think we can use #000 for short.

[dannymichel]

I'll change it to em

[dannymichel]

Moreover, I think we can use #000 for short.

I changed it to em and it looks much better small or large

[dannymichel]

Did the cleanup, removed the bold

[dannymichel]

Did the cleanup

The question about the pattern still stands. The pattern I believe is a preference or standard thing. I see this pattern as a standard on other platforms.

[dannymichel]

Did the cleanup

You overdid it a bit.

Changed that to 03

[dannymichel]

Added bold option https://github.com/jellyfin/jellyfin-web/pull/3625

[dmitrylyzo]

What they look like now.

[dannymichel]

What they look like now.

looks great

[dannymichel]

New PR for bold option https://github.com/jellyfin/jellyfin-web/pull/3625

[dannymichel]

Everything good, @dmitrylyzo ?

[dannymichel]

@dmitrylyzo if it's not all good, please post your commit suggestion for the following and i will do it

list.push({ name: 'text-shadow', value: '#000 0px 0.04em, #000 0px -0.04em, #000 0px 0.07em, #000 0px -0.07em, #000 0.04em 0px, #000 -0.04em 0px, #000 0.04em 0.04em, #000 -0.04em 0.04em, #000 0.04em -0.04em, #000 -0.04em -0.04em, #000 0.04em 0.07em, #000 -0.04em 0.07em, #000 0.04em -0.07em, #000 -0.04em -0.07em, #000 0.07em 0px, #000 -0.07em 0px, #000 0.07em 0.04em, #000 -0.07em 0.04em, #000 0.07em -0.04em, #000 -0.07em -0.04em, #000 0.07em 0.07em, #000 -0.07em 0.07em, #000 0.07em -0.07em, #000 -0.07em -0.07em, #000 0.09em 0px, #000 -0.09em 0px, #000 0.09em 0.04em, #000 -0.09em 0.04em, #000 0.09em -0.04em, #000 -0.09em -0.04em' });

[dmitrylyzo]

I think the shadows are still too thick - the contrast hits the eye.

[dannymichel]

I think the shadows are still too thick - the contrast hits the eye.

Can you post your version as a commit suggestion as you did above with other lines?

[dmitrylyzo]

With original sizing (170%). Before Now 0.03em 0.06em

[dannymichel]

If you need to make it thinner, you should add the old px-version which will be used for the small font.

it looks so much better

[dmitrylyzo]

If you need to make it thinner, you should add the old px-version which will be used for the small font.

it looks so much better

I meant that if you want to go for, say, 0.02em 0.04em, you can prepend -1px 0px #000, 0px 1px #000, 1px 0px #000, 0px -1px #000, (<- old px-version). In this case the 1px-shadow takes the place of the zeroed em-shadow if the font is small.

You have returned useless 0px blur and useless "0,0" shadow.

With the "oval" pattern, the stroke width is uneven, and the flat (horizontal) edge on the e is bigger.

[dmitrylyzo]

I've played around with the values and I think I like 0.03em 0.05em more. But it is more a question of rounding em to px.

[sonarcloud[bot]]

Kudos, SonarCloud Quality Gate passed!   

0 Bugs
0 Vulnerabilities
0 Security Hotspots
0 Code Smells

No Coverage information
75.0% Duplication

[sonarcloud[bot]]

Kudos, SonarCloud Quality Gate passed!   

0 Bugs
0 Vulnerabilities
0 Security Hotspots
0 Code Smells

No Coverage information
0.1% Duplication