I've noticed that font sizes are not the same across browsers which use hardware acceleration due to the font rendering changes - making characters appear smaller. On sites with horizontal navigation, this is actually being an issue.

Is it possible to use JavaScript or a JS library to detect hardware acceleration as being enabled (or disabled) in the browser?

Modernizr doesn't seem to offer this choice.

I've noticed that font sizes are not the same across browsers which use hardware acceleration due to the font rendering changes - making characters appear smaller. On sites with horizontal navigation, this is actually being an issue.

Is it possible to use JavaScript or a JS library to detect hardware acceleration as being enabled (or disabled) in the browser?

Modernizr doesn't seem to offer this choice.

• javascript
• html
• browser
• hardware-acceleration
• modernizr

• IMO you're asking the wrong question. You should never have to care about hardware acceleration. – CodesInChaos Commented Mar 23, 2011 at 11:20
• Related question: stackoverflow./questions/4972074/… . While it'd be a duplicate if you just go by the title, the question he really wanted to know was: "Is it fast enough?" whereas this question really is "Does it render as I want?" – CodesInChaos Commented Mar 23, 2011 at 11:24

4 Answers 4

The font rendering differs depending on browser, OS and user settings. So your website should deal with such differences gracefully instead of relying on pixel exact font rendering. Hardware acceleration is just one more source of such differences.

Since you're not actually interested in finding out if it is hardware accelerated, but in differences in font rendering how about measuring the size some rendered text has, and adapt your page based on that?

Since you're only interested in the difference of font size across browsers and platforms, it might be worth looking into font size normalizing techniques.

The only one I'm personally familiar with is YUI Fonts CSS. I use it in all my projects and it's used the HTML5Boilerplate project.

There are also css typography frameworks such as the Baseline, Typogridphy, Blueprint (I've looked into this a remend it if you go down this path) and finally atatonic

Rather than have workarounds for slow rendering, why not use underscore's throttle or debounce to reduce refreshes?

<script type="text/javascript">
<!--
window.onload=function(){
        if(window.screen.availHeight>700 && window.screen.availWidth>1000)
        {
        document.body.style.fontSize="15px";
        }
.................
//another conditions
}
//-->
</script>

you can't get processor speed or ram size but you can make function to know the hardewre strength

<script type="text/javascript">  

 var number=10;  
 var i;  
 var start = (new Date).getTime();  
 //code here  
     for(i=0;i<10000;i++)  
     {  
      number=number*10;  
     }  
 var diff = (new Date).getTime() - start;  
 alert(diff);  

 start = (new Date).getTime();  
 //code here  
     while(i<10000)  
     {  
      number=number*10;  
      i++;  
     }  

diff = (new Date).getTime() - start;  
alert(diff);  

 </script>