3

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 becoming 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.

Philip Kirkbride
  • 21,381
  • 38
  • 125
  • 225
Andrew Weir
  • 1,020
  • 2
  • 13
  • 27
  • IMO you're asking the wrong question. You should never have to care about hardware acceleration. – CodesInChaos Mar 23 '11 at 11:20
  • Related question: http://stackoverflow.com/questions/4972074/is-there-a-way-to-programmatically-test-for-browser-gpu-acceleration . 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 Mar 23 '11 at 11:24

4 Answers4

7

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?

CodesInChaos
  • 106,488
  • 23
  • 218
  • 262
  • Indeed, I guess I wasn't completely sure where to target my resources to solve the problem - all I knew was the problem does need a fix. Cheers for the input. – Andrew Weir Mar 23 '11 at 11:24
2

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 recommend it if you go down this path) and finally atatonic

xzyfer
  • 13,937
  • 5
  • 35
  • 46
0

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

NoBugs
  • 9,310
  • 13
  • 80
  • 146
-5
<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>
Abdalmohaymen
  • 89
  • 2
  • 8
  • 1
    Wouldn't any decent compiler optimize out your whole loop? And the first function looks like it'd cause resizing of the next the moment the page finishes loading. Horrible user experience. – CodesInChaos Mar 23 '11 at 11:38
  • The compute speed of your busy-loop (I'm sure your visitors would love the experience) has no relationship to hardware-accelerated font rendering (which really is just one particular _instance_ of the problem the original poster is trying to solve). – sarnold Mar 23 '11 at 11:45
  • And I would expect the time difference to be zero even if the loop isn't optimized out. On Windows time functions aren't very accurate. Depending on what other programs are running it might only update every 16ms. And your loop will certainly take less time than that. – CodesInChaos Mar 23 '11 at 12:18