Preamble

Codex, our new toolset for building user interfaces within the Wikimedia Design System, must provide strong support for both left-to-right (LTR) and right-to-left (RTL) language scripts.

We need to review various considerations for bidirectionality and settle on a number of architectural choices to provide this support. This covers technological decisions as well as general principles and guidelines.

Considerations

The following considerations will be broken down into subtasks:

• Conversion of CSS properties between LTR and RTL for distribution or via ResourceLoader
  • Consideration of CSSJanus or equivalent solution for property flipping
  • Support of logical CSS properties, for example padding-start
    • Question of semi-lacking browser support even for our modern supported browsers (no IE11), PostCSS as possible solution out
  • Question of dynamic language changing without reloading
• Support bidirectionality and specifically RTL when developing with Codex (to cover things like design language, naming, flipping right/left arrow functionality, etc.)
• Document RTL support with Codex and how to build RTL-ready interfaces with it

Former discussions

• https://github.com/wikimedia/wvui/pull/76
• https://phabricator.wikimedia.org/T289804#7323622

Resources & documentation elsewhere

• https://material.io/design/usability/bidirectionality.html#mirroring-layout