Right to left icon position for right to left languages

(Simon Cossar) #1

To improve the usability of right to left sites, I would like to to reverse the position of the font icons and any text node that may immediately follow them. I see that this can be done in a plugin by overriding the handlebars templates, but that will involve overriding a lot of templates.

Are there any better ways to do this?


we have this poroblems

(Simon Cossar) #3

In the Discourse templates the icons come before the text. For a right to left site the text needs to come before the icons. It is easy to override the templates in a plugin, but we will then be responsible for maintaining the templates if they are updated in the Discourse core.

(Sam Saffron) #4

Can’t it simply be floated right?

(Simon Cossar) #5

Floating the icon to the right will still leave it to the left of the text. Ideally it would come before the text - the same way it does in a ltr language.

(Kane York) #6

Hmm, does anything change if you apply this CSS?

* {
  direction: rtl;

(Simon Cossar) #7

For rtl languages the styles in rtl.scss work quite well. We went through them today and fixed everything that looked weird.

I don’t think the icon/label problem can be easily fixed with css. They are written in the wrong order for rtl languages. I don’t know how big of a problem it is for usablilty

(Mittineague) #8

Is it a matter of position or orientation or both?

(Simon Cossar) #9

Actually it seems to work the way it should in most cases. I wasn’t understanding how right to left works. Thanks.

(Kane York) #10

Found the fix.

.topic-statuses {
  float: none;
  display: inline-block;

Will submit a PR…

(Simon Cossar) #11


The problem I was finding with the icon position was a mistake on my part. The way I was thinking, everything in a rtl language would have to be written backwards.

We found quite a few rules that need to be added to rtl.scss. Should each rule be submitted as an individual pull request?

(Robin Ward) #12

If you want to package up a few rule into one PR that’s fine by me!