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