typeface.js

Rendered text looks blurry on a retina display.

Bug #1201044 reported by RJ Skerry-Ryan
6
This bug affects 1 person
Affects Status Importance Assigned to Milestone
typeface.js
New
Undecided
Unassigned

Bug Description

Typeface.js doesn't take into account the device pixel ratio of the screen. This results in drawing text which is then upscaled to match the device pixel ratio. For a Macbook retina display, this ratio is 2.

See attached screenshots.

I came up with a fix that uses window.devicePixelRatio.

Revision history for this message
RJ Skerry-Ryan (rryan) wrote :
Revision history for this message
RJ Skerry-Ryan (rryan) wrote :

This image uses my fix. The ampersand is the only letter that is rendered with typeface.js.

Revision history for this message
RJ Skerry-Ryan (rryan) wrote :

The attached patch fixes the issue for me. I use jQuery.css out of laziness but I imagine you'll have a better fix for this anyway. :) It should be a no-op for non-retina devices.

To post a comment you must log in.
This report contains Public information  
Everyone can see this information.
Subscribing...

Other bug subscribers

Remote bug watches

Bug watches keep track of this bug in other bug trackers.