Final RTL discussion

Created by: zjbarg

The issue:

Bootstrap doesn't currently have rtl support. The solution should come from the rtl-interested community, but we need a plan. Maintaining a fork with rtl fixes is, in my opinion, wasted effort; there must be a better solution.

Approach for solving this issue:

Rules

Same source ( No abc.rtl.scss).
Should not increase the dist size at all for users who do not need rtl support.

Solution

New Variable $rtl-support

Value	Meaning
0	Original bootstrap (default)
1	Everything filpped
2	LTR and RTL**

** When using 2 user will have to set the dir="rtl" or dir="ltr". i.e <html dir="ltr"> or <html dir="rtl">

Mixins everywhere Instead of

.alert-dismissible {
  padding-right: $close-font-size + $alert-padding-x * 2;

  // Adjust close link position
  .close {
    position: absolute;
    top: 0;
    right: right;
    padding: $alert-padding-y $alert-padding-x;
    color: inherit;
  }
}

lets have

.alert-dismissible {
  @include padding-right($close-font-size + $alert-padding-x * 2);

  // Adjust close link position
  .close {
    position: absolute;
    top: 0;
    @include right(0);
    padding: $alert-padding-y $alert-padding-x;
    color: inherit;
  }
}

and the mixins would look like:

@mixin padding-right($value) {
  @if ($rtl-support == 0) {
    padding-right: $value;
  }
  @else if ($rtl-support == 1) {
    padding-left: $value;
  }
  @else if ($rtl-support == 2) {
    [dir="ltr"] & {
      padding-right: $value;
    }
    [dir="rtl"] & {
      padding-left: $value;
    }
  }
}

@mixin right($value) {
  @if ($rtl-support == 0) {
    right: $value;
  }
  @else if ($rtl-support == 1) {
    left: $value;
  }
  @else if ($rtl-support == 2) {
    [dir="ltr"] & {
      right: $value;
    }
    [dir="rtl"] & {
      left: $value;
    }
  }
}

Also, option 2 will include ms-x, ps-x, float-start, and -e, -end classes.

Obviously there will be alot of mixins. Moreover some of the mixins will change, i.e. border-left-radius => border-start-radius and will contain the same login as shown above.

I didn't want to make a pull request of this so here is an example where I have done the above for [alert, breadcrumb, btn-group, card]

If the maintainers have another approach to proving RTL support, kindly share.

Some of the related issues

#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)

@mdo @cvrebert