763833 - "Featured" banner on add-on pages has poor text rendering quality (bad kerning, inconsistent baselines)

Status: RESOLVED WONTFIX

(addons.mozilla.org Graveyard :: Public Pages, defect, P5)

Description

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

The "Featured" banner on add-on pages has poor text rendering quality. Some of the letters have bad kerning and some letters have lower baselines than others.

I've filed bug 763832 to fix our platform so we can render this text in higher quality, but in the meantime we should find another solution that can show localization-friendly text at a rotated angle.

One possible solution is to do the following:
- Using canvas, draw the localized text in to a canvas.
- Then get the data URI of the generated canvas image and set it as the src of an img.
- Set the "title" attribute (and "alt" too) on the img.
- Continue to use the -moz-transform: rotate(45deg)

This new solution should give us better text rendering since the rotation will only be rotating pixels instead of rotating the baseline that text needs to be drawn upon.

Comment 1

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

Attachment: Screenshot of bug

Comment 2

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

This is an example of the solution that I have suggested:
> data:text/html,<style>canvas { width: -moz-fit-content; margin-top: 200px; -moz-transform: rotate(45deg) }</style><canvas/><script>d=document.querySelector('canvas').getContext('2d');d.font='bold 15px "Helvetica Neue"';d.fillText('ALL CAPS Camel Case no caps',50,50)</script>

Comment 3

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

(In reply to Jared Wein [:jaws] from comment #2)
> This is an example of the solution that I have suggested:
> > data:text/html,<style>canvas { width: -moz-fit-content; margin-top: 200px; -moz-transform: rotate(45deg) }</style><canvas/><script>d=document.querySelector('canvas').getContext('2d');d.font='bold 15px "Helvetica Neue"';d.fillText('ALL CAPS Camel Case no caps',50,50)</script>

This solution was supplied by Frank Yan.

Comment 4

[Wil Clouser [:clouserw]]

Thanks for the suggestion. I'm going to wontfix this as the bug has been open for 2 years, is very minor and I'd rather not have to maintain the complex workaround.  The real fix is to resolve bug 534064.