Improve css3 text rotation quality

Question

I've created a series of rounded tabs using CSS3. I've then rotated these tabs, but the quality of the text (Windows - Chrome) is poor and also 'dims/blurs' on transition. What are the alternatives? Have I applied my CSS correctly? Would I be better to rotate the tabs and keep the text horizontal?

http://jsfiddle.net/jeepstone/9eGt3/

Solution 1

Chrome

Chrome doesn't enable anti-aliasing by default. But you can add this CSS property to your elements in order to enable it:

transform: translate3d(0,0,0);

This will force the browser to use its hardware acceleration to calculate the transforms, which will add some anti-aliasing as a bonus.

The same effect could also be applied by setting the -webkit-backface-visibity to hidden:

-webkit-backface-visibility: hidden;

Here is your updated jsfiddle (tested in Chrome)

http://jsfiddle.net/9eGt3/6/

Firefox

Firefox enables anti-aliasing by default so no transform3d hack is required, but the quality of the anti-aliasign algorithm varies among the browser version. Here are some comparison images:

Those are Firefox 5, Firefox 9 and Chrome respectively.

Your best bet here is to tweak your font in order to make it more friendly to the anti-aliasing algorithm. In this case, choosing a bolder and bigger font might help.

Solution 2

As I alluded to, using javascript might make the transition smoother, without disrupting the text or borders. Replacing the CSS transitions with this seemed to help greatly. This is using jQuery - use the tool of your choice of course:

// <li> needs position:relative; in the CSS
$('li').hover(
    function(){
        $(this).stop().animate({'top':'-10px'});
    },function(){
        $(this).stop().animate({'top':'0'});
    }
);

http://jsfiddle.net/9eGt3/5/

I'm not lucky enough to be able to use CSS3 very often, so this is not an area of expertise for me - but I unfortunately had to remove the existing CSS hover transitions to get it to work. You might use a javascript detection technique to fall back to CSS transtitions, like by adding class="js-enabled" to the body tag (with js of course) and using that in your CSS selector.

Outside of that, I think you're out of gas unless you want to use images (bah) or wait a few more years until browsers can handle this stuff a little better (grr). Don't take this as gospel, someone might have a solution for you - but I thought I'd at least offer a workaround.

Comments

[Wesley Murch]

+1 Looks great for me in Chrome as well, unfortunately FF still suffers (no support for translate3d or just poor support?).

[Jeepstone]

This is a good solution at the moment. FF suffers in other areas but I'll look at those separately.

[Cesar Canassa]

@Jeepstone I improved my answer in order to include Firefox

[Will Shaver]

Note that in the most recent versions of chrome you'll need to apply the translate3d(0,0,0) to each instance of 'translate' instead of globally to get the same effect.

[a.litis]

I also fixed this with the translate 3d. But another problem arises: See here: skroutz.gr/blog at the left sidebar the rotated button stays fixed. Any ideas why this happens??

[Cesar Canassa]

@a.litis You are mixing a fixed position with a translate. The translate 3d creates a new coordinate system that messes with the fixed position coordinate. A workaround that you can try is inserting a translateZ(0) in our fixed element (the navbar)