Making Brand Header RTL compatible

Contribute Feature
,

AI-generated summary

Making Brand Header RTL compatible

The discussion revolves around making the Brand Header component compatible with Right-to-Left (RTL) websites. hosna initiated the conversation, seeking help to achieve this compatibility. vinothkannans suggested that CSS customizations can make the component RTL compatible and initially offered to work on it. However, he later revealed that the task demands more changes than expected and is not in his current roadmap, welcoming a pull request (pr-welcome).

hosna expressed willingness to submit a PR but needed guidance on accessing the Discourse global direction as a variable in the theme component. vinothkannans provided a solution, suggesting the use of the rtl CSS class in the <html> tag to customize the component. He also offered a JavaScript approach to check if the layout is RTL.

hosna was looking for a variable in common.scss to indicate the Discourse global direction but couldn’t find one. vinothkannans confirmed the absence of such a variable and recommended checking the rtl.scss file for customization guidance.

Ultimately, hosna submitted a PR (https://github.com/discourse/discourse-brand-header/pull/3), which was merged by vinothkannans, who thanked hosna for the contribution.

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