[FEATURE] Accommodate right-to-left languages

[esmeetewinkel]

What? App to accommodate translations to left-to-right languages. This might involve reflecting the entire screen layout horizontally, e.g.

• left-aligned text would need to be right-aligned
• centred text would stay centred
• "next" buttons that appear on the right and "previous" buttons that appear on the left would need to be flipped
• images probably should not be flipped (this would make sense in some cases, but not in all). We could go around this by providing language-specific images in case they do need to be reflected.

I'm assuming this would need careful review by someone that has experience with apps in this context and/or can read the relevant left-to-right language.

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

[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)
• [x] 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.