By jessebeach on
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

Comments

mikeker’s picture

RTL should be LTR...

mikeker commented

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

echoz’s picture

Corrected

echoz commented

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

hejazee’s picture

Problem and solution about RTL styling.

hejazee commented

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.

hassengh’s picture

RTL in Drupal 8

hassengh commented

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 */
}