Yeah, it is only base64ing the woffs. The reason I post it is that it has all the benefits of this project (only CSS) without the downsides (being ridiculously hard to use).
I wouldn't call that a pure CSS font, as it's just a Base64 encoded WOFF font embedded in CSS as a data URI. It can save you for that extra HTTP request, though, if you only need to support modern browsers which support WOFF fonts.
I miss the html-pages of old times. http://motherfuckingwebsite.com/
Just full of information. Or non-information. But full of it and not full of empty space or animated backgrounds that makes my cpu-fan convert to jet-engine.
Thanks for this link! I've always love reading GNU manuals in HTML because it relies on your browser's navigation, which is always better than what any website could implement itself. Ctrl-F is fast because scrolling is trivial and doesn't require a Javascript callback for every pixel scrolled, and without a CSS-customized div after every paragraph, you can load web pages containing 2MB of text just fine.
Indeed. My 16 MHz Atari could handle homepages just fine. My 1.8 GHz laptop has troubles now and then and we should not speak about my 2 year old quad-core phone.
Really cool exercise in CSS. My first thought is that texts displayed using this font can't be selected/copied & won't be screen reader friendly. Might make for a great way to display your email or phone number on a site without worrying it would get scraped by marketers.
Obviously it won't make it impossible to decipher, just harder (and perhaps not worth the effort). If the line order of each statement is also randomized and useless attributes are added, they'd have to pretty much compile the CSS and compare the attributes.
The alternative way to beat all email obfuscation techniques is of course taking a snapshot and running OCR on it, but certainly not worth the effort/CPU time.
Not as much effort as you might think. Command-line rendering of html (including css and js) and taking a screenshot is not very difficult. If a site used this method, and someone is highly motivated to break that captcha, the effort put in would be nothing compared to the benefit of bypassing the "security".
If you can select to copy its no different than a screen reader. There's is 0 usefulness to this, and it's embarrassing that it's on the front page of hacker news right now.
Nice idea. Even just preventing the information to get sucked up during search engine indexing and cached in the description can be a valuable side effect.
I have been trying to find out if the single-stroke text used by 'Hershey'text extension in Inkscape is visible to screen reader's/scraper's/bot. This type of text font is used in Blueprint's.
Very cool how this project uses the font face to explore how CSS rendering has evolved over time. I find it strangely beautiful when rendered in IE 6/7, almost like an alien language.
This is pretty cool. It's unfortunate that some characters (CGJQ) require masking with a background colour to get the desired shape. It would be nice if this could be resolved so this could be used on any background.
This might be viable using Sass or Less, since they have support for variables, nested selectors, etc. Although I'm not really a front-end engineer, so I don't know exactly what would be involved.
Sass or Less still output standard CSS in the end, which gets interpreted by the browsers. Anything written in Sass or Less would still have to work within the limitations of CSS.
This is really well done and polished. Great stuff. About a year ago when I was bored, I made a quick and dirty codepen [1] of the exact same thing you have here. I added a transition to it so you can type to switch the letters.
I also made it so you can type with pure CSS letters [2]. It's nothing great like what you've done, but I'd thought I would share anyways.
I've come to love autoprefixer[1] on a current project for just this reason. It's a CSS preprocessor that deals with prefixing and property syntax changes across browser versions. Usage:
1. Write unprefixed CSS
2. Tell autoprefixer what browser versions to support
3. It adds the correctly prefixed properties for you
Interestingly, autoprefixer uses the property support data from caniuse.com to determine what prefixes to apply.
Typography that maintains a relative width to the rest of the page content and scales with everything else. Similar to how it's desirable to use CSS shapes over images.
At the risk of making an uninteresting comment -- I really love seeing cool/interesting work like this done by people who aren't devs in America. Not that there's anything wrong with American tech or devs particularly, but just that I feel like we're finally getting at the true promise of the internet.
Great work, Found the characters really consistent in style, and obviously functional.
There's nothing new about non-Americans creating amazing software. Linus Torvalds is Finish. Guido van Rossum is Dutch. Matz is Japanese. Fabrice Bellard is French. DHH is Danish. Tim Berners-Lee is English.
Very cool project but I fear that this approach will only work for relatively simple glyphs that can be broken down into 3 sections (main, :before and :after) whereas Chinese characters, for example, may take up a few dozen strokes.
Hello! Thank you for your article. I’d like to try to compare it to my previous experience of learning English through Skype. I did around 10 conversations over Skype with a native speaker from http://preply.com/en/english-by-skype. And I was pretty satisfied with their Quality. I think they have a strong teaching quality, following their course curriculum now I can speak English like a native they also provide local tutors, but I Want to try another option.
67 comments
[ 5.4 ms ] story [ 115 ms ] threadhttps://github.com/Khan/KaTeX
I've actually found its much nicer using this in my projects than using a font cdn or self hosting woff files.
I do like the minimalism of css rules to creating this font as opposed to having a giant data section. It's pretty neat
The link itself is actually drawing/creating the font itself in CSS. Different method entirely.
It's a simple regex substitution or map().
The alternative way to beat all email obfuscation techniques is of course taking a snapshot and running OCR on it, but certainly not worth the effort/CPU time.
I see how its a fun exercise in CSS and everything, but actually providing it as a download as if people will use this productively is stupid.
Lol obligatory XKCD!
http://xkcd.com/1497/
http://people.mozilla.org/~mclaypotch/CSS-Sans/
(GitHub: https://github.com/potch/CSS-Sans)
http://imgur.com/8SNbm0k
http://yusugomori.com/projects/css-sans/archive
I also made it so you can type with pure CSS letters [2]. It's nothing great like what you've done, but I'd thought I would share anyways.
[1] http://codepen.io/ncerminara/pen/yFcfn
[2] http://codepen.io/ncerminara/pen/cEbGC
[1] More info and link to interactive demo at: https://github.com/postcss/autoprefixer
Honest question.
Also, can anyone think of any practical uses for this?
Great work, Found the characters really consistent in style, and obviously functional.
And that's just off the top of my head!
No wonder Knuth dedicated a whole chapter to this one letter in "Digital Typography".
Couldn't the size be defined proportionally to the expected size ?