This would be incredible for some privacy applications if you wrote a wrapper on top of it to obfuscate the class names. Clearly visible to users, very difficult for bots to pick up without clearly looking for it.
Honestly, there are much better tricks for steganography if that's what you want. The very fact that this renders as human-readable text with a standard web browser pokes a huge hole in the problem of keeping it secret.
This just reminds me of a very "gray hat" SEO project I dabbled with 8-9 years ago.
Back then we were grabbing dropped domains and rebuilding them in masse to harvest the search traffic and build an early "PBN." Not wanting to leave an obvious footprint for Google or having to build a ton of templates, we randomized everything. From generating logos on the fly to randomizing the html structure and css classes names an extra precaution.
The sites were ugly as sin, but since Google wasn't rendering CSS on every crawl it didn't matter.
Pair this with our monetization strategy that made extensive use of css's `content=""` to place large CTAs across different sites and this project reminds me of the lessons we learned back then.
Needless to say, this isn't a project I'm super proud of, but when I saw how non-accessible this CSS font was, I couldn't help but think about scrambling the class names as well.
> Pair this with our monetization strategy that made extensive use of css's `content=""` to place large CTAs
Ah, it was you!...
Whenever I searched for an obscure word and one of these sites cropped up, I was wondering what the monetization strategy for this garbage was. Now I finally know...
Well that went from 0-60 in no time. Society has much larger fish to fry.
No one was harmed in this endeavor. Sure it "polluted the web" and was against Google's guidelines, but we definitely weren't hacking or doing other true "black hat" things.
Ultimately it was shut down in 2012 and in the entire time I was involved in this 2 people requested their domain back and we sent it their way no questions asked.
Content was generated with our internal equivalent of a markov chain, so there wasn't content piracy either.
Sure, this project added no value to the web and we should have spent our time building an awesome service that generated links naturally... but as they say hindsight is 20/20.
It’s fairly trivial to quickly animate each letter or stroke to flicker at a random high speed interval so anytime a render captures a screenshot you get garbled incomprehensible text.
Pretty darn cool! One limitation I wish I could think of a workaround for is that "cutting out" parts of some letters (C, G, J, Q) requires laying a rotated white square over it, with white as the hardcoded background color. So this will only work with other background colors if you know the background color ahead of time or can configure it in JS or something.
This is awesome. Not everything built needs to be held to best practices and these sorts of projects are what make the web exciting!
I know I'm on HN but everyone responding is taking a tone like the creator said, "this is the best way to do it and everyone should use this in production" while on the page it only says they built it because they could -- because CSS has evolved to support it.
Probably useless for any applications, but this is really cool! The page with the definitions of all characters A–Z is here: https://yusugomori.com/projects/css-sans/fonts It's interactive, so you can actually see how the definition (CSS code) of each character corresponds to the actual shape seen.
Something like this (but with different primitives, not CSS) is how Donald Knuth made the program Metafont, using which he created Computer Modern in all its variants (the font used by default by every TeX/LaTeX document). His intent was to capture the “idea” of each letter shape (glyph in the font), by writing a program for drawing that letter, instead of simply drawing it. He came up with something vaguely similar (pens of varying thickness, erasers, etc). The program is described in Volume C of Computers and Typesetting (The METAFONTbook), and Volume E is a thick hardcover book somewhat like this page, which gives the definition of (program for) each character next to a picture of its shape.
More Metafont-related links, if anyone finds this sort of thing inspiring:
Metafont may not have had the right primitives for character drawing, and CSS obviously doesn't (it's not what it's designed for), but the idea of describing shapes is very interesting, and I still hope (despite decades of “failure”) that it can catch on. Maybe with interactive input and immediate visual feedback, it would be more appealing, at least for some people.
The novel bit here, for me, is how the 'C' 'G' and 'J' use 'knockouts' to remove 'ink', kinda like using a CSG (constructive solid geometry) subtraction.
To me, the most interesting part of Metafont is that it can take parameters. So your font could, for example, take a parameter for weight, letting you create as many different weight variants as you like. You can use one algorithm to create a Thin, Light, Regular, Medium, Demi, Bold, Black family of fonts. Or you could put a skew parameter in to generate an Oblique version (though true italics would require a separate algorithm).
We could skew fonts now if we wanted to. TTF fonts are mostly quadratic Bezier curves so we can redefine what the axes to use when rendering the font glpyhs. Instead of i = (1, 0), j = (0, -1) we can use i = (1, 0) j = (0.3, -1). There's a lot more to fonts obviously like bitmap glyphs, hinting, kerning, etc but we could build in some params if we wanted to.
There is a term for that "variable font". One type face come to mind, currently being developed, which should come out in september by famous Font Bureau. [1]
So are you supposed to write the whole thing using spans? Seems hard... maybe one way to pass the accessibility test (screen readers) is by putting the respective letter inside the span and set font-size to zero.
Fuck accessibility, right? Neat project, but please don't actually use this for anything serious. A lot of people use accessibility tools to interact with the web, and this this would make it nigh impossible for them to consume your content.
They used CSS to create the font (presumably as an art project?), but it is available in plain OTF/TTF format, so it can be used as a normal font and doesn't need to be a barrier to accessibility tools.
