Hi folks,

I am seeing that this is a recurrent topic in Bootstrap discussions: #36170, #37877, #33488, #39512 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