I wonder why the firefox CSS rendering engine prefers to smooth out. Looks like a dramatically different implementation, but maybe that's just because it's an edge case of rendering
I wonder why the firefox CSS rendering engine prefers to smooth out. Looks like a dramatically different implementation, but maybe that's just because it's an edge case of rendering
While I don't entirely love the rounding effect of firefox, I feel Chrome interpretation is just wrong in creating spurious spikes. Intuitively for the asterisk shape I'd expect the outline to go towards a plain hexagon, something that neither browser accomplishes.
firefox looks like an SDF (shortest distance to the object), I'm not sure what the chrome one is...
I would assume they are just drawing the outline, not performing any distance calculations, and the differences are just a result of different linejoin choices. [1]
[1] https://www.w3.org/TR/fill-stroke-3/#stroke-linejoin
I'd imagine that at some point during the text rendering process, they have to generate an SDF of the text they want to render (it's what I did when I wanted to manually render text anyway). If they do, then they can generate the extra text-width lines basically for free, just fill everything with distance less than the property.
I may be entirely wrong though, I don't know in detail how browsers render stuff
Look at V in Love. It looks like bug in Chrome.