Document right-to-left (RTL) guidelines

[tay1orjones]

Since we've landed carbon-design-system/carbon#13619, the styling provided for components through @carbon/styles and @carbon/react now uses CSS Logical Properties for styling. This means that component layout styling is now impacted by the writing mode. This improves out of the box support for rtl layouts by a significant margin, but we provide no other guidance on our website about how to design or craft experiences with rtl in mind.

I'd like to propose this live at a new dedicated section of the website, e.g.

https://carbondesignsystem.com/guidelines/bidirectionality/overview

Examples from other design systems/groups

• Material Design v2's Bidirectionality documentation
• W3C Arabic and Persian Gap Analysis
• (Right to Left (The Mirror World by Spotify (2019)
• Windows BiDi design guidance

Additional related articles/links on the topic

• W3C's Internationalization techniques: Authoring web pages
• RTL Styling 101 - An extensive guide on how to style for RTL in CSS

We have some limited documentation around a set of experimental components for impacting text and layout direction that could potentially be included as part of this content:

• https://react.carbondesignsystem.com/?path=/docs/experimental-unstable-text--overview

Open questions

• Is there existing documentation elsewhere from IBM on this topic that we could lift, use, or link to?
  • https://w3.ibm.com/globalization/
  • https://w3.ibm.com/globalization/develop/tips#handling-directionality-mirroring
  • https://w3.ibm.com/globalization/design/cultural#f.-gui-mirroring