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?


#2

we have this poroblems
//discourse-meta.s3-us-west-1.amazonaws.com/optimized/3X/b/4/b4559aa8aa63fdb94c97831c872703a675d2e6f7_1_690x118.png


(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

Great!

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!