Better alternative for explainig how to achieve LTR and RTL at the same time in the docs

[elchininet]

Hi folks,

I am seeing that this is a recurrent topic in Bootstrap discussions: #36170, #37877, #33488, #39512, in the RTLCSS repository: #314, #301 and even on StackOverflow. On both places it is mentioned one of the plugins that I maintain: postcss-rtlcss.

postcss-rtlcss does exactly this. It uses RTLCSS behind the scenes to compile a CSS with both directions at the same time with the intention of changing the dir attribute of the HTML (or a specific class) and make the layout to change from LTR to RTL (or vice versa) without the necessity of loading an extra stylesheet.

Using postcss-rtlcss is not only an easy task to perform (just adding another plugin to the postcss config) but it also solves the third limitation mentioned here and it mitigates in a great level the second one, because it doesn‘t double the size of the CSS. Only declarations that are affected by direction are the ones that are prefixed. Comparing bootstrap.min.css with both directions (280 KB) with bootstrap.min.css with a single direction (227 KB) it can be noticed that the increment is a 23%.

On top of that, the proposed solution works overriding the LTR styles with the RTL ones, this will bring issues sooner or later because if a left declaration is overridden by a right one, the previous one should be cancelled, otherwise one will end up with both classes in RTL:

.test {
    padding-left: 10px;
}

.rtl .test {
    padding-right: 10px;
}

In RTL .test will have padding 10px on both sides, so the previous padding-left should be cancelled.

But even doing that cancelling operation, overriding styles could bring multiple issues (this is mentioned in the README of postcss-rtlcss in the section relative to override modes in the subsection Disadvantage of the override methods). It is better to use the combined mode with the safeBothPrefix option enabled to cover cases in which the specificity of the prefixed rules could affect other rules that have been not flipped.

I have built the Bootstrap site using both directions in combined mode with safeBothPrefix option enabled, and added a selector at the end of the header to switch between LTR and RTL and add the proper dir attribute to the HTML, so you can check what postcss-rtlcss does with a real life example.

Mentioning this in the LTR and RTL at the same time section will help a lot of users who are searching for the same and it will provide them with a better and more straightforward alternative.

Let me know if you find it valuable 🙂

Regards

[julien-deramond]

Hi there, sorry for the late answer.
postcss-rtlcss looks interesting, we were not aware of its existence.
Unfortunately, we can't include it in v5 since it would be a breaking change for RTL users. For the v6, we plan to switch to logical properties, so maybe postcss-rtlcss would be less useful in this case?
Anyway, as you suggest, we could at least mention postcss-rtlcss in our documentation in v5 :)
Do you want to create a PR for that? Otherwise, I'll do it later on.

[elchininet]

Hi @julien-deramond,

Thanks for the response.

I didn‘t mean to include it in Bootstrap by default, it would not be wise and I don‘t recommend it. Not only because of the breaking change, but also because this is a solution for a specific group of users that want to achieve a specific goal. 🙂

My proposal was to mention it in the LTR and RTL at the same time section of the documentation so users that want to achieve that could do it not with a workaround but with a tool that does all the work automatically and covering several edge cases and issues that come with the merge of both directions in a single file.

Sure, I can submit a PR with the text and mentioning some options to take into account.

Regards

[julien-deramond]

My proposal was to mention in the LTR and RTL at the same time section of the documentation so users that want to achieve that could do it not with a workaround but with a tool that does all the work automatically and covering several edge cases and issues that come with the merge of both directions in a single file.

Sure, I can submit a PR with the text and mentioning some options to take into account.

Great, I'll try to be reactive when the PR will be submitted. Thanks for this work! Appreciate it!
/cc @ffoodd for information

[elchininet]

@julien-deramond,

Here you go: #39863

Feel free to modify, delete or add whatever you think that fits best.