RTL language handled differently across interfaces

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.

[rtibbles]

@pcenov could you reinvestigate this in 0.15 onwards?

[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