492214 - -moz-transform appears not to rotate letters (at small angles) because glyph positions are pixel-snapped on OSX

Status: RESOLVED WORKSFORME

(Core :: Layout, defect)

Description

[Wichert Akkerman]

User-Agent:       Mozilla/5.0 (Macintosh; U; Intel Mac OS X 10.5; en-US; rv:1.9.1b4) Gecko/20090423 Firefox/3.5b4
Build Identifier: Mozilla/5.0 (Macintosh; U; Intel Mac OS X 10.5; en-US; rv:1.9.1b4) Gecko/20090423 Firefox/3.5b4

The line on which text is drawn is rotated, but the letters themselves are not. This results in a weird staircase effect.

Reproducible: Always

Steps to Reproduce:
1.create a block with text in it
2. rotate it with  -moz-transfor

Comment 1

[Wichert Akkerman]

Attachment: Firefox 3.5b4 rendering

Comment 2

[Wichert Akkerman]

Attachment: Safari 4 rendering

Comment 3

[Ria Klaassen (not reading all bugmail)]

Confirmed with Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.9.1b5pre) Gecko/20090504 Shiretoko/3.5b5pre
With the latest trunk build also the backgrounds are not drawn.

Comment 4

[David Baron :dbaron: (⌚️UTC-4, no longer working on Mozilla)]

I'm not sure that the letters are unrotated -- but it's clearly a problem that we're snapping them all to the nearest pixel as far as positioning goes.

I see this on Linux as well.

Comment 5

[Robert O'Callahan (:roc) (email my personal email if necessary)]

I have to assume this is a cairo issue, we don't do any per-glyph snapping.

Comment 6

[Jeff Muizelaar [:jrmuizel]]

On OSX it looks like this caused by quartz doing the snapping. Perhaps the reason that it doesn't show up in Safari is because Safari's transforming an image of the content and not the content itself?

Comment 7

[Robert O'Callahan (:roc) (email my personal email if necessary)]

Is there a way to turn that snapping off? We already do our own baseline snappping. You would think surely we're not the only app in the world that wants to draw rotated text nicely.

Comment 8

[Robert O'Callahan (:roc) (email my personal email if necessary)]

(In reply to comment #7)
> We already do our own baseline snappping.

(Not per-glyph, but per-frame, and snapped before transforms like rotation, so it wouldn't produce the bug here.)

Comment 9

[Jeff Muizelaar [:jrmuizel]]

Attachment: A simple test case for reproducing the quartz behaviour

I wasn't able to find anything that would suggest that we can disable this behaviour. None of the coregraphics symbols that I saw seemed related.

Comment 10

[Robert O'Callahan (:roc) (email my personal email if necessary)]

what if you use CGContextShowGlyphsAtPositions?

Comment 11

[Jeff Muizelaar [:jrmuizel]]

Attachment: Example of text drawn with CGContextShowGlyphsAtPositions

Drawing text with CGContextShowGlyphsAtPositions seems to have the same behaviour as shown.

Comment 12

[Jeff Muizelaar [:jrmuizel]]

Attachment: Code for producing the previously attached image

Comment 13

[Robert O'Callahan (:roc) (email my personal email if necessary)]

Can we ask someone at Apple for help?

I suppose we *could* have _cairo_quartz_show_glyphs handle complex transforms by drawing the glyphs to a temporary surface and then transforming that surface... or we could change our -moz-transform code to render to a temporary surface of appropriate resolution and transform that ... but neither of those are terribly appealing.

Comment 14

[Jeff Muizelaar [:jrmuizel]]

The situation is worse on our other platforms. On win32 we don't have any subpixel positioning and don't really have any options until we use DirectWrite.
On linux we can subpixel positioning is possibly but a reasonable amount of work.
Behdad wrote about a possible path forward here:
http://lists.cairographics.org/archives/cairo/2008-May/014149.html

Comment 15

[Robert O'Callahan (:roc) (email my personal email if necessary)]

You're probably right, having nsDisplayTransform::Paint render to a regular surface (with the right resolution) and transforming the result sounds like the way to go. Probably too late for 1.9.1 though.

Comment 16

[Robert O'Callahan (:roc) (email my personal email if necessary)]

A little birdie told me about a couple of hidden CG APIs
CGContextSetShouldSubpixelQuantizeFonts(CGContextRef, bool);
CGContextSetShouldSubpixelPositionFonts(CGContextRef, bool);

Comment 17

[Jeff Muizelaar [:jrmuizel]]

(In reply to comment #16)
> A little birdie told me about a couple of hidden CG APIs
> CGContextSetShouldSubpixelQuantizeFonts(CGContextRef, bool);
> CGContextSetShouldSubpixelPositionFonts(CGContextRef, bool);

Those are included in the test case that I attached. If I recall they didn't help. Does your birdie have any information that would suggest otherwise?

Comment 18

[Robert O'Callahan (:roc) (email my personal email if necessary)]

Webkit uses CGContextSetShouldSubpixelQuantizeFonts

Comment 19

[Jeff Muizelaar [:jrmuizel]]

(In reply to comment #18)
> Webkit uses CGContextSetShouldSubpixelQuantizeFonts

But doesn't Webkit also implement css transforms as an image transformation?

Comment 20

[Robert O'Callahan (:roc) (email my personal email if necessary)]

Maybe. Maybe my source was confused.

Comment 21

[Jeff Muizelaar [:jrmuizel]]

It looks like they don't necessarily.

http://people.mozilla.org/~jmuizelaar/rotated-grid.html
http://people.mozilla.org/~jmuizelaar/rotate.html

Seem to suggest otherwise, especially when viewed in Safari on windows...

Comment 22

[Jeff Muizelaar [:jrmuizel]]

(In reply to comment #21)
> It looks like they don't necessarily.
> 

To clarify, it looks like webkit doesn't necessarily use a rotated image.

So I'm confused. If someone can make the text look good/like safari in the example program I attached then we can fix this. Otherwise, I don't know what to do...

Comment 23

[Alex]

I don't know if this is relevant or not, but I found this WebKit bug from 2007 about pixel snapping the glyphs.

https://bugs.webkit.org/show_bug.cgi?id=12172

The first testcase seems to show a problem in Firefox but not Safari (glyphs jump around when you resize the window), they seem to have fixed it by calling a private API.

Comment 24

[Alex]

Attachment: Result of private Quartz API on text rotation

It seems the private API (CGContextSetFontRenderingStyle) does allow for proper rotation and sub-pixel positioning, this is the result of the previous program when it calls the API passing true and then false for the two boolean parameters.

Comment 26

[cabel]

(The only thing noted in my dupe bug that might be of interest here: in Windows Safari, there is similar serious stairstepping, until you set the Text Smoothing preference to use internal CoreGraphics anti-aliasing, not Windows Default anti-aliasing. Thanks for looking into this problem.)

Comment 28

[Anthony Ricaud (:rik)]

The duplicate bug was asking if it should block 2.0, reflecting that.

Comment 29

[Paul Rouget [:paul]]

What this can't be blocking2.0?

Comment 30

[Benjamin Smedberg]

It really doesn't seem serious enough to block. We should fix it, but I'm not going to hold the schedule for rotated text on mac.

Comment 31

[cabel]

To make it clear: IT'S NOT JUST ON THE MAC.

In fact, this bug is at its absolute worst on Windows Firefox. (See my Bug 585114 for screenshots.)

Comment 32

[cabel]

Sorry -- I meant Bug 534064 has screenshots so you can see how it looks on Firefox Windows.

In particular attachment 416986 [details] shows the problem on Windows.

Comment 33

[Jeff Muizelaar [:jrmuizel]]

The problem here is meant to be OS X specific. I've reopened 585114 for the problem on windows.

Comment 34

[Anthony Ricaud (:rik)]

This is not Mac specific, it's also on Linux.

Comment 35

[Robert O'Callahan (:roc) (email my personal email if necessary)]

(In reply to comment #33)
> The problem here is meant to be OS X specific. I've reopened 585114 for the
> problem on windows.

You don't seem to have reopened 585114, it's still duped to this bug.

This bug is present with Quartz, GDI and X, because all those platform APIs pixel-snap. Fixing it on GDI and X is hard, but we should spin off new bugs for those. Fixing this bug is easy per comment #24.

Comment 36

[Robert O'Callahan (:roc) (email my personal email if necessary)]

(In reply to comment #24)
> It seems the private API (CGContextSetFontRenderingStyle) does allow for proper
> rotation and sub-pixel positioning, this is the result of the previous program
> when it calls the API passing true and then false for the two boolean
> parameters.

What previous program?

Google can't seem to find any description of CGContextSetFontRenderingStyle anywhere. It does seem that CGContextSetFontRenderingStyle is only in 10.6 though, replacing previously also undocumented CGContextSetFontRenderingMode.

I agree this should not block. It sucks, but it's a moving target.

Comment 37

[Alex]

Attachment: Updated test app

Oops, sorry for not being more helpful before.

The only reference I've found to CGContextSetFontRenderingStyle is the WebKit source code, looking for it on Google just gets problem reports.

I've attached the updated sample app that makes use of the 2 required API calls to get it working (I missed out on the fact you also need to call CGContextSetShouldSubpixelPositionFonts for it to make any difference)

Comment 38

[Alex]

And I seem to have missed the fact that the API calls don't make any effect on CGContextShowGlyphsAtPositions, only on CGContextShowText. Sorry.

Comment 39

[Jeff Muizelaar [:jrmuizel]]

(In reply to comment #35)
> (In reply to comment #33)
> > The problem here is meant to be OS X specific. I've reopened 585114 for the
> > problem on windows.
> 
> You don't seem to have reopened 585114, it's still duped to this bug.

I too meant bug 534064.

Comment 41

[Cameron McCormack (:heycam)]

Would this bug be the same underlying cause for rotated SVG text looking bouncy (bug 720607)?

Comment 42

[Alan Stearns]

It's very likely the same underlying cause, as I see exactly the same rendering whether I have a rotated div, rotated svg text, or svg text in a rotated div.

Comment 43

[Stefan Arentz | :st3fan | ⏰ EST | he/him]

Is there any progress on this bug? Any change we can use the same (private) CG* calls that WebKit is using?

Comment 44

[Jeff Muizelaar [:jrmuizel]]

I plan to fix this is a part of the switch Azure CoreGraphics for content work

Comment 45

[Pierre-Yves Gérardy]

Adding to this, rotated text still looks weird on OS X, even at large angles, because of snapping:

http://codepen.io/anon/pen/BNQwNv

It made my CSS3 "Fork me on GitHub" ribbon look bad on FF (I had to tweak it so that the letters align properly in my context).

Comment 46

[Pierre-Yves Gérardy]

Look it at it closely, sub-pixel anti-aliasing is applied differently to the glyphs, where you'expect pixel snapping to make them all look identical in that scenario...

Still, there's some bad rounding going on.

Comment 48

[Robert Longson [:longsonr]]

Seems OK now.