Tuesday, September 23, 2008

Recent finds and fixes typography and jquery fades

OS X and type rendering of knockout text (white text on a black background)

Normal body text in this situation on a mac looks bold, because of the anti-aliasing engine going overboard on knockout text. 

/*text-shadow: 0 0 0 #000;*//*makes light coloured text look thinner in safari see http://24ways.org/2006/knockout-type */

Except theres nothing like that for Firefox. So Im using a lighter font family which is installed by default in macs. 

font-family: "Helvetica Neue Light", "HelveticaNeue-Light", "Helvetica Neue", Helvetica, Arial, sans-serif;

and hoping it dosnt look too think with people who have PCs and that font. 

JQuery fades side effect on Firefox 2 on a mac for type anti-aliasing. Or why on my Jquery gallery pages does the text suddenly look rubbish until I mouse over it?

/*-moz-opacity: 0.9999; *//*For Ffox 2.0 mac - Jquery fades on a page turn off its text anti-aliasing on that page. This style turns it off permanently so the problem isn't obvious. Double bonus of making knockout text not as heavy on os x. BUT - its makes a peekaboo bug on mac FF2&3 happen to Quicktime / Flash content so it cant be used.  */

This seemed like a good fix until I checked a page with embeded quicktime and it was making the video display a peek-a-boo type bug when your mouse went near it. Ive read this also happens with Flash content (or your SIFR!). 

IE7 cleartype (anti-aliasing) being turned off by Jquery

Theres also a similiar and just a shit problem that happens on IE7 to cleartype, in that the cleartype (IEs versions of anti-aliasing for web text) gets switched off when its part of your fading gallery (on mine text on the page is ok, just text thats being faded up with the gallery images looks rubbish). Aparently a fix is:

Assign a background colour to the bit thats being faded / the containing element of the text (but this isnt a solution for me because that area needs to be transparent (have no background assigned). 

this could also be a fix

http://groups.google.com/group/jquery-en/browse_thread/thread/221169cf3a03d32e/51326b4726541831?lnk=gst&q=text+anti-aliasing#51326b4726541831
> But for IE7 you need to remove the opacity filter after the  
> animation completes:
> $('#myDiv').fadeIn(function() {
> if ($.browser.msie)
> this.style.removeAttribute('filter');
> });