Making Brand Header RTL compatible

Feature
,
1

How can we make this component to be compatible with RTL websites?

2

Few CSS customization can make this RTL compatible. I will work on it.

4 Likes
3

The component is not compatible with rtl websites. What should we do?

4

I tried it before. But it demanded more changes than I expected. It’s not in my current roadmap. pr-welcome.

3 Likes
5

I can submit a PR however I just don’t know how can I get the direction of discourse as a variable in theme component.

1 Like
6

In RTL layout <html> tag will include the CSS class rtl. You can do the customization based on it. If needed you can also check it in JS code by calling const isRTL = $("html").hasClass("rtl");.

1 Like
7

Sorry I didn’t understand you correctly. I just need to add a variable in common.scss file that indicates discourse global direction. I didn’t find such variable here:

If I have that variable in common.scss the customization would be pretty straightforward. Otherwise I don’t know how to do it.

8

Yes, we don’t have a global CSS variable I guess. You should check rtl.scss file to understand howto customize.

9

I submitted a pr

https://github.com/discourse/discourse-brand-header/pull/3

3 Likes
10

It’s merged. Thanks for the PR :heart:.

5 Likes