The |direction_css filter is applied to a CSS stylesheet and replaces any occurrences of left with right and of right with left [1].

Depending on the language of the environment [2], the filter therefore makes it possible to completely "invert" any such directional rules specified in a CSS file.

This filter starts by searching for an already existing (inverted) file, and if it doesn’t find one, then creating one within the local/cache-css/ directory.

If the stylesheet includes other stylesheets located in the same (host) domain (using the @import url rule within the file), the filter will propagate its modifications down to the those nested files.


[1Note: the filter does not handle (does not modify) any short-hand rules written like: #div { margin: 10px 15px 10px 50px; }; you must explicitly specify the FULL syntax of such definitions in your original style sheet: #div { margin-top: 10px; margin-left: 15px; margin-bottom: 10px; margin-right: 50px; } if you want the directional inversions to be applied to those styling commands.

[2It is possible to pass an argument to the filter to force a specific desired direction: |direction_css{rtl} or |direction_css{ltr}.

Author Mark Published : Updated : 26/10/12

Translations : català, English, Español, français, Nederlands