Multi-stroke text effect in CSS
108 points by fanf
108 points by fanf
I was baffled by the CSS syntax but nodding along thinking "I guess CSS changes a lot each year" until I did a double take when I read @google-font. Turns out the author makes https://css-doodle.com/ which adds its own functionality to CSS
I was started by @google-font, too. It looks like CSS custom functions are in the pipeline, though not widely supported yet.
the first of their "two more examples" images tells me that the 𖤛 in the font they used has an improperly closed path in the top right extreme point
Are these all improperly closed paths? I keep looking at these examples and seeing the same kind of bug being amplified in each subsequent outline causing jagged outlines that aren’t representative of the underlying characters. You’re saying there’s bugs in the vectors of the font they’re using and that’s what’s causing all of them?
I can't speak for all of the examples you're seeing, but it's very easy for design software to leave a duplicate node, especially at a corner point. This leaves the glyph with a zero-length path of undefined direction. Any render that applies magnified effects will make these glitches apparent.
Thankfully we've got past the simple renderers that were in early typesetter RIPs. They were absurdly strict about control points on integer coordinates, control points at X and Y maxima (so they could calculate a bounding box by walking points, rather than rendering each curve segment: this was later useful for screen hints) and no duplicate points. They'd take a long and expensive time to tell you that your fonts were buggy.