Bootstrap 3.1 RTL Support

Created by: hero-m

I have built this issue to discuss the approach for supporting RTL in the upcoming 3.1 version. Although it's too early for implementation code and pull requests, choosing the right approach now helps in the planning, and directing the efforts towards a specific goal (as many people have already volunteered for the task).

I think the biggest issue is the lack of a standard, or best practices for adding RTL support for themes and pages. First, I want to review some of the current practices for RTL support in different parts of the web.

• WordPress: uses RTL overrides, in a single seperate file named rtl.css, auto-loaded by WordPress in right-to-left pages. explained here
• Drupal 7: uses RTL overrides, in a separate file with -rtl.css prefix for every css file loaded by themes, etc. again, auto-loaded in right-to-left pages. explained here
• Drupal 8: favors RTL overrides prefixed by [dir="rtl"], alongside the base css (no separate files). explained here; also, see the related discussion
• RTL-This (a website dedicated to turning everything RTL): Has an article comparing different ways to add RTL to css here.
• Another article by a css-expert (Jens O. Meiert): ... Indicate directionality by the dir attribute on the html element ... Avoid a separate RTL style sheet; find all declarations that specify anything specific to the left or right ... customize those declarations, and use some hook to apply them—like e.g. setting id="rtl" on the body element (well, you really want to use html[dir="rtl"]). article here.
• Another popular approach is to prefix all RTL rules with a .rtl class (and possibly .ltr for base rules, to prevent overrides). per #3133 (closed), #6423, and the less-bidi model.

I'd suggest using an approach than could satisfy these different requirements by simple customizations.

1. I suggest keeping the RTL rules in a separate css file. Clearly, merging them into a single stylesheet (when required) would be a single copy-paste at the end of the base css.
2. I suggest using overrides (vs mixins, or automated tools) in a separate .less file. Then, adding any combination of prefixes, or [dir= rules is as easy as a few lines of .less code. example:

[dir="rtl"] {
  @include "bootstrap-rtl.less"
}

or

.ltr {
  @include "bootstrap.less";
}

.rtl {
  @include "bootstrap-rtl.less";
}