SlabText.js | Hacker News Reader

SlabText.js

frequency-decoder.com

131 pointselectic16 comments

Nice :)

Just some feedback, there's about a 1 second delay before the final text is rendered on initial load. This creates a slight jarring experience due to resizing, kinda analogous to the infamous @font-face FOUC/FOUT issue

Tested on latest versions of Chrome, Firefox and Safari.

It's actually exactly a 1 second delay:

$(window).load(function() { setTimeout(slabTextHeadlines, 1000); });

"Always call the script after all fontface fonts have downloaded. I’ve hacked this for the demo to enable you to see the headline transformation as the script kicks-in but you should always use google WebFont loaders active() and inactive() callbacks to launch the slabText treatment (or a similar "font loaded" callback feature from another font provider)."

This is very useful in a scenario where one wants the text to scale up and occupy space like it had been done on physical paper.

I remember attempting something like this earlier (http://stackoverflow.com/questions/8421533/how-to-obtain-ctr...) but I am stoked by your approach.

Nice work. :-)

This is a really impressive effect, but I'd hesitate to use it as part of a generic cms backed site since the auto-sizing could inadvertently editorialize the meaning of a headline at different page widths.

"Roddick SURVIVES, Staving Off Retirement" vs "Roddick Survives, Staving Off RETIREMENT"

This is what the preset word combinations mentioned in the post are for.

Ahh, right, i missed that. I was distracted from the sub-headings by the big bold responsive headings.

Great work, the effect is stunning !

Really nice that it's automatically disabled when displayed on a small screen than viewport defined.

Now I'll have to decide whether to replace my existing brute-force text-fitting code with your more optimal solution. Argh!

It's a horrible mess on Chrome for Android. Use with extreme caution (and testing).

Nice approach, Fittext is nice, but this bring the game to another level.

another useful text JavaScript plugin

http://fittextjs.com/

Full Disclosure: I have nothing to do with this product :)

Not that OP's isn't nice, but I like this one more.

Beautiful. Does it work in IE? (i'm too lazy to fire it up)

No (IE9).

works in IE10 - so good for the future.

Reply on news.ycombinator.com