CSS Flipper

CSS Flipper allows you to flip your style sheets directionality in no-time while keeping them dynamic for future changes.

When developing a bi-directional site you must adapt your style sheets to both directions, this is usually done by creating a style-rtl.css file with all the directionality overrides in it, this is:

• Hard to create - it will take at least a few hours to create an RTL version from an average LTR style sheet.
• Hard to maintain - every change in the LTR layout must be done in the RTL stylesheet too.
• Unidirectional - the default is always your LTR style sheet and the overrides are always the RTL ones, some times you might need the exact opposite.

CSS Flipper addresses the first two issues by creating a flipped style sheet on-the-fly and the third by allowing you to add LTR specific style sheets (core will only let you add RTL specific stylesheets).

CSS Flipper started as one of Sasson's features but was extracted into a separate module for the greater good.

How to use

Let's say you have a style.css file in your theme and you would like to create an RTL version for it:

• Download and enable the module
• On the same directory where style.css is stored, create a file named style-auto-rtl.css
• Edit the file and insert this line @flip {file: "full/path/to/style.css"}, the path should be the path from your drupal root directory, no leading slash. save.
• Clear cache

Want to prevent flipping?

If you want the script to skip specific rules and not flip them you can do:
/* no-flip */ to prevent that line from being flipped.
/* no-flip-block */ to prevent the whole block (from { to }) from being flipped.

Going the other way?

If style.css is RTL and you would like to convert it to LTR, simply call the file style-auto-ltr.css instead

Still need fixes?

You can add your own overrides after the @flip line.