[ZBX-12742] Add Right-to-Left (RTL) translations support in frontend Created: 2017 Sep 18  Updated: 2021 Nov 04

Status: Reopened
Project: ZABBIX BUGS AND ISSUES
Component/s: Frontend (F)
Affects Version/s: None
Fix Version/s: None

Type: Problem report Priority: Trivial
Reporter: Yaron Shahrabani Assignee: Andzs Auders (Inactive)
Resolution: Unresolved Votes: 0
Labels: localization, rtl
Remaining Estimate: Not Specified
Time Spent: Not Specified
Original Estimate: Not Specified

Attachments: PNG File HebrewZabbix.png     PNG File Zabbix RTL Mockup.png     File dark-zabbix-rtl.css    

 Description   

RTL is a kind of mirroring required for correctly display some Semitic languages (or language using Semitic scripts such as: Hebrew, Arabic, Persian, Urdu, N'ko, Aramaic, etc.).

There are some explanations from W3C in here: https://www.w3.org/International/questions/qa-html-dir

 Comments   
Comment by Yaron Shahrabani [ 2017 Sep 25 ]

It has nothing to do with text rendering, this is a completely different issue, this is about mirroring the entire interface so it will be readable for RTL users, not just RTL text rendering support.

Comment by Yaron Shahrabani [ 2017 Oct 26 ]

I created a mockup with some CSS modifications to explain the differences to LTR users.

Comment by Yaron Shahrabani [ 2017 Nov 08 ]

We're heading 90% of completed translation, any news?

Comment by Rostislav Palivoda (Inactive) [ 2017 Nov 08 ]

Great results yaron! Can you help us to understand what kind of support do you expect from Zabbix development team?

Comment by Yaron Shahrabani [ 2017 Nov 09 ]

Sure palivoda!
Due to historical and technological reasons several languages throughout the world are written from Right-to-Left (hence RTL), these users expect to see the interface reversed (as the screenshot shows).

The steps I've taken to prepare for this screenshot were:
1. Turning the directionality (Adding "direction:rtl" to the <body>).
2. Looking for overlaps and misbehavior and switch between "right" to "left" in the CSS definitions (either by using search or inspector).

It took me about 10 minutes to get to this result and as you can see you can do that also on an English interface, no Hebrew is needed.

If there was a mechanism to switch or add a stylesheet depending on the language I can make a stylesheet on my own and send it as a patch (or as files and location specification).

Thank you!

Comment by Rostislav Palivoda (Inactive) [ 2017 Nov 09 ]

Hi yaron, I think you could create your own theme - https://www.zabbix.com/documentation/3.0/manual/web_interface/theming
You can publish theme here - https://share.zabbix.com/virtualization

Comment by Yaron Shahrabani [ 2017 Nov 22 ]

The image is showing the visual glitches and the potential, still needs some work, maybe I can have some help from your side with this task.

The CSS is the one I modified to work with RTL, date and time selectors are reversed and I couldn't find a way to fix it, the shade on the item before last on top navbar is caused by some MMenu JavaScript which I couldn't figure out.

Overall it looks pretty good but it required more work to be included in 4.0.

My version is 3.4.1 which is also the base for my CSS work (A diff will show you what did I change exactly, I don't mind adding that as well).

Thanks guys!

Comment by Yaron Shahrabani [ 2021 Nov 04 ]

I see that Andzs Auders is no longer around, who is handling the UI nowadays?

Generated at Wed May 14 08:45:08 EEST 2025 using Jira 9.12.4#9120004-sha1:625303b708afdb767e17cb2838290c41888e9ff0.