Skip to content
GitLab

Add RTL support

Merged Administrator requested to merge master-fod-rtlcss into main

Created by: ffoodd

Fixes #30918 (closed), fixes #24807 (closed), fixes #27783 (closed), fixes #31845 (closed)

Preview — Examples — cheatsheet — RTL cheatsheet

Todo

Beta 2

  • 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

Cheatsheet

  • use buttons in cheatsheet side navigation, as it's been done in our main docs recently
  • Fix the sticky components title covering the page content
  • Fix floating labels example (remove row)
  • Make the header a little less huge
  • check and update translations in examples and cheatsheet

Docs

Done

  • add RTLCSS and dedicated scripts
Test cases
Spotted bugs
Documentation
Chore things
  • add files to SRI hashes and docs' _config.yml
  • #31210 — consider renaming things, ala Logical properties—to prevent .float-left { float: right; }. It would also help to switch to logical properties one day (when dropping Legacy Edge, v6 or tomorrow with #30986 ?)
  • add RTL files to Bundlewatch
  • double check the css-rtl task: something feels weird when it comes to start the docs, since it builds the dist then post-processes it for RTL.
  • Missing a way to correctly handle modal's padding in two ways. I fixed a case but I guess there's more…
    • and it will obviously require new test, I guess?
  • proof-read JS changes: I added a utility to check if document is using dir="rtl" and calling it where appropriate to toggle right / left.
  • double-check package.json changes:
    • I duplicated css-minify to prevent a hundreds cols long script, but it's basically the same, split on two parts (standards + RTL)
    • I added a watcher for dist/css/ to reload when RTL files are compiled again (since they're not compiled from our sources but from our dist files)
  • fix sourcemaps for RTL dist files
    • FWIW, sourcemaps are fine: there's a single path ending URL encoded, but it's not part of our sources: %3Cinput%20css%202%3E
    • I think it relates to the /*rtl:raw*/ directive, used for [type="email"] for example;
    • Other /* rtl:* */ directives are correctly mapped to their sources.
    • Opened an issue upstream to have some better understanding.
  • (optional) run examples CSS through RTLCSS (dashboard, carousel, blog) to use a single source for both LTR & RTL
    • @XhmikosR I managed to make it work as intended, however I'm stuck with setting the full output path since glob patterns don't seem to work here (so we have /5.0/) in --dir and --base).
  • check new examples' screenshot (old logo?)
  • make a new dist PR separately before we land this one (#32216)

Questions

  • About the new Cheatsheet example: should we add introduction text before each component or section? → Probably not, since it's mostly a detailed view not meant to replace docs.
  • I used RTLCSS block-level syntax for directives, but RTLCSS' fork used property-level syntax. Block-level is lighter to output and faster to parse, but make it less obvious of what is important to ignore for RTL. Should I move to property-level syntax? → Switched to property-level syntax, as argued in comments.

References

Related

RTL concerns

#28797 (closed) #28238 (closed) #24807 (closed) #27123 (closed) #27122 (closed) #26879 (closed) #26818 (closed) #19545 (closed) #26299 (closed) #25422 (closed) #24662 (closed) #23703 #24332 (closed) #23117 (closed) #22708 #22137 (closed) #21619 (closed) #21180 (closed) #20293 (closed) #19555 (closed) #20075 (closed) #19787 (closed) #19703 (closed) #19668 (closed) #19643 (closed) #19545 (closed) #19379 (closed) #18184 (closed) #17595 (closed) #16455 (closed) #16419 (closed) #15717 (closed) #15700 (closed) #15509 (closed) #15479 (closed) #15433 (closed) #14717 (closed) #14510 (closed) #13564 (closed)

Kitchen sink of sorts

#18645 (closed) #27783 (closed) #21209 (closed) #17423 (closed)