RTL language handled differently across interfaces

[jeepurs]

Observed behavior

Arabic channel names do not read the same depending on whether they are a content channel tile or a top level breadcrumb

Expected behavior

The titles would be handled RTL similar across each layout

User-facing consequences

Not being able to read a correct tile

Errors and logs

…

Steps to reproduce

1. Visit http://australia-kolibri.mylearningpathway.org or http://jordan-kolibri.mylearningpathway.org
2. Click through "Earn - Job Skills" and search for HP LIFE (arabic) folder. Observe how the title are displayed in the tile
3. Click on HP LIFE folder and view how the title is displayed across the breadcrumb
4. They aren't the same

Context

Linux, Chrome

From @jonboiser

I think the issue might be because we are wrapping the text inside the tile/card inside another component (TextTruncator) that doesn’t have the language “direction” rule that we usually put in components. The breadcrumb version of the title is not wrapped up this way and should have the correct direction rule on it.

[jonboiser]

These bidirectional e.g. Latin + Arabic texts are pretty problematic. When you narrow the page and cause the line to break into two lines, you can also see that it doesn't read the same any more either, with our convention of using dir = auto

Same topic title, broken over two lines (dir="auto") which is what's going on in the Card version above.

Same topic title, broken over two lines (dir="rtl). Here, the title reads more correctly, but the parens are now misplaced and the "HP LIFE" is not in the intended location anymore.

"):

[indirectlylit]

see also - probably a different problem but maybe inter-related: https://github.com/learningequality/kolibri/issues/5468

[rtibbles]

@pcenov could you reinvestigate this in 0.15 onwards?

[pcenov]

@rtibbles The current design in 0.15.6 is quite different but still by looking really closely at the way the titles are displayed I was able to identify some instances where it would look better if the RTL title were right aligned:

Library page:

Library page in responsive design view (the text breaks incorrectly in two lines as commented above by JB):

Browse channel page:

[indirectlylit]

These look like examples of where using dir="auto" does not result in optimal behavior, presumably because the first characters in the titles are Latin which establishes an overall LTR base direction for that block.

Refs:

• https://design-system.learningequality.org/writing/#i18n
• https://www.w3.org/International/articles/inline-bidi-markup/uba-basics#beyond

[rtibbles]

I think because we are already using dir="auto" here, I think we've done about as much as we can, without adding a lot of complexity that could go wrong in other ways, so I am closing this as won't fix.