{"id":7231,"date":"2016-05-10T02:05:48","date_gmt":"2016-05-10T06:05:48","guid":{"rendered":"http:\/\/www.useragentman.com\/blog\/?p=7231"},"modified":"2016-05-10T12:02:14","modified_gmt":"2016-05-10T16:02:14","slug":"how-to-fix-small-transformed-text-in-html5-canvas-in-firefox-for-windows","status":"publish","type":"post","link":"https:\/\/www.useragentman.com\/blog\/2016\/05\/10\/how-to-fix-small-transformed-text-in-html5-canvas-in-firefox-for-windows\/","title":{"rendered":"How To Fix Transformed Text in HTML5 Canvas In Firefox For Windows"},"content":{"rendered":"

I was on Twitter yesterday, and saw a thread regarding a great HTML5 Canvas pie chart with rotated text made by Matei Copot<\/a>. In it, Ana Tudor<\/a> noted that the typography didn’t look quite right in Firefox:<\/p>\n

\n

Refuse to use excel for piecharts for homework, so… https:\/\/t.co\/xjAa82O841<\/a>
play with "render" and "data.typeList" pic.twitter.com\/o7NxHdqXbW<\/a><\/p>\n

— towc (@MateiCopot) April 30, 2016<\/a><\/p><\/blockquote>\n

\n

@MateiCopot<\/a> Ugh, that rotated text in Firefox :(<\/p>\n

— Ana Tudor (@anatudor) April 30, 2016<\/a><\/p><\/blockquote>\n

\n

@MateiCopot<\/a> Firefox 46 (current stable). pic.twitter.com\/FpmJH5APmD<\/a><\/p>\n

— Ana Tudor (@anatudor) April 30, 2016<\/a><\/p><\/blockquote>\n

Let’s see these screenshots up close (IE10 Windows is on the left, Firefox is on the right):<\/p>\n

<\/p>\n

I noticed that this was only happening in Windows version of Firefox,<\/strong> so I initially thought it was a variation of a common issue that browsers have with rendering live text using CSS transforms<\/a>. However, the fix to that problem wouldn’t apply since the chart above was using HTML5 Canvas to transform the text. I dug a little deeper, and noticed that this problem was happening because of some unique decisions the Firefox team about how Firefox renders typography in Windows. In a very lengthy blogpost, John Daggett<\/a> explains how Firefox implemented DirectWrite in Firefox 6<\/a>. I encourage everyone reading this to look at that post, but for the impatient out there: Mozilla received complaints that DirectWrite<\/a> (the newer graphics API introduced in Windows 7) blurred some fonts at small font-sizes, so Mozilla decided Firefox should use GDI<\/a> (the older graphics API for Windows) for these fonts when their font-size is below 16 pixels. <\/p>\n

I wasn’t sure if this was the culprit for Matei’s chart, so I replaced Verdana (which is one of the fonts that uses GDI at small font-sizes) with Calibri<\/a> (which isn’t on the list) and, bingo, the typography didn’t look so ugly:<\/p>\n

\"\"<\/p>\n

For completeness sake, here is the original demo by Matei Copot<\/a>, and here is my version using Calibri<\/a>. Keep in mind that, as far as I’m aware, the problem only appears in Firefox for Windows.<\/p>\n

You can change this using the about:config<\/code> URL in Firefox by altering the gfx.font_rendering.cleartype_params.force_gdi_classic_for_families<\/a> preference, but this is not really a way for a web developer to fix how fonts render on a user’s machine. You should just keep in mind that Firefox will not render Arial, Consolas, Courier New, Microsoft Sans Serif, Segoe UI, Tahoma, Trebuchet and MS, Verdana well when transformed in font-sizes 16 pixels and below<\/strong>. This is true with CSS transforms as well. Here’s an example of some CSS transformed text in Tahoma in Firefox and IE10 under Windows 8:<\/p>\n\n\n\n\n\n
CSS Live Text<\/th>\nFirefox 46
Windows 8<\/th>\n		IE10
Windows 8<\/th>\n<\/tr>\n<\/thead>\n
\n
Transformed text<\/div>\n<\/td>\n
\"\"<\/td>\n\"\"<\/td>\n<\/tbody>\n<\/table>\n

However, since this is CSS, you can use the filter hack that I describe in my previous blog post<\/a>: <\/p>\n\n\n\n\n\n
CSS Live Text<\/th>\nFirefox 46
Windows 8<\/th>\n		IE10
Windows 8<\/th>\n<\/tr>\n<\/thead>\n
\n
Transformed text<\/div>\n<\/td>\n
\"\"<\/td>\n\"\"<\/td>\n<\/tbody>\n<\/table>\n

I hope this post will save someone a lot of time in how to fix this issue in both canvas and CSS.<\/p>\n

Further Reading<\/h2>\n
    \n
  1. DirectWrite Text Rendering in Firefox 6<\/a> by John Daggett<\/a><\/li>\n
  2. A Closer Look At Font Rendering<\/a> by Tim Ahrens<\/a> (an older article, but some of the information in it is still quite relevant).<\/li>\n<\/ol>\n