Page MenuHomePhabricator

The selector in DateTimeInputWidget is unreadable on RTL wikis
Open, HighPublic

Description

Hi. Thanks for this tool. It was deployed on hewiki now, and there is a bug: The time selector is inverted. In place of 13:52:45 we can see 45:52:13. Thank you.

In T315289, @Amire80 wrote:

The only RTL languages that actually shows time (and numbers in general) from right to left is N'Ko (code nqo). So "16:35" is shown as "16:35" in both English and Hebrew, but in N'Ko it would be shown as "53:61". (It also has its own digits, so it would actually be "߁߆‎:߃߅", but digit conversion is a separate task.)

The easy solution for this is probably to group the <span>s for hours, minutes, and seconds in a span and force dir="ltr" on this span in all languages except nqo, which would have dir="rtl".


Expected behavior

  • The UI of the Special:Block tool should behave RTL or LTR depeneding on the user's language preference
  • The datetime should be readable in all languages (not backwards!)
  • Our fixes should be applied to the pertinent OOUI elements, if reasonable

Event Timeline

@dbarratt — would this be true for the OOUI element or just for our implementation?

@dbarratt — would this be true for the OOUI element or just for our implementation?

From the description, this sounds like a bug with DateTimeInputWidget. But I'm not sure where else it is used (if at all).

Yeah it doesn't look correct on the Api:Sandbox (on the list=blocks tab):

Screenshot-2018-5-31 ארגז החול של ה־API – ויקיפדיה.png (32×700 px, 1 KB)

https://he.wikipedia.org/wiki/%D7%9E%D7%99%D7%95%D7%97%D7%93:%D7%90%D7%A8%D7%92%D7%96_%D7%97%D7%95%D7%9C_%D7%A9%D7%9C_API#action=query&format=json&list=blocks&bkend=2018-05-31T15%3A42%3A18.000Z

Compare that to what's on English:

Screenshot-2018-5-31 API sandbox - Wikipedia(1).png (64×858 px, 3 KB)

https://en.wikipedia.org/wiki/Special:ApiSandbox#action=query&format=json&list=blocks&bkend=2018-05-31T15%3A42%3A18.000Z

@IKhitron are you saying the datetime should not be RTL but remain LTR? I guess I'm confused on what the expectation is or how datetimes are read.

In LTR the datetime selector conforms to ISO 8601.

Regardless, this appears to be an issue with DateTimeInputWidget and not specifically the expiry widget that was deployed.

@IKhitron are you saying the datetime should not be RTL but remain LTR? I guess I'm confused on what the expectation is or how datetimes are read.

Don't know about Arab or Farsi, but in Hebrew it should look exactly as in the rest of the world.
By the way, about the screenshot you brought. The date is opposite too. Open RTL page sandbox and check

{{#time:c}}

Untitled.png (224×318 px, 9 KB)

kaldari renamed this task from The selector is unreadable on RTL wikis to The selector in DateTimeInputWidget is unreadable on RTL wikis.May 31 2018, 6:06 PM
kaldari added a subscriber: Anomie.

Thank you @IKhitron

@dbarratt & @kaldari — I think we (Anti-Harassment Tools team) should fix this in the widget, as it's the responsible thing to do.

There are several possible solutions, off the top of my head:

  1. Always have the widget[1] force LTR.
  2. Have the widget take a configuration option to select LTR or RTL.
  3. Make LTR/RTL selection part of the widget's formatting-string.

I don't know which would be best. The first would make the most sense if every (Gregorian calendar) date format in every language should be LTR. The second or third would be useful if it depends on the format, with the third being more useful if people are going to be using i18n messages to vary the format string by language or if we need the date part RTL and the time part LTR.

It sounds like, at least for Hebrew with the format being used in ApiSandbox, the widget should use LTR directionality.

The default format used by the widget looks like "Mon 1 Jan 2018 01:02:03 Z" in English. In Hebrew the weekday and month names would be taken from the 'mon' and 'jan' messages, and presumably would be RTL-ized in the same manner so it would look something like Z 03:02:01 2008 ינו' ‎1 ב'. Should that also be LTR, or should that one be RTL as shown, or shown in some other manner?

It's also possible that other uses of the widget might specify other custom formats by combining the various date components. Besides the ones shown already, there can also be full weekday and month names (taken from the appropriate i18n messages), and the "Z" might be spelled out as "UTC" (using MediaWiki:Timezone-utc) or "Local" (using MediaWiki:Timezone-local).

[1]: Or more specifically, the DateTimeFormatter for the proleptic Gregorian calendar. It's possible for someone to write a new DateTimeFormatter to implement a completely different calendar, but at that point the new formatter should deal with directionality on its own.

The default format used by the widget looks like "Mon 1 Jan 2018 01:02:03 Z" in English. In Hebrew the weekday and month names would be taken from the 'mon' and 'jan' messages, and presumably would be RTL-ized in the same manner so it would look something like Z 03:02:01 2008 ינו' ‎1 ב'. Should that also be LTR, or should that one be RTL as shown, or shown in some other manner?

The time should be as in LTR. The date with month in Hebrew should not be changed, and definitely shouldn't be like above.

And I really think you should ask Arab user and Farsi user before doing something.

Time is shown in LTR in both Arabic and Farsi as well. It appears to the left of the date in Persian as the entire script is RTL; in Arabic, at least on Arabic Wikipedia, a choice has been made to show the time to the right of (aka beore) the date, and to show all digits in date and time using the English characters, not the Arabic characters (so 14 is shown as 14, even though in Arabic text it is shown as ١٤). In Persian and also in Persian Wikipedia, numbers are shown using the Persian characters (so 14 is shown as ۱۴). In Persian Wikipedia we also preface the time with the word "ساعت" which roughly means "time" or "o'clock".

List of digits can be found in https://en.wikipedia.org/wiki/File:Arabic_numerals-en.svg and perhaps you can understand it better if shown in a table, followed by the actual string:

EnglishPersianArabic (Wikipedia)
14۱۴14
Januaryژانویهيناير
2018۲۰۱۸2018
19۱۹19
37۳۷37

English:

Screen Shot 2018-05-31 at 7.11.53 PM.png (38×348 px, 8 KB)

Persian:

Screen Shot 2018-05-31 at 7.11.26 PM.png (46×464 px, 10 KB)

Arabic (Wikipedia):

Screen Shot 2018-05-31 at 7.12.51 PM.png (42×290 px, 8 KB)

Thank you, Huji.
All, pay attention, that the time is always 19:37 and never 37:19.

Change 436829 had a related patch set uploaded (by Anomie; owner: Anomie):
[mediawiki/core@master] mw.widgets.datetime.DateTimeInputWidget: Add directionality support

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

@Anomie — It doesn't look like this PR is merged, can the Anti-Harassment Tools team help with anything?

I might be missing something, but this should be fixable by surrounding the pieces with <bdi> ?

@Anomie The DateTimeInputWidget has always been a confusing one, and I haven't looked at it in depth, but I am not sure I understand the need for a lot of the internal <dir ...> stuff? If we know that the widget has two outputs: date and time, then wrapping each of them in <bdi> tags *should* work, especially if the separation seems to already exists (your code adds $field.attr('dir', dir) to only the ones it applies to, which I take to mean they're separate (?).

In here: https://gerrit.wikimedia.org/r/#/c/mediawiki/core/+/436829/2/resources/src/mediawiki.widgets.datetime/ProlepticGregorianDateTimeFormatter.js

		'@time': '<dir ltr>${hour|0}:${minute|0}:${second|0}</dir>',
		'@date': '$!{dow|short} ${day|#} ${month|short} ${year|#}',
		'@datetime': '$!{dow|short} ${day|#} ${month|short} ${year|#} <dir ltr>${hour|0}:${minute|0}:${second|0}</dir> $!{zone|short}',
		'@default': '$!{dow|short} ${day|#} ${month|short} ${year|#} <dir ltr>${hour|0}:${minute|0}:${second|0}</dir> $!{zone|short}'

We see that the 'dir=ltr' is always on the time component. If that's the case, is it not simpler to just add <bdi> around the time display? We can even add it indiscriminantly to all fields, which would just bidi-isolate them from one another, allowing them to exist by their inner directionality (which for numbers/time is LTR as it is)

But I feel like I'm missing something here... ?

I'm on vacation at the moment, but I'm also bored this morning.

Note that each of those "fields" in the widget itself are probably <input type="text">, not plain text. Firefox seems to already treat <input type="text"> as being an isolate with no intrinsic directionality. I have no idea about other browsers.

Wrapping each individual field with <bdi> would probably not help, since the problem here is the relation between fields.

Putting <bdi> around just the time display would need much of the same code as in the patch, just replacing <dir ltr>...</dir> with <bdi>...</bdi>. I'm not sure whether this would actually help, or if it just seems to work for "${hour|0}:${minute|0}:${second|0}" because nothing in there (the punctuation or the <input> tags) has intrinsic directionality so the browser defaults to LTR.

Yeah, <bdi> won't help if we're talking about <input> fields, I just saw the screenshots and thought we're working with spans.

I'm still a little uncertain about some edge cases here; there are some languages where the directionality is set up differently with the timespan and date, etc -- but I think it might be things that we'll have to find out through experimentation and use later to see whether my unexplained gut 'meh' is correct. Overall, this seems like the most available approach considering the way the widget is set up and the way it accepts formatting.

Wait, sorry, I just realized something.

	mw.widgets.datetime.ProlepticGregorianDateTimeFormatter.static.formats = {
		'@time': '<dir ltr>${hour|0}:${minute|0}:${second|0}</dir>',
		'@date': '$!{dow|short} ${day|#} ${month|short} ${year|#}',
		'@datetime': '$!{dow|short} ${day|#} ${month|short} ${year|#} <dir ltr>${hour|0}:${minute|0}:${second|0}</dir> $!{zone|short}',
		'@default': '$!{dow|short} ${day|#} ${month|short} ${year|#} <dir ltr>${hour|0}:${minute|0}:${second|0}</dir> $!{zone|short}'
	};

source: https://gerrit.wikimedia.org/r/#/c/mediawiki/core/+/436829/2/resources/src/mediawiki.widgets.datetime/ProlepticGregorianDateTimeFormatter.js

The above strings aren't translateable, are they? I think there are certain languages (like Farsi) where the time format is written with non-latin numerals and is actually RTL.

I'm not sure how to deal with those cases, but we should be aware of that. I'd like to get input from the language team on this; @Nikerabbit, @Amire80 and @santhosh can you pitch in? Am I wrong about Farsi time format being RTL?

Aren't we using moment.js here? How does it deal with this problem?

I think there are certain languages (like Farsi) where the time format is written with non-latin numerals and is actually RTL.

I have no idea, but T196061#4247533 indicates otherwise for Farsi.

Aren't we using moment.js here?

No, that's the other date input widget, and T166625: Address DateInputWidget's use of moment.js for date formatting instead of MediaWiki i18n messages complains about that.

See also T91148: Consolidate MediaWiki core's date and time input widgets; consider moving (one of?) them upstream.

Jdforrester-WMF subscribed.

Please don't tag things into the OOUI library's work board when the tasks are UI standardisation tasks and don't represent bugs in or feature requests for the library.

Volker_E subscribed.

That's not part of UI-Standardization either. Not specifically technical issues of one widget.

Change 436829 abandoned by Umherirrender:

[mediawiki/core@master] mw.widgets.datetime.DateTimeInputWidget: Add directionality support

Reason:

Old outdated patch set

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

matmarex added subscribers: matmarex, Daimona.
In T315289, @Amire80 wrote:

The only RTL languages that actually shows time (and numbers in general) from right to left is N'Ko (code nqo). So "16:35" is shown as "16:35" in both English and Hebrew, but in N'Ko it would be shown as "53:61". (It also has its own digits, so it would actually be "߁߆‎:߃߅", but digit conversion is a separate task.)

The easy solution for this is probably to group the <span>s for hours, minutes, and seconds in a span and force dir="ltr" on this span in all languages except nqo, which would have dir="rtl".

Winston_Sung moved this task from RTL to Design research required on the I18n board.