Change record status: 
Project: 
Introduced in branch: 
8.x
Description: 

#2015789: Remove language_css_alter() (RTL stylesheets) in favor of HTML 'dir' attribute removed all *-rtl.css stylesheets from core. Support for right-to-left language styling has been replaced by scoping styles to the dir attribute on the html element. So, for example, an element might be floated left for LTR languages:

.menu li {
  float: left; /* LTR */
}

This style is reversed for RTL languages in the same stylesheet as the LTR declaration like this:

.menu li {
  float: left; /* LTR */
}
[dir="rtl"] .menu li {
  float: right;
}

The use of the /* LTR */ comment on properties that need to be reversed is still recommended.

When upgrading your modules to D8, you will no longer include *-rtl.css files. Instead, just reverse your RTL style declarations right after you have declared the LTR styles.

Impacts: 
Module developers
Themers
Updates Done (doc team, etc.)
Online documentation: 
Not done
Theming guide: 
Not done
Module developer documentation: 
Not done
Examples project: 
Not done
Coder Review: 
Not done
Coder Upgrade: 
Not done
Other: 
Other updates done

Comments

I think there is some confusion in the above example -- the comment should be /* LTR */ for CSS that needs to be reversed.

I believe the above bit should read:

.menu li {
  float: left; /* LTR */
}

This style is reversed for RTL languages in the same stylesheet as the LTR declaration like this:

.menu li {
  float: left; /* LTR */
}
[dir="rtl"] .menu li {
  float: right;
}

The use of the /* LTR */ comment on properties that need to be reversed is still recommended.

- Mike

Good catch, "RTL" has been corrected to "LTR".

Sometimes reversing the styles does not help. Consider the following example:

.menu li {
  margin-left: 10px; /* LTR */
}
[dir="rtl"] .menu li {
  margin-right: 10px;
}

In the above example, reversed style does not override the LTR style. So I think we should use [dir="ltr"] in these cases:

[dir="ltr"] .menu li {
  margin-left: 10px; /* LTR */
}
[dir="rtl"] .menu li {
  margin-right: 10px;
}

It also may be possible to use something like the following code; but this may not work in every situation:

.menu li {
  margin-left: 10px; /* LTR */
}
[dir="rtl"] .menu li {
  margin-left: inherit;
  margin-right: 10px;
}

So the previous solution (using [dir="ltr"] ) seems to be the best practice for developers.

Visit my site @ http://www.hejazee.ir/