RTL: remaining tasks

[ffoodd]

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 Add RTL support #30980 (comment) :
    • 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 Update RTL examples #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 Fix carousel sliding direction in RTL pages #33076 util: change isRTL to a function #32446 Fix carousel RTL and refactor code, fix rtl swipe issues #32913

Docs improvements

• maybe mention specific how-tos? → Improve docs regarding RTL migration #32771
  • wrapping outputs with .ltr / .rtl: RTL Problem #32666 (comment)
  • rename / alias utilities: [Feedback] new names of utilities classes in bootstrap 5.0 beta-1 look weird. #32402 (reply in thread) (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. → Improve docs regarding RTL migration #32771
• Maybe explain more explicitly the single Sass souce and the need to run RTLCSS, in a custom build? See Customize sass variables not work in rtl mode #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 <3
• for carousel directions → Done in RTL improvements #32436
• for dropdowns / tooltips / popovers position, and for modals padding → Done in Add RTL support #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).

[FaridAghili]

#32327

Great job, noticed this issues so far.

[pau1phi11ips]

Is there a discussion somewhere for the huge amount of work it's going to add to migrations changing l/r to s/e?

[ffoodd]

@pau1phi11ips You may open a discussion if you need; regarding migration, I'd suggest you have a look at our migration guide.

[pau1phi11ips]

I've checked out the migration guide. Moving from 4 to 5 didn't look like it's be that much work until the left/right to start/end bombshell. I was just surprised I couldn't find any existing discussions on the change.

[FaridAghili]

It's still not much work as a couple of find/replace commands will do the work.

It's a huge step forward to support RTL languages since many modern UI frameworks have support for it, it worth the effort.

[ffoodd]

Well @pau1phi11ips, the PR itself is probably the biggest discussed PR in Bootstrap history, and its description links to dozens of previous discussions—with the latest one #30918 helping to choose the way we wanted to implement RTL. It's been announced several times on Twitter and on our blog (in our alpha releases announcements).

I don't know what more we could've done, but any suggestion is welcome since we can improve our docs and communication before we hit stable release, to prevent anyone from being surprised like you were.

This is a major release because of those breaking changes. And as @FaridAghili said, changes are 1:1 for class names, so it's really straightforward.

[pau1phi11ips]

Thanks for the links @ffoodd, that's what I was after in the first place. Sorry I missed the news about this before.

I appreciate having RTL support is good for Bootstrap. Just not sure it's method is the best for what must be over 95% of current Bootstrap 4 users. Maybe memories of updating all our frontend pages from Bootstrap 3 to 4 is making me react more severely to breaking changes in 4 to 5 though 😏 Migrating Bootstrap 3 to 4 took frickin' ages to complete.

[arafalov]

Is it fair to say that the RTL approach chosen is all or nothing? Is it possible to have a website (e.g. CMS-generated) where an article or slideshow content in English is mixed with another in Arabic?
I did not dig into this super deep, but the initial documentation seems to indicate that. And, in cheatsheet, I did not see things like bdi element and I did see related issues with elements like "...browse" because of neutral nature of "." character in native input elements.

This may be quite important limitation to help people understand what is actually possible. Mixed content is a messy reality for multilingual organizations, so if you have position (or workarounds or even just thoughts), it would be great to know.

[ffoodd]

@arafalov You're right, our approach (currently) is to have two separate files: one for LTR and one for RTL—meaning you can't use both at the same time. And it seems legit since your document has a main language.

However everything still works, so regarding mixed contents you'd do like you did before: using our utilities to layout things (and dir & lang attributes, obviously). We may add a dedicated example with mixed contents, that could help?

My hope is that logical properties will eventually be supported enough when we'll start v6, so that we drop RTLCSS and separate files. That would solve the mixed content case :)

BTW, are you aware of any tool or framework that handles mixed languages contents in another way? Every source and inspiration is good to know.

[arafalov]

@ffoodd Thank you for the clarification. Yes, I think a dedicated example with mixed content would really help. The bidi is a hard topic, so extra level of clarification early on and demo examples would really simply developers' life and understanding the level of built-in/additional support/effort required.

I am not aware of any other framework doing this better, unfortunately. Drupal does try to support mixed languages content, but that probably does not qualify as framework.

[ffoodd]

@omoridi What issue are you solving? Please open a pull request if you have any patch to submit.

[omoridi]

Hi, why this block is remarked in rtl file?

/* rtl:raw:
[type="tel"],
[type="url"],
[type="email"],
[type="number"] {
direction: ltr;
}
*/

always these must be ltr

[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.

[omoridi]

@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.

Hi, excuse me for late answering,
I write a simple application with .net core, that's convert bootstrap.rtl.css to another file.
why? because!
1- You can have rtl and ltr bootstrap objects at same time on the one page!
2- The rtl file too simple and small.
.rtl dd { margin-right: 0; }
3- every where if you like you can use rtl class as class='rtl' in body, in div or anywhere else.

I test it, it's okay but, some class must be changed in main bootstrap,
where? like you set margin-left and rtlcss changed to marign-right and my simpler application only used marign-right and div have to class margin-left:some value and margin-right:same value.
if main bootstrap we must set both value or add some fixer class to fixed that issue.

so what we can? i try to fixed on bootstrap or add helper class for rtl?
if you want the rtl sample css, let me say or wait to completed.

[ffoodd]

@omoridi If I understand correctly, you'd need bidi stylesheets, not simply RTL and LTR side-by-side. This is not what we've done currently—and it's explained in another issue's comment. You're the one who opened the said issue, I answered with a precise code sample and solution.

I even added to the current tasks list an item to document this solution—so please consider answering in your previous issue because for now we're only polluting this one.

[aqeelat]

Converting Markdown to HTML should surround rtl text with a <bdi dir="rtl"> tag

[ffoodd]

@aqeelat I'm not sure to understand your last comment, would you have an example where surrounding would be mandatory?

[aqeelat]

@ffoodd For some weird reason, RTL text is arranged from left to right, and then displayed as such. Imagine it this way:
the sentence: "hello world" becomes "dlrow olleh" and then written in cursive in this order.

This explains it.
link to the page.

[ffoodd]

Wow @aqeelat thanks for finding this, I had no idea! Need to check if Hugo allows some tweaks for such cases, but I'll add this to the to-do list.

Thanks again for your contributions, I'm learning a lot ❤️

[omoridi]

Dir is not good idea!
if you want to support right direction use start end properties not left and right.
but this is have an issue chrome version 89 and above support it firefox version 66 and above other browser do not support.
https://developer.mozilla.org/en-US/docs/Web/CSS/border-end-end-radius

but I like this and I will use it.

[SafaAlfulaij]

Bug: Offcanvas close button doesn't switch place:

bootstrap/scss/_offcanvas.scss

Line 25 in a9d7a62

margin: ($offcanvas-padding-y / -2) ($offcanvas-padding-x / -2) ($offcanvas-padding-y / -2) auto;

[ffoodd]

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

[WEBPerformace]

My hope is that logical properties will eventually be supported enough when we'll start v6, so that we drop RTLCSS and separate files. That would solve the mixed content case :)

Hey hey! Hello from the future! Today logical properties are supported widely enough to finally consider this question! 😉

https://caniuse.com/css-logical-props

[aqeelat]

Would a find-all “margin-left” and replace with “margin-start” work? Or would it be on a case-by-case basis?Anyways, I’d love to be involved.