SlabText.js(frequency-decoder.com)

131 pointsby electic14 anni fa16 comments

http://www.frequency-decoder.com/demo/slabText/

16 comments

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. :-)

creamyhorror14 anni fa

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

oliwarner14 anni fa

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

federicoweber14 anni fa

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

lukeholder14 anni fa

another useful text JavaScript plugin

http://fittextjs.com/

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

duiker10114 anni fa

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

vhf14 anni fa

Great work, the effect is stunning !

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

pud14 anni fa

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

the_unknown14 anni fa

works in IE10 - so good for the future.

pooriaazimi14 anni fa

No (IE9).

trimetric14 anni fa

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"

zaptheimpaler14 anni fa

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

trimetric14 anni fa

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

wamatt14 anni fa

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.

dsellergren14 anni fa

It's actually exactly a 1 second delay:

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

jonah14 anni fa

"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)."