A simple solution for rtl layout

(Simon Cossar) #1

@Qasem_h and I have been working getting a rtl layout working with Discourse.

This seems like a good solution:

  • add the r2 gem to the Gemfile r2 | RubyGems.org | your community gem host

  • add a conditional statement to discourse_sass_compiler.rb to reverse css output for rtl locales - I used this if !SiteSetting.allow_user_locale && SiteSetting.default_locale.in?(%w(he ar fa_IR))

  • set ‘direction: left’ on html element in base.scss (r2 can’t reverse it unless it is explicitly written)

  • delete contents of rtl.scss - they are going to get reversed and mess things up

  • add a couple of css rules to fix icon and triangle directions

If you change a site’s default local you have to run ./launcher rebuild app to generate new css.

I tried to get this working with the rtlit gem that is in the Gemfile - it worked well in development mode but in production it seems to have some problems parsing the css.

There is a working example here: . It will be up for a day or so.

(Sam Saffron) #2

I am happy to add r2 gem in with require false if you can send through a PR (same goes for the various rtl changes needed)

Just want to keep the amount of manual maintenance down to a minimum here. This all needs to be automated and streamlined.

(Simon Cossar) #3

Great! I’ll add require false to the Gemfile. It’s all automated - the admin just needs to set their locale.

When I figure out how to send a PR I will send it your way.