Suggestion for much better text-stroke

[Johnnycyan]

trafficstars

The webkit-text-stroke that is currently used is terrible as it puts the stroke inside of the text instead of outlining the text. This means it reduces readability especially on larger sizes. I propose you instead use a combination of drop-shadow and text-shadow filters which can replicate a text-stroke but is actually properly on the outside of the text. The drop-shadow filters go on the name to support 7tv name paints and the text-shadow filters go on the message to avoid emotes getting a stroke applied. The text-stroke has 4 more axis to properly cover the entire text.

The only downside to this method is you can only use whole number pixels and because there is essentially one on each side the size is twice the pixel value. So this means it can only replicate the stroke sizes of 2 and 4 in the current system. But this does theoretically allow as large of a stroke as you want since it isn't placed inside the text.

Here is an example css code using this method

:root {
    --message-stroke: 2px; /*The stroke size of the message which is always 2x the stroke size of the name. Size of 2px is equal to the current stroke=2. 4px is equal to stroke=4.*/
    --message-stroke-min: -2px; /*The negative stroke size of the message which is always 2x the stroke size of the name. Size of -2px is equal to the current stroke=2. -4px is equal to stroke=4.*/
    --name-stroke: 1px; /*The stroke size of the name which has to be half the size of the message stroke because of how drop-shadows are calculated. Size of 1px is equal to the current stroke=2. 2px is equal to stroke=4.*/
    --name-stroke-min: -1px; /*The negative stroke size of the name which has to be half the size of the message stroke because of how drop-shadows are calculated. Size of -1px is equal to the current stroke=2. -2px is equal to stroke=4.*/
}

.nick {
    filter: 
        drop-shadow(var(--name-stroke-min) var(--name-stroke-min) 0 #000)
        drop-shadow(var(--name-stroke) var(--name-stroke-min) 0 #000)
        drop-shadow(var(--name-stroke) var(--name-stroke) 0 #000)
        drop-shadow(var(--name-stroke-min) var(--name-stroke) 0 #000);
}

.message, .colon {
    text-shadow:
        var(--message-stroke-min) var(--message-stroke-min) 0 #000,
        0 var(--message-stroke-min) 0 #000,
        var(--message-stroke) var(--message-stroke-min) 0 #000,
        var(--message-stroke) 0 0 #000,
        var(--message-stroke) var(--message-stroke) 0 #000,
        0 var(--message-stroke) 0 #000,
        var(--message-stroke-min) var(--message-stroke) 0 #000,
        var(--message-stroke-min) 0 0 #000;
}

And here is an example image comparing the current stroke method with this shadow method:

[IS2511]

Honestly forgot if I added this or not, probably didn't.

[IS2511]

Yeah, forgot to close this. Currently the shadow setting uses filter: drop-shadow();. No text-shadow because I'm pretty sure it looks terrible or breaks something, like the 7tv namepaints. Either way, right now shadows look ok. If there is ever any improvement in CSS in this direction, don't hesitate to open another issue.

[IS2511]

Giant blunder. This is still not implemented for stroke. For some reason I was thinking of shadows... Reopened until I fix this.

Also, funny story:

Some fonts apparently have invalid edges (they go into the letters) and stroke goes right in there too. Wow, good one font authors, thanks. I guess doing stroke as shadow is the only way to fix that...

[IS2511]

Thanks to our lord and savior @lordmau5, who DMed me an amazing thing on discord, I am going to finally be fixing this fr fr.

The amazing thing: paint-order: stroke fill;.

Unfortunately it only works on OBS 31.0.0 and newer. Because in OBS 31 the internal CEF (Chromium) was updated to version 127 (6533)^1, and before that Chrome had a bug that made paint-order not work on text lol^2.

So what do for old versions? Many streamers are bastards and don't update their OBS[^3]. And we still can make a poor man's stroke with shadow, right? But then... https://owumaro.github.io/text-stroke-generator/. Truly cursed things are possible with this. Now I just need to get OBS version from the web source somehow.

So the plan is to add paint-order: stroke fill; for newer OBS versions and polyfill with some shadow magic for OBS 30 and below.

[^3]: Understandable to be honest. Streaming tools frequently break with updates, and preserving a working setup is a priority when it's what your income relies on.

[IS2511]

Should be resolved by https://github.com/IS2511/ChatIS-v2/commit/e5ea7f4dbaea81dc44b62e417e5c8d0563e7a236.

Yes, if the username has a 7tv namepaint it wont add stroke to it. Not sure it's worth it to figure out how to make that work, maybe later.