[FEATURE] Accommodate right-to-left languages

[esmeetewinkel]

What?
App to accommodate translations to left-to-right languages.

Why?
ParentApp Kids Kuwait is planning to deploy in Arabic, which is left-to-right.

Issues found post-merge of #2317:

• [BUG] First app launch screens in RTL are not right-aligned #2615
• [BUG] Translations not showing within begin_task_card #2616
• [BUG] Audio player styling in RTL #2617
  • Open PR: chore: audio component handles RTL languages (LTR player controls enforced) #2657
• [BUG] Pop-up close icon should sit on the left in RTL #2618
  • Open PR: [BUG] Pop-up close icon should sit on the left in RTL #2618
• [BUG] Text bubble name alignment #2619
• [BUG] Copy component in RTL in plh_kids_kw theme #2620
• [BUG] Two right-most columns in a display group touch in RTL #2621
  • Open PR: fix: display group spacing RTL support #2661
• [BUG] Kuwait: RTL styling of plh_module_list_item #2623
• [BUG] Curly quotes in Arabic #2397
• [BUG] RTL title alignment #2640
  • Open PR: fix: text wrapping in title component for RTL languages #2658
• [BUG] Side menu in RTL #2624 (low priority for plh_kids_kw since side menu is only used to access developer tools in this deployment)
• Left-aligned buttons need to become right-aligned
• Need to confirm markdown works in RTL translation (in particular, bulleted / numbered lists)
• Need to confirm punctuation (., ;, :) at the end of a line works in RTL translation (it seems that this displays on the left automatically)
• Need to confirm text box works correctly (it seems that although the cursor shows on the left of the text, characters are added on the right as you type)
• Controls on video component have not reflected (need to confirm with RTL user)

Not prioritised:

• Task cards with icon / toggle don't display sensibly
• Toggle bar + debug toggle have not swapped

[chrismclarke]

Ionic has a blog post on adding support for RTL, I think the post makes it sound simpler than it actually is as a lot of our custom content has a somewhat hardcoded layout (like you identified with nav buttons), so we might need a bunch of extra styling overrides to accommodate as required

https://ionic.io/blog/ionic-and-rtl

There's also a few good examples in:
https://enappd.com/blog/how-to-use-rtl-right-to-left-in-ionic-apps-pwa/152/

[jfmcquade]

A few interesting points here: https://twitter.com/kepano/status/1777813094619840535

[chrismclarke]

Discussed on call, recommend keeping in config (or app_config) a languages property that stores language metadata, such as right-to-left e.g.

languages:{
   en_rtl:{
      rtl: true
  }
}

Then when setting the language should lookup app config in case there's any extra metadata to apply.
For initial testing recommend adding an English rtl alternate language to debug repo

[esmeetewinkel]

Issues found post-merge of #2317:

• Toggle bar + debug toggle have not swapped
• Left-aligned buttons need to become right-aligned
• Need to confirm markdown works in RTL translation (in particular, bulleted / numbered lists)
• Need to confirm punctuation (., ;, :) at the end of a line works in RTL translation (it seems that this displays on the left automatically)
• Need to confirm text box works correctly (it seems that although the cursor shows on the left of the text, characters are added on the right as you type)
• Cards with icon / toggle don't display sensibly
• Controls on video component have not reflected (need to confirm with RTL user)
• Audio player bar that fills up should fill up from the right. Also, the icons for "fast forward" and "rewind" should swap (need to confirm with RTL user)
• Two right-most columns in a display group touch
  

[jfmcquade]

We already have data lists for most deployments that store language metadata, e.g. this language_select template in the minimal sheets folder. Currently I believe this is just used to display the language select options as a radio_button_grid component, but if we're going to have a list of languages and associated metadata (e.g. the syntax suggested in this comment), it may make sense to make this authorable from a named data list sheet rather than directly in the deployment config.

[esmeetewinkel]

In an RTL language, the app-code version number in the side menu doesn't appear when clicking / hovering over the code version number. This is probably because it appears on the left of the content version number, which is outside of the screen.

[esmeetewinkel]

#2397