*-rtl.css files are eliminated in Drupal 8. Use [dir="rtl"] in stylesheets to target right-to-left language styling instead

By jessebeach on 1 July 2013

Change record status:

Published (View all published change records)

Project:

Drupal core

Introduced in branch:

8.x

Issue links:

https://www.drupal.org/node/2015789

https://www.drupal.org/node/2030925

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

RTL should be LTR...

mikeker commented 11 July 2013 at 19:23

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

Corrected

echoz commented 18 July 2013 at 20:02

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

Problem and solution about RTL styling.

hejazee commented 22 July 2013 at 02:22

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.

RTL in Drupal 8

hassengh commented 5 May 2017 at 08:49

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