Search code examples
canvasfirefox4

Firefox 4 Text Rendering Bug

I've run into a bug with my app that I traced down to inconsistent text rendering between Chrome and Firefox 4.

Chrome tells me that a certain string of text is 215px wide whereas Firefox 4 tells me its 218px wide:

Chrome vs Firefox Text Rendering

A bit of searching indicates that the issue is with Firefox 4, not Chrome.

The following code renders the text on the canvas element as well as via HTML and outputs the width:

<html>
  <head>
    <title>Firefox 4 Text Rendering Bug</title>
    <script type="text/javascript">
      function draw(){
        var canvas = document.getElementById('tutorial');
        if (canvas.getContext){
          var ctx = canvas.getContext('2d');
          ctx.font = "bold 16pt Helvetica"
          ctx.fillText("MORE INFORMATION", 0, 16)
          alert(ctx.measureText("MORE INFORMATION").width); 
        }
      }
    </script>
    <style type="text/css">
      canvas { border: 1px solid black; }
      h2 {font-size: 16pt; font-family: Helvetica; font-weight: bold }
    </style>
  </head>
  <body onload="draw();">
    <canvas id="tutorial" width="220" height="20"></canvas>
    <h2>MORE INFORMATION</h2>
  </body>
</html>

Is there a way to render text consistently between the browsers?

Solution

  • Is there a way to render text consistently between the browsers?

    Short answer: No. Not with fillText.

    Long answer: In fact it will be different on different operating systems and on different OS settings too. And it's not a bug with Firefox, per se. If anything, FF4 is the most consistent.

    For Chrome 13.0.782.1, Safari 5 and Opera 11 I get 211

    For IE9 I get 220

    For FF4 I get 218

    This is especially the case with a font like Helvetica, which not every user has. Most windows users will have Arial instead, etc etc.

    See the post yesterday here talking about some of the current problems with fillText. The best you will get with fillText is to use a web-safe font and no italics or bold, and to test to make sure it is consistent enough for your liking across the browsers you are targetting.

    Technically correct but lame answer: Yes there is a way to render text consistently. Make a PNG and render the image across browsers instead. Otherwise you gotta simply find the font that seems to work the closest on all browsers.