Suggestion for much better text-stroke

[Johnnycyan]

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...