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.
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]
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
Shadows have to be spread in a circle to achieve an outline, so the general shape will converge to roughly a circle, barely following the shape of the text.
If you have a lot of "images" with such effects to generate from dynamic text, using SVG makes no sense, is vastly more complex and less flexible than the solution here.
You don't generate images, you just embed SVG nodes in the DOM. From the browser's perspective SVG and HTML elements are just two different types of element.
SVG is not great for text - HTML has more features - but for display text it's OK.
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.
OT: really love the design of this blog. Simple, clear and content first.
Neat! It's unfortunate that the rendering is so different between browsers.
Have you tried the same thing with shadows? They can also be stacked, I believe.
Shadows have to be spread in a circle to achieve an outline, so the general shape will converge to roughly a circle, barely following the shape of the text.
This is so freaking cool
People should quit trying to make CSS a drawing tool--it is not--and start learning how to use SVG instead or images.
Art is often made from clever use of things that were not intended to make art. Let them have fun.
Too late: https://codepen.io/jaysalvat/pen/kazzOj
The article literally says "it's not well-suited for production usage" so I don't really see the reason for the objection here. It's an experiment.
If you have a lot of "images" with such effects to generate from dynamic text, using SVG makes no sense, is vastly more complex and less flexible than the solution here.
You don't generate images, you just embed SVG nodes in the DOM. From the browser's perspective SVG and HTML elements are just two different types of element.
SVG is not great for text - HTML has more features - but for display text it's OK.
I would think that quite a few powerful new ideas have come purely from abusing and bashing around older ideas.
This could actually be cool for display text like a headline. I don’t think that’s only for images.