Page MenuHomePhabricator

Inconsistent handling of RTL languages in Structured Data UI elements
Open, Needs TriagePublic

Description

Currently there are some inconsistencies in how RTL languages are handled by the new UI elements we are adding to the Filepage for Structured Data fields.

There are two related issues here:

  1. How should the overall UI elements (Captions and Statements panels) look when oriented in RTL languages?
  2. Within a given panel, how do we handle situations when both LTR and RTL languages are present?

Problem #1: Overall panel layout
Here is what we have currently, using Hebrew as an example.

The Statements panel's behavior is closer to correct (it is lined up with the right hand side of the content area, while the Captions panel is not), but there are still some text collisions happening in the input box.

Problem #2: What happens *within* a panel when differently-oriented languages are present?
Regardless of the overall orientation of the page, both panel elements can contain items in both RTL and LTR languages, stacked on top of one another. Here are some examples, using the Captions panel:

Read mode:

Edit mode:

In particular, the editing state looks very wonky. This is because each row is attempting to follow the conventions of its own language, leaving to a broken-looking layout.

My suggestion would be that the UI elements inside panel (buttons, icons, dropdowns, etc) should be positioned according to the rules of the overall language of the page, and that content elements (text elements, inputs, etc. inside a given row) should follow the conventions of the specific language of the row. This would mean that the red "trash" icons would always line up on either the right-hand or left-hand side of the panel, depending on the overall language of the page, as one example.

However I defer to folks with more expertise/knowledge about what users in RTL languages will be expecting.

Event Timeline

egardner created this task.Apr 16 2019, 4:51 PM
Restricted Application added a project: Multimedia. · View Herald TranscriptApr 16 2019, 4:51 PM
Restricted Application added a subscriber: Aklapper. · View Herald Transcript
egardner updated the task description. (Show Details)Apr 16 2019, 4:52 PM
Aklapper added a project: RTL.
PDrouin-WMF added a subscriber: Ramsey-WMF.

In problem #1 both screenshots look broken in different ways :)

In problem #2, separate direction and alignment. Some principles:

  1. It's essential that the direction (HTML dir attribute) must be correct for each language.
  2. The alignment (CSS text-align) can be different from the direction if it produces rendering that looks nicer or is easier to read. For example, the red trash can buttons on different sides don't look nice at all, and they can all be aligned to the same side.
  3. An exception to principle 2 is the writing field. It's strongly recommended that the alignment of a writing field will conform to its direction. So a field where something is supposed to be written in Hebrew must have the RTL direction, and it should also be aligned to the right-hand side. Otherwise, the letters appear to be running backwards, which is a bit weird even if their order is correct.

Another general comment is to be very careful with placeholders in input fields and textareas. HTML placeholders are often too difficult to display correctly with text in mixed languages, so you may consider replacing with something else. You can see in the screenshots that they are totally mixed up.

I'll be happy to test these myself somewhere. Are they enabled on any live site?

One funny issue so far is that since the interface is not fully translated for this feature, it's a mess of English and Persian. I finished the translations in translatewiki. Hopefully it'll go live soon so I can properly test it.

Some RTL issues I found so far (by checking this page)

  • The structured captions are left aligned in a RTL language. This should go right:

  • In the picture above, the cancel seems too close to the progressive button.
  • I personally prefer the delete icon goes to after language selector (conceptually, you are deleting the whole row, it might mislead people that it clears the caption value)
  • The title caption is left-aligned: (It should go right)

These are RTL issues in depicts section:

  • Already mentioned:

  • When the item doesn't have label in Persian, it falls to English (which is good) but it should denote this:


Let me give you an example in wikidata:

(From https://www.wikidata.org/wiki/Q7251?uselang=fa)

HTH

PDrouin-WMF moved this task from Backlog 📚 to Doing 📝 on the SDC Design board.
Volker_E updated the task description. (Show Details)Thu, May 9, 10:11 AM
Volker_E updated the task description. (Show Details)

When a language is chosen (in the examples for problem #1 of the task description Hebrew), it becomes the primary language and everything layout is right to left until a part is LTR. I've tried to capture this in T222867.
Except where it doesn't make sense layout-wise and would lead to more noise and confusion (the dropdown position in Hebrew for the caption language). Do you agree with such generalization, @Amire80 @Ladsgroup @Mooeypoo
Specific unclear cases should be user-tested.

Ramsey-WMF moved this task from Untriaged to Next up on the Multimedia board.Fri, May 10, 5:04 PM