Page MenuHomePhabricator

Investigate how do we handle RTL languages in the components -- 8h max
Closed, ResolvedPublic

Description

  • Does changing the language to an RTL language cause RTL-specific bugs?
  • Do we need to use some css-flipper like CSS-Janus?
  • Would bdi work properly? Fallbacks, textinput, ...

Event Timeline

So I changed everything to Persian and even uploaded it as a POC PR: https://github.com/wmde/query-builder/pull/64

Here's is my observations (they are not necessarily all RTL issues):

image.png (474×1 px, 47 KB)

image.png (422×941 px, 41 KB)

image.png (913×1 px, 66 KB)

Mostly it looks good but:

  • The fallback result when there's no label in Persian is RTL but it should be LTR
  • The result iframe is all in English and LTR, fixing it wouldn't be easy, I don't think we can use non-ASCII characters for variable names.
  • RTL support is a continuous work in progress, while currently the RTL issues are minor, I think we don't keep tap on them and with the query builder getting more complex, we will end up with really large issues at hand.
  • The font of the title is terrible for Persian, it's so bad for Persian that it's hurting my eyes :( If I understood the dev tool correctly, it's "Linux Libertine"

Mostly it looks good but:

  • The fallback result when there's no label in Persian is RTL but it should be LTR

Fixing that might be tricky. We could wrap all things we language in them in <bdi>, Otherwise, we may have to do it on a per-case basis which would require us getting that info from vue-banana-i18n?

  • The result iframe is all in English and LTR, fixing it wouldn't be easy, I don't think we can use non-ASCII characters for variable names.

Could you explain a bit more? Which variable names are you thinking about?

  • RTL support is a continuous work in progress, while currently the RTL issues are minor, I think we don't keep tap on them and with the query builder getting more complex, we will end up with really large issues at hand.

👍

  • The font of the title is terrible for Persian, it's so bad for Persian that it's hurting my eyes :( If I understood the dev tool correctly, it's "Linux Libertine"

That is fortunately easy to change. But let's look at it again when one can actually view the Query Builder in Persian

  • The result iframe is all in English and LTR, fixing it wouldn't be easy, I don't think we can use non-ASCII characters for variable names.

Could you explain a bit more? Which variable names are you thinking about?

I mean ?item in the query result.

@Ladsgroup
Suggestions from Navigators Summit:

  • Did we check how Termbox's use of RTL?
  • Do not use CSS Janus. Let's use CSS logical properties.

@Ladsgroup
Suggestions from Navigators Summit:

  • Did we check how Termbox's use of RTL?

It uses RtlDetectLib which is nice but so far I haven't had the need to use it in QB. Good to keep it in mind though.

  • Do not use CSS Janus. Let's use CSS logical properties.

We use logical CSS properties so we should not use cssjanus but OTOH, it's not supported in IE11 https://caniuse.com/?search=logical%20properties and I'm not sure you can just use a transpiler for it. Needs more investigation.

I'd say let's have another look at this when T267731 is merged. Then we can create the Persian translations and reproducibly hone in on the problems

Ok, cool.

  • Should we create an extra ticket to consider using a different font for the heading for languages that use the Arabic script?
  • Does this need any more work now or is it enough to keep occasionally checking with RTL languages as we develop the app?

Ok, cool.

  • Should we create an extra ticket to consider using a different font for the heading for languages that use the Arabic script?

Yeah. I think this is bigger than query builder (probably part of wikit?)

  • Does this need any more work now or is it enough to keep occasionally checking with RTL languages as we develop the app?

Yup, indeed.

RTL seems fine in general. The currently existing issue with the "Add Condition"-Button is being worked on in T269438.

T270111 was created to look into an alternative font for arabic script for the headline.