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

3 Likes
10

Itā€™s merged. Thanks for the PR :heart:.

5 Likes