Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Maintain RTL version of stylesheets with rails asset pipeline

Background

I want to enable right-to-left locales as well as left-to-right, but I only want to maintain a single set of stylesheets.

The idea is that calling application-rtl.css will serve a rtl-converted version of application.css (using r2).

This functionality has two use-cases:

  • development: serve dynamically, converting on the fly
  • production: have precompilation generate the -rtl versions (extending rake assets:precompile task)

So far, I've managed to implement a RTLConverter that enables me to serve all my stylesheets converted to RTL without having touched them at all:

config/initializers/rtl_converter.rb:

require "r2"
require "tilt"

class RTLConverter < Tilt::Template
  def prepare; end

  def evaluate(context, locals, &block)
    R2.r2 @data
  end
end

Rails.application.assets.register_preprocessor 'text/css', RTLConverter

You can also implement this as an engine for sprockets to only convert files having the .rtl extension:

Rails.application.assets.register_engine 'rtl', RTLConverter

My question

How can I hook into the asset pipeline in order to:

  1. serving an on-the-fly converted version of any stylesheet with the name-postfix '-rtl' (look for the file without the postfix and serve a converted version of that)?
  2. creating converted copies with the name-postfix '-rtl' of all stylesheets during precompilation

Notes:

The converter does not work in conjunction with the sass engine, but seems to work fine with less. It's been applied to a twitter-bootstrap based site and works like a charm.

The converter has not been tested in production.

If I can find a decent solution to this problem, I intend to create and maintain a gem and give it back to the community.

like image 505
Jeppe Liisberg Avatar asked Jul 05 '12 17:07

Jeppe Liisberg


1 Answers

I would aim for just using CSS directly to handle the LTR-RTL differences. CSS can probably handle the job for you. In case you define your CSS as LTR, then, based on a CSS class you can override the stuff you want.

  1. Per default, define your entire CSS stylesheet as LTR.
  2. Put an extra css class on the body which handle the locale. For instance <body class="RTL">
  3. Define all exceptions to the default by overriding with CSS classes prefixed by "RTL"

A short example. Original "default" styles:

body { direction: ltr; }
.sidebar { width: 200px; float: right; margin-left: 30px }

Then, overwrite relevant styles later in your css:

body.rtl { direction: rtl; }
.rtl .sidebar { float: right; margin-right: 30px; }

/*remember to 'reset' all defaults for example: */
.rtl .sidebar { margin-left: 0; }

With sass, you have a common place to define standard variables, for instance margin in the example above. Your mileage may vary. But to me, that sounds more simple than messing with asset pipeline.

like image 62
Jesper Rønn-Jensen Avatar answered Nov 15 '22 20:11

Jesper Rønn-Jensen