840878 - The strikeout/linethrough text decoration is sometimes too fine on hidpi/Retina displays

Status: NEW

(Core :: Graphics: Text, defect)

Description

[Justin Dolske [:Dolske]]

Attachment: Screenshot

I noticed that on etherpad.mozilla.org, text that is styled with the strikeout/linethough is sometimes barely distinguishable from regular text. That is, the line that's drawn is 1 hardware pixel tall, which is surprisingly hard to see on a Retina display.

But it's not always so small, on a jsbin.com page with <strike>blah</strike>, it's 2 hardware pixels tall, which is much more obvious.

I suppose there's a bit of a UX design decision here, in that the line should be strong enough to be visually obvious, but not so bold as to make the next unreadable. But 1px on Retina displays seems significantly too unobvious.

Comment 1

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

The width of that line comes from the font metrics so it's font-dependent. I'd be reluctant to start overriding it...

Comment 2

[Cameron McCormack (:heycam)]

If you look at data:text/html,<strike%20style="font:%2014px%20lucida grande">hello in Safari for example then the thickness looks like what we used to have, i.e. one CSS pixel thick.  (Although zooming on the page doesn't make the decoration thicker.)

Comment 3

[Jonathan Kew [:jfkthame]]

The same comments apply to underline:
  data:text/html,<u style="font:14px lucida grande">hello
Ours is thinner than Safari's on a Retina display; but we scale the thickness if you zoom the page, which Safari doesn't.

Hmm, Safari -also- doesn't scale either the thickness or the underline offset (from the text baseline) with page zoom or even with font size, which leaves an example like
  data:text/html,<u style="font:200px lucida grande">hello
looking a bit silly.

In general, I think we're doing the right thing; however, I agree that for some fonts at typical text sizes, the line ends up being too faint - presumably designers, when they set the line thickness parameter, assumed that it would render as a minimum of one pixel, -and- that a one-pixel line would be sufficiently visible on screen. That used to be true, but is becoming less so as resolutions increase.

Maybe we could consider some kind of minimum-thickness threshold here, so that we continue scaling properly for larger sizes but the line doesn't have such a tendency to vanish at small sizes.

Comment 4

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

I think we could pretty easily set the minimum line width to 1 CSS pixel.

Comment 5

[Jonathan Kew [:jfkthame]]

We could, but that could be a bit too much at really small font sizes. On a Retina display, something like

  data:text/html,<u style="font:4px lucida grande">hello

is actually legible, but it would look pretty ugly if we forced the underline to be 1 CSS px thick.

I do think we need to maintain the possibility that the line shrinks to a single device pixel; but I wonder if we could "bias" the rounding of the width so that fractions of a device pixel always round upwards, at least for small sizes and high resolution. So an underline or strikethrough that is "ideally" 1.3 retina device pixels, for example, renders as two rather than one.

Comment 6

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

Easy enough to round up, but would that actually help in this case?

Comment 7

[Jonathan Kew [:jfkthame]]

Yes, as it happens: in Lucida Grande at 14px (i.e. 28 device pixels), the nominal underline width from the font works out at 1.367188 pixels. (Derived from a 'post' table value of 100 font units at 2048 units per em.)

I don't think we'd want to round up -always-, as that would tend to thicken lines that are already perfectly visible (e.g. try the same testcase with Arial, whose 'post' table value is 150), but we could round the device-pixel size upwards if the nominal thickness is less than one CSS pixel, for instance.