841520 - Kerning on the Canvas looks awful

Status: UNCONFIRMED

(Core :: Graphics: Canvas2D, defect)

Description

[Simon Sarris]

Attachment: Comparison FF19 IE10 and Chrome 26

User Agent: Mozilla/5.0 (Windows NT 6.2; WOW64) AppleWebKit/537.31 (KHTML, like Gecko) Chrome/26.0.1410.5 Safari/537.31

Steps to reproduce:

1. Apply a scale by some number in the canvas (some buy not all scales do this)
2. Fill text on the canvas
3. Witness awkward letter spacing
4. Swallow sadness

An example is at: http://jsfiddle.net/vVC4s/. Results and comparison are attached as an image.


Actual results:

Scaling the canvas context causes kerning to do some very weird things.

This is especially compared to "scaling" the font by doubling the font size. See for instance http://jsfiddle.net/jGcrL/ which compares 28px font versus 14px font with a 2x scale.

Chrome 26 has very similar visual issues, however IE10 does not.


Expected results:

I'd expect consistent kerning. What's worse, as the scale changes the letters "wiggle" in an out of good kerning.

Comment 1

[Alice0775 White]

Can you please go to Help->Troubleshooting information and copy and paste here

Comment 2

[Simon Sarris]

  Application Basics

        Name
        Firefox

        Version
        19.0

        User Agent
        Mozilla/5.0 (Windows NT 6.2; WOW64; rv:19.0) Gecko/20100101 Firefox/19.0

        Build Configuration

          about:buildconfig

  Extensions

        Name

        Version

        Enabled

        ID

        Feedback
        1.2.2
        true
        [e-mail]

        FiddlerHook
        2.4.2.4
        false
        [e-mail]

  Important Modified Preferences

      Name

      Value

        browser.cache.disk.capacity
        358400

        browser.cache.disk.smart_size.first_run
        false

        browser.cache.disk.smart_size.use_old_max
        false

        browser.cache.disk.smart_size_cached_value
        358400

        browser.places.smartBookmarksVersion
        4

        browser.startup.homepage_override.buildID
        20130212082553

        browser.startup.homepage_override.mstone
        19.0

        extensions.lastAppVersion
        19.0

        gfx.blacklist.direct2d
        3

        gfx.direct3d.prefer_10_1
        true

        network.cookie.prefsMigrated
        true

        places.database.lastMaintenance
        1360600388

        places.history.expiration.transient_current_max_pages
        104858

        plugin.disable_full_page_plugin_for_types
        application/pdf

        privacy.sanitize.migrateFx3Prefs
        true

  Graphics

        Adapter Description
        AMD Radeon HD 6770

        Adapter Drivers
        aticfx64 aticfx64 aticfx64 aticfx32 aticfx32 aticfx32 atiumd64 atidxx64 atidxx64 atiumdag atidxx32 atidxx32 atiumdva atiumd6a atitmm64

        Adapter RAM
        1024

        Device ID
        0x68b8

        Direct2D Enabled
        Blocked for your graphics driver version.

        DirectWrite Enabled
        false (6.2.9200.16433)

        Driver Date
        10-3-2012

        Driver Version
        8.982.10.8000

        GPU #2 Active
        false

        GPU Accelerated Windows
        0/1 Basic

        Vendor ID
        0x1002

        WebGL Renderer
        Google Inc. -- ANGLE (AMD Radeon HD 6770)

        AzureCanvasBackend
        cairo

        AzureContentBackend
        none

        AzureFallbackCanvasBackend
        none

  JavaScript

        Incremental GC
        true

  Accessibility

        Activated
        false

        Prevent Accessibility
        0

  Library Versions

        Expected minimum version

        Version in use

        NSPR
        4.9.4
        4.9.4

        NSS
        3.14.1.0 Basic ECC
        3.14.1.0 Basic ECC

        NSSSMIME
        3.14.1.0 Basic ECC
        3.14.1.0 Basic ECC

        NSSSSL
        3.14.1.0 Basic ECC
        3.14.1.0 Basic ECC

        NSSUTIL
        3.14.1.0
        3.14.1.0

Comment 3

[Simon Sarris]

Another example: http://jsfiddle.net/simonsarris/HZFcR/

Comment 4

[DLev]

In some cases the kerning looks bad even without a scale factor applied. Using the maxwidth argument to context.fillText can cause further unfortunate results.
Fiddle: http://jsfiddle.net/e3zVC/6/

Comment 5

[Sylvestre Ledru [:Sylvestre]]

I can reproduce the various issues with 28.0a2 under GNU/Linux (Debian)