CSS customisation for RTL


(Amit Friedmann) #1

Hi,
I am customising my Discourse instance (only CSS stuff so far) to fit the hebrew reader, already done some funky changes so it will be more right to lefty.
There is a specific change I am trying to do but keep failing: RTL align the email being sent to a user, the digest and the notification email (reply on topic, private message). I can’t find the right element I need to modify its style.
Can anyone point out what is the class or id of the div (or other) element that need to be set for text-align: right?

Thanks.


(Zvika Rap) #2

Hi,

I looked around and it seems that email styling is done here:

It’s hard coded in ruby so it might be challenging to override in generic way.

Also, can you please share your work with the community?
There’s a lot of people in need for RTL discourse supports, me included. Maybe we can do it in generic way so we can push it to the upstream discourse sources.
I saw you cloned the repository on your github account, so just push your changes to a new branch so we can work on it together.


Roadmap for styling email digest
Styling email digest
(Amit Friedmann) #3

That’s frustrating… Any idea how to start?

Sharing my changes so far, they are only CSS, but I have some plans to change more then then for RTL, for example switching the boxes in the reply control, so writing will be on the right and preview to the left.
The changes include right-align indentation for the topics table, re-arrange of the activity boxes in the user preference page (alignment between date and subject), right-align post boxes (and moving dates to the left) and changing the direction of the reply box.

#reply-title {
    direction:rtl;
}

.category-input {
    direction:rtl;
}

#wmd-input {
    direction:rtl;
}

.wmd-controls #wmd-preview {
    direction:rtl;
}

#topic-title {
    direction:rtl;
}

.cooked {
    direction:rtl;
}

#topic-list {
    direction:rtl;  
    td {
        text-align:right;
    }
    th {
        text-align:right;
    }
}

.topic-post .topic-meta-data-inside {
    float:left;
}

#user-activity .user-stream .clearfix {
    direction:rtl
}

#user-activity .user-stream .excerpt {
    direction:rtl
}

#user-activity .user-stream .time {
    float:left;
    direction:ltr;
}

.user-stream .item {
    direction: rtl;
}

.relative-date.date {
    margin-left: 5px;
}

(Zvika Rap) #4

Thanks for sharing.

I would prefer to implement RTL support in a general way where it’s supported by the main discourse code and not create a fork or a plugin.

As for css, I think the best approach is what wordpress is doing:
The file rtl.css would contain the rtl css cahnges.
The ruby code will detect if the configured language is RTL.
Then rtl.css will be conditionally included.
For the email, the rtl style in the up mentioned file could be put conditionally if the language is RTL.

There are other places that would require RTL support - for example the markdown editor.


(Amit Friedmann) #5

Yes, I agree. Twitter has also support for it, even predict the right/left
direction based on the language so it can switch sides (FB do it as well).
I think that language and locale need to be separated. The above suggestion
is a great solution when the locale is right to left, but a user is not
forced to a specific language when writing a post and you can’t (and don’t
want to) force it and so a solution for direction need to be for a specific
post (or even paragraph).
So ideally, I think:

  1. Locale control the visual components locations and direction and styles
    and the language of the forum itself (link names, table heading, etc…)
  2. User language controls the direction of the post and based on that the
    location/direction of visual components on the post.

(Zvika Rap) #6

Here are some approached for supporting RTL in rails applications:

The gem he created is here:

But the most simple approach I think we should do is described here.
http://amitkazmirsky.com/2011/05/29/dry-your-rtl-and-ltr-css-files-in-rails-with-sass/

I think it’s the best approach for Discourse since there are many stylesheets, most of them implemented in SASS.

@sam : Any thoughts on when and how we can have Discourse RTL support? I would be happy to contribute but I want my work to align with Discourse objectives.


(Zvika Rap) #7

Just to summarize the approach I think we should use to support RTL css:

  1. Define a textDirection variable at common/foundation/variables.scss defaults to value “left”.
  2. Override it with value “right” in common/foundation/rtl.scss
  3. Use that variable throughout all our scss files where RTL support is required (Convert static css files to scss if RTL support is required).
  4. Create an RTL copies of the main stylesheets (mobile-rtl.css.erb, desktop-rtl.css.erb and admin-rtl.css.erb) which includes common/foundation/rtl.scss. Its required to create copies because we need the asset pipeline to precompile both LTR and RTL versions.
  5. Create a ruby helper which determine the correct text direction based on Discourse configured language. We can borrow code from here: GitHub - liisberg-consulting/stylesheet_flipper: rails plugin to flip stylesheets on-the-fly and during asset compilation
  6. Use that helper in views/common/_discourse_stylesheet.html.erb to include the correct stylesheet.

We would also need to do other stuff:

  1. Support RTL emails in lib/email/styles.rb
  2. Create an Hebrew translation file. Other people could create Arabic etc.
  3. Flip the required image files.
  4. Use a dynamic direction detection in the editor, since RTL forums should support using LTR text and vice verse.
    Also some content should always be LTR (oneboxes, code etc.).
    I think we should integrate this library with the wmd editor:
    GitHub - hasenj/bidiweb: Determine the base direction of paragraphs and adjust them accordingly

Roadmap for styling email digest
(Sam Saffron) #8

wait a moment here, isn’t this automatic stylesheet flipper going to be enough? I really dread having to type stuff like float: $right and the even more confusing margin flips. Ideally this can be solved automatically with a handful of additional manual overrides.


(Zvika Rap) #9

I also prefer the automatic approach if we can get stylesheet_flipper working.
We need to fork it since current version does not support rails 4.


(Amit Friedmann) #10

Bumping it up. Does anyone has some implementation thoughts in that direction?


(Amit Friedmann) #11

Wonder if anyone has any update or work in progress to support RTL. I am hosting a Discourse forum which 99% of the content is in Hebrew (RTL language) and I had to do some funky CSS customization, which haven’t solved everything.
I mostly suffer from emails which are hard-coded to left-to-right and look awful with Hebrew text.

Best approach in my opinion is a single Site Setting for RTL/LTR which conditionally switch a CSS to support RTL across all.
Site Setting can automatically be switched if Locale is changed to a RTL language.
@zvikara put lots of details in his post about the technical implementation.


(Noam Cas) #12

Hi @amitfrid and @zvikara.

We are just about implementing Discourse for our communities at the Public Knowledge Workshop, and probably will deal with the same difficulties. Would you like to join our weekly meeting in Tel-Aviv to try and work on it together?

Noam

from the Public Knowledge Workshop`


(Simon V) #13

When are you meeting?


(Noam Cas) #14

We are meeting on Mondays, starting 18:00, at the Google Campus TLV (Electra tower, Yigal Alon 98, TLV). Next Monday (July 14) will be exceptional (won’t have a meeting).

If you plan to come, let me know, so I can make sure relevant people are also coming.

Noam


(Amit Friedmann) #15

Thank you for the invite @noam, I am not living in Israel, but very much want to be involved.
We can open a discussion here about what we think that need to be improved and/or implemented in the matter of I18n etc… For developers to pick up. Will also be great if you can share anything relevant from those meetings.


(Sam Saffron) #16

Keep in mind, we are totally open to patches that improve our RTL support, just need to make sure there are no regressions, especially leading to V1.

Be sure to post your game plan here so we can review it. If you have documents in hebrew it is fine, I can review them.


(Noam Cas) #17

Great, I will try the person who is responsible to update here, if and when something happens with it.


(Eyal Levin) #18

Made a pull request:

https://github.com/discourse/discourse/pull/2525

It needs work, (CSS based on Discourse RTL Customization · GitHub ), but I wanted to get things going. Hope it’s ok.

Please let me know how to proceed.

Thanks


(Neil Lalonde) #19

Good stuff, thanks @eyalev! It’s merged.


(Amit Friedmann) #20

Thanks @eyalev!
Do you have any list of planned tasks?