Page MenuHomePhabricator

Two-digit inputs in OOUI DateTimeInputWidget are too narrow in MS Windows
Closed, ResolvedPublicBUG REPORT

Description

There are five two-digit inputs in OOUI's DateTimeInputWidget (month, day, hour, minute, second), and they all have width "2.3ch", which is too narrow for all of them, at least in Windows. You can see the problem right on Wikipedia - go this page:

https://en.wikipedia.org/wiki/Special:ApiSandbox#action=edit&title=Test

...then click on "action=edit", and click on the checkbox for "basetimestamp". There, depending on the OS and maybe browser, you'll see that some or all of the two-digit inputs cut off their values (it also depends on the exact date and time at which you look). This happens in seemingly every browser, at least on Microsoft Windows; I tried it on Android phone, and there it actually looks fine.

2.5ch seems like the narrowest width at which every value is fully visible, in Windows. The setting of the widths is done here:

https://phabricator.wikimedia.org/source/mediawiki/browse/master/resources/src/mediawiki.widgets.datetime/DateTimeInputWidget.js$353

The number of characters is multiplied by 1.15ch, which works fine for the 4-digit year input but not the 2-digit inputs. Which makes me guess that the real formula should not be (1.15 * x) but rather something like (1.05 * x + .4) - that there's a fixed amount of left and right padding that need to be added. That's just speculation on my part, though.

Event Timeline

The ch unit is supposed to be exactly equal to the width of the character '0' (https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Values_and_units#relative_length_units) (which should also be the same as any other digit). Weird…

Oh, I didn't know that! I should have looked up "ch". That makes it even stranger. But the digits are definitely not all the same width, at least in Windows - "1", at least, is narrower than the other digits.

Okay, I have a new theory: the actual formula should be (1 * x + 0.5). (At minimum.) In other words, 1ch for each digit is fine, but there's an extra bit of padding, at least in Windows, on the left or right or both, that needs to be handled. To test that out, I reduced the width of the year input (4 digits) from 4.6ch to 4.5ch, and it still shows up fine. So that's my new theory.

Change 755519 had a related patch set uploaded (by Bartosz Dziewoński; author: Bartosz Dziewoński):

[mediawiki/core@master] DateTimeInputWidget: Fix field widths

https://gerrit.wikimedia.org/r/755519

Test wiki created on Patch demo by Matma Rex using patch(es) linked to this task:

https://patchdemo.wmflabs.org/wikis/1866521a3c/w/

Can you try out that patch? It makes everything look nice for me, but it might be different on different devices…

Chrome
image.png (103×1 px, 6 KB)
Firefox
image.png (99×1 px, 7 KB)
IE 11
image.png (95×1 px, 4 KB)

Oh, I didn't know that! I should have looked up "ch". That makes it even stranger. But the digits are definitely not all the same width, at least in Windows - "1", at least, is narrower than the other digits.

It might depend on the font, but for me, the space taken up is definitely the same (even if the glyph looks narrower). See also below:

0123456789
9876543210

…which renders for me like this – the digits line up perfectly:

image.png (93×165 px, 3 KB)

(in any case, 0 is probably the widest digit, so it should be fine to use 'ch' here anyway)

Okay, I have a new theory: the actual formula should be (1 * x + 0.5). (At minimum.) In other words, 1ch for each digit is fine, but there's an extra bit of padding, at least in Windows, on the left or right or both, that needs to be handled. To test that out, I reduced the width of the year input (4 digits) from 4.6ch to 4.5ch, and it still shows up fine. So that's my new theory.

It turns out that browser-defined padding was being subtracted from our careful calculation, due to box-sizing: border-box, so nothing lined up as it should have.

Ah, the box-sizing thing explains it. I just tried out the "API sandbox" page on that "patch demo" wiki (very neat service, by the way, this "patch demo" thing), and it displays great in Windows on the four browsers I tried it on: Chrome, Opera, MS Edge and Firefox.

As for the digit widths, those all line up correctly for me, too, in Chrome on Windows - but somehow, in the input widget, "1" is narrower than the others.

Change 755519 merged by jenkins-bot:

[mediawiki/core@master] DateTimeInputWidget: Fix field widths

https://gerrit.wikimedia.org/r/755519

Jdforrester-WMF subscribed.

@Yaron_Koren Hopefully this should count as fixed for you.

Test wiki on Patch demo by Matma Rex using patch(es) linked to this task was deleted:

https://patchdemo.wmflabs.org/wikis/1866521a3c/w/