cufon rendering
- Started
- Last post
- 8 Responses
- ukit
Is there a good technique out there for hiding Cufon text before it gets rendered? So you don't get that flash of live text before the Javascript runs?
- armsbottomer0
i saw an article recently that addresses this issue:
http://www.chris-wallace.com/200…
- ukit0
Yeah I saw that. Didn't seem to work though.
- armsbottomer0
:( sorry to ruin your day ukit....
http://stackoverflow.com/questio…
- ukit0
We can put a man on the moon...but we can't avoid showing the unstyled text;( Sad day indeed, thanks for the info though!
- haha, no problem.armsbottomer
- just do it the bad way ffs
if anything goes wrong just say you were hacked by fox news or l ron hubbardismith - L Ron...back from the grave!ukit
- ********0
Yes, there is..
The best way used to be to hide the headings using CSS visibility, but IE8 has a problem rendering the cufon text when it's hidden... so the alternative is to simply move the heading off to the left of the screen using a negative text-indent.
1. You need to move the headings off screen with standard CSS within the header.
eg. '#id { text-indent: -9999px; }'
2. Then just before the body, put your cufon stuff in a script tag
3. call Cufon.now();
4. and using the jquery .css() method, bring the headings back into view...eg. $('#id').css('text-indent', '0');
- and the JS limitations could be gotten rid of by setting the negative text indent using the jquery css() method as well.********
- and the JS limitations could be gotten rid of by setting the negative text indent using the jquery css() method as well.
- ukit0
So I can set the indent via jQuery - that would be ideal, otherwise I'd be afraid Google would slap a penalty on me for "hiding" the text.
- you're not hiding anything .. it's off screen, but still there ..********
- same theory as CSS image replacement********
- ukit - the initial indent does need to be set using CSS because the jquery isn't run until the page is rendered********
- ideally, we'd need to find a way to check if JS is enabled, and only run the text-indent CSS if it is********
- you're not hiding anything .. it's off screen, but still there ..
- trooperbill0
nah google wont slap you for it as long as the text matches the replacement image
- ********0
The best trick is to use less cufon... too much upsets IE.
And that indent hack is pretty rough... I wouldn't do that on principle.
- do you use a negative ident when replacing text headers with images?********
- .. because it's fairly standard technique - I don't think what I've laid out above is much different.********
- I wouldn't replace txt with imgs in the first place...********
- Cufon 'text' also comprises of a huge txt string and too much quickly slows your page down...********
- check out this post from 2003 http://phark.typepad…********
- the technique might come in useful; you get to keep your text, keep it accessible - but have a pretty picture in it's place.********
- place.********
- do you use a negative ident when replacing text headers with images?