1020143 - Number labels in <li> aren't forced to be fixed-width (tabular), which means lists look gross in Fira Sans

Status: RESOLVED FIXED

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

Description

[Daniel Holbert [:dholbert]]

Attachment: testcase 1

STR:
 1. Load attached testcase (which has Fira Sans Regular included as a data-URI-encoded WOFF file)
 2. Look at adjacent lines for e.g. "17" and "18", and "20" vs "21".

ACTUAL RESULTS: The numbers are proportional-width, which makes them misaligned between lines, and which makes the list look jagged/bumpy.

EXPECTED RESULTS: Numbers should be aligned between consecutive lines in the list.

This is what lists look like on B2G, since this is the default font on B2G. This seems to be due to a quirk of the font.

jdaggett says in IRC:
{
 could make them be the tabular ones
 in the font
 or....
 add font-variant-numeric:tabular-nums; to the default stylesheet for <li>
}

Comment 1

[Daniel Holbert [:dholbert]]

Attachment: reference case 1 (with "font-variant-numeric: tabular-nums" forced)

Comment 2

[John Daggett (:jtd)]

Simple solution is to force on tabular numbers for <li> numbers in the user-agent stylesheet:

  li::-moz-list-number { font-feature-settings: "tnum" on; }

This will force on the use of tabular digits in ordered lists.

However, I think there's probably a larger issue for the UI in general, are default proportional digits the better choice for the default font?  Put another way, are there other cases in B2G content where this adversely affects the user experience?  This is a UI-team call I think.

Comment 3

[Jonathan Kew [:jfkthame]]

Attachment: prefer tabular numerals for list numbering.

I think we should go ahead and add this to ua.css in any case; it'll be an improvement in the default behavior for other fonts that may default to proportional digits, too, so even if we decide to switch the default in Fira Sans, it's still good to include this in the stylesheet.

Comment 4

[Jonathan Kew [:jfkthame]]

(In reply to John Daggett (:jtd) from comment #2)
> However, I think there's probably a larger issue for the UI in general, are
> default proportional digits the better choice for the default font?  Put
> another way, are there other cases in B2G content where this adversely
> affects the user experience?  This is a UI-team call I think.

That's a fair question. cc'ing Patryk for any thoughts on this.

Comment 5

[Daniel Holbert [:dholbert]]

Comment on attachment 8433979 [details] [diff] [review]
prefer tabular numerals for list numbering.

> *|*::-moz-list-bullet, *|*::-moz-list-number {
>   display: inline;
>   vertical-align: baseline;
>+  -moz-font-variant-numeric: tabular-nums;
>+  font-variant-numeric: tabular-nums;
> }

Why use the -moz prefixed version alongside the (supported) unprefixed version? I'd rather we just use one decl here.

Punting to jdaggett, because I only learned about this property yesterday (from him), and I'm not sure about the merits of using this formulation vs. the  "font-feature-settings" version he posted in comment 2.

Comment 6

[Daniel Holbert [:dholbert]]

A few things noticed in MXR:

(1) We don't ever use a prefixed version of the property name, so we probably should stick with that convention & not add a usage here (particularly because I see no benefit to doing so):
 http://mxr.mozilla.org/mozilla-central/search?string=moz-font-variant-numeric

(2) This property is currently preffed *off* in release builds.  So for this to help there, we need to get it preffed on (in release builds generally, or at least just in Firefox OS). Not sure what needs to be done for that to happen (i.e. what outstanding bugs there are) -- do you guys know?
 http://mxr.mozilla.org/mozilla-central/search?string=layout.css.font-features.enabled

Comment 7

[Jonathan Kew [:jfkthame]]

You're right, I misremembered what we're doing here: I thought we currently had a prefixed version of -moz-font-variant-*, but we don't - that's only -moz-font-feature-settings.

I thought we had enabled the font-variant-* stuff on FirefoxOS; there are several existing uses of font-variant-numeric in the Gaia CSS files. Maybe that only works on dev builds, and will break when they go to release? :(

Comment 8

[Jonathan Kew [:jfkthame]]

Attachment: prefer tabular numerals for list numbering.

So here's a version that should actually work for both release and dev builds. Eventually we can migrate to just using font-variant-numeric, but for now this covers the various cases.

Comment 9

[John Daggett (:jtd)]

Comment on attachment 8434229 [details] [diff] [review]
prefer tabular numerals for list numbering.

We should probably raise a separate issue for the more general issue of proportional digits in the default font for B2G.

Comment 10

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

Comment on attachment 8434229 [details] [diff] [review]
prefer tabular numerals for list numbering.

Maybe worth adding a comment that this should eventually switch to font-variant-numeric?

Comment 11

[Jonathan Kew [:jfkthame]]

https://hg.mozilla.org/integration/mozilla-inbound/rev/70713dd1ee5e

Comment 12

[Ed Morley [:emorley]]

Unfortunately I've had to back this out for B2G reftest failures in counter-suffix.html:
https://tbpl.mozilla.org/php/getParsedLog.php?id=41112869&tree=Mozilla-Inbound
https://tbpl.mozilla.org/php/getParsedLog.php?id=41114518&tree=Mozilla-Inbound

remote:   https://hg.mozilla.org/integration/mozilla-inbound/rev/8593b6da302c

Comment 13

[Jonathan Kew [:jfkthame]]

Oops - yes, that makes sense. (I'm mildly surprised that's the only test that failed, actually.) Simply adding the tnum feature to the reference should fix it, but I've pushed a try job to double-check: https://tbpl.mozilla.org/?tree=Try&rev=74b7037317b3.

Comment 14

[Jonathan Kew [:jfkthame]]

Re-landed, with test fix:
https://hg.mozilla.org/integration/mozilla-inbound/rev/e66a83f534b2

Comment 15

[Ed Morley [:emorley]]

https://hg.mozilla.org/mozilla-central/rev/e66a83f534b2