RTL: remaining tasks

Mostly around cheatsheet automation.

Questions

• Move cheatsheet from examples to main docs?
  • Allow main docs to be passed a direction in the front matter and have that automatically toggle LTR to RTL CSS inclusion
  • The above items should resolve most of this, but… De-dupe the RTL CSS once moved
  • Convert page content to Markdown
  • And https://github.com/twbs/bootstrap/pull/30980#issuecomment-737096962 :
    • Does our doc layout need to be converted to RTL too?
    • Or do we only embed RTL content in our current LTR doc layout?
    • What about translations, if we manage to automate cheatsheet content?
• consider to show utilities in the cheatsheet?

Need help

• check and update Arabic translations in RTL cheatsheet and RTL examples → in progress in #33097
• new example showing bidi content, as asked by @arafalov (comment)
  • That’s a valid use case for <bdi> and <bdo>, I guess: HTML5Doctor.com content and MDN docs for bdi and bdo
• Allow JS components to work in both directions in the same page? See #33076 #32446 #32913

Docs improvements

• maybe mention specific how-tos? → #32771
  • wrapping outputs with .ltr / .rtl: https://github.com/twbs/bootstrap/issues/32666#issuecomment-753880015
  • rename / alias utilities: https://github.com/twbs/bootstrap/discussions/32402#discussioncomment-194697 (probably in our “Customize / Sass” or “Utilities / API” page?)
• mention in our migration that if you had a RTL page styled using v4, you’d need to rename .ml-* to .me-* and .mr-* to .ms-*—basically the opposite of LTR. → #32771
• Maybe explain more explicitly the single Sass souce and the need to run RTLCSS, in a custom build? See #32816 for example.
  • Also need to make it obvious that RTL and LTR are separate files that cannot be used at the same time, maybe in our “Approach” section?
• RTL content in LTR docs require a <bdi dir="rtl"> wrapper? See @AqeelAT’s comment above.

Chore

• Add/enhance RTL JS tests: ping @twbs/js-review for help on this ❤️
• for carousel directions → Done in #32436
• for dropdowns / tooltips / popovers position, and for modals padding → Done in #30980

Personal note, as I’m getting exhausted by all those naming/aliasing/restoring utilities discussions:

• fork v5 personally and simply add some $utilities override to provide a solid and oldish v5 using v4 utilities (and dropping RTL support).

[ffoodd]

@omoridi And this is exactly what it does: ensure direction is ltr even in RTL file. Could you please read our docs, RTLCSS’ one and check our RTL cheatsheet example? That way you’ll see what’s the real result.

[ffoodd]

@SafaAlfulaij Would you mind opening a dedicated issue, please? This one is more docs related now. Thanks!