763832 - Text rotated 45 degrees has bad kerning and inconsistent baselines

Status: RESOLVED DUPLICATE of bug 534064

(Core :: Layout: Text and Fonts, defect)

Description

[Jared Wein [:jaws] (please needinfo? me)]

Attachment: Screenshot of bug

Addons.mozilla.org uses a rotated HTML element (45 degrees) as a badge on some add-ons to state that they are "Featured". This text is rendered with poor kerning and inconsistent baselines.

I've attached a screenshot of the bug on AMO. You can visit https://addons.mozilla.org/en-US/firefox/addon/cheevos/ for a live example (while the add-on is still featured).

Comment 1

[Boris Zbarsky [:bzbarsky]]

There are existing (per-platform) bugs on this...

Comment 2

[Jared Wein [:jaws] (please needinfo? me)]

This is a simplified test case to reproduce the issue:
> data:text/html,<div style="font:bold 15px 'Helvetica Neue'; width: -moz-fit-content; margin-top: 250px; margin-left:75px; -moz-transform: rotate(45deg)">ALL CAPS Camel Case no caps</div>

Comment 3

[Jared Wein [:jaws] (please needinfo? me)]

(In reply to Jared Wein [:jaws] from comment #2)
> This is a simplified test case to reproduce the issue:
> > data:text/html,<div style="font:bold 15px 'Helvetica Neue'; width: -moz-fit-content; margin-top: 250px; margin-left:75px; -moz-transform: rotate(45deg)">ALL CAPS Camel Case no caps</div>

This solution was supplied by Frank Yan.

Comment 4

[Ekanan Ketunuti]

dupe of bug 534064?

Comment 5

[Jared Wein [:jaws] (please needinfo? me)]

Yep, this looks to be a duplicate of bug 534064. Thanks Ekanan.