User:Frédéric Massart

Since Moodle 3.2, most of the work is automatically done for developers.

Auto flipping

Using the tool RTLCSS-PHP, the styles are automatically flipped when the language is right-to-left. However, as there always are a few exceptions, special comments can be added to the CSS files to prevent rules from being flipped, etc...

Here is an example.

.hello-world {

   margin-left: 10px;
   /*rtl:ignore*/
   padding-left: 10px;

   background: url('logo.png') 0 0 no-repeat;
   /*rtl:raw:
   background-image: url('logo-rtl.png');
   */

   color: blue;

}

Will become:

.hello-world {

   margin-right: 10px;
   padding-left: 10px;

   background: url('logo.png') 0 100% no-repeat;
   background-image: url('logo-rtl.png');

   color: blue;

}

For more information on the special comments, refer to the documentation of the tool RTLCSS-PHP.

Caveats

It is important to note that the special comments must NOT end a file or a rule block. All comments not preceding a block, or a rule are ignored.

Also note that comments in SCSS or LESS will often not produce the desired effect. When dealing with SCSS and LESS, ensure that your special RTL comments are attached to pure CSS statements: no @extend, indented rules, etc...

Forcing the text direction

Whilst .dir-rtl should not be used any more, we've added .text-ltr which allows developers to force the direction of the text to left-to-right. This is especially useful for forms fields (numbers, emails, URLs must not be RTL'd), and for displaying code snippets or configuration samples.