#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.
Comments
RTL should be LTR...
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:
This style is reversed for RTL languages in the same stylesheet as the LTR declaration like this:
The use of the
/* LTR */
comment on properties that need to be reversed is still recommended.- Mike
Corrected
Good catch, "RTL" has been corrected to "LTR".
Problem and solution about RTL styling.
Sometimes reversing the styles does not help. Consider the following example:
In the above example, reversed style does not override the LTR style. So I think we should use [dir="ltr"] in these cases:
It also may be possible to use something like the following code; but this may not work in every situation:
So the previous solution (using [dir="ltr"] ) seems to be the best practice for developers.
RTL in Drupal 8
the solution is works for me well
style.css
.block-dropdown-language{
width:100px!important;
height:100px!important;
float:right!important; /* LTR */
margin-top:6px!important;
}
style-rtl.css
[dir="rtl"] .block-dropdown-language{
float:left!important; /* RTL */
}