Replies: 26 comments 17 replies
-
Hi @bjesus, it looks like you've successfully started the translation, which is excellent - thanks very much. @davecranwell, can you please reply on RTL support? I hadn't realised that a separate CSS file was necessary. |
Beta Was this translation helpful? Give feedback.
-
Hi @bjesus. My main consideration is that if you were to submit a PR for RTL support it would be difficult for the Wagtail core team to support it in ongoing work since none of us are familiar with RTL languages. (You could always submit ongoing PRs for RTL updates, but this process would be slow and quite frustrating for you!) Perhaps the best way might be if you create a new wagtail app which you maintain yourself outside the Wagtail repository. You'd install the app like any other in We've been meaning to create a list of third party Wagtail apps, and we'd be very happy to list yours if this way suited you. |
Beta Was this translation helpful? Give feedback.
-
Hi @bjesus. To clarify, we would love to have proper RTL support in core. We think that promising this to our users requires an expert contributor (you?) who can commit to keeping RTL styles up to date with any significant change in the UI. But perhaps it's simpler than we're imagining. What do you think? |
Beta Was this translation helpful? Give feedback.
-
Hi, I see our organization using Wagtail for a few years from now, so I believe we can do the maintaining of the stylesheet as it's really not a big deal. At the worst case though, it seems to me that having a mostly RTL'ed interface which some "new elements" shifting to the left is always better than having the whole interface inverted (which is how it is today for RTL languages :-) ). |
Beta Was this translation helpful? Give feedback.
-
If you're happy to maintain the RTL styles then we're happy to accept PRs which add RTL styles into wagtail core :) As for doing it all through one CSS file or many, I suppose it depends how much CSS you believe would be needed. If you're going to need to alter every component it might be best to try adding a section at the bottom of each existing file to cope with RTL, triggered by the addition of an Just adding |
Beta Was this translation helpful? Give feedback.
-
Hi, Thanks! |
Beta Was this translation helpful? Give feedback.
-
That sounds good to me. |
Beta Was this translation helpful? Give feedback.
-
PR #1534 |
Beta Was this translation helpful? Give feedback.
-
New PR: #5058. |
Beta Was this translation helpful? Give feedback.
-
#5058 has gone a long way towards having support for a RTL admin interface, but there's more refactoring work to do. If anyone's interested in this please consider contributing to this. There is also #5263 which is a more incremental change, but still valuable. I see that the admin UI is 96.3% translated in arabic, so feels like there are lots of people out either having their own custom styles, or looking at text displayed the wrong way around, but in any case who would want to see this fixed. |
Beta Was this translation helpful? Give feedback.
-
https://www.rtlstyling.com/posts/rtl-styling/ looks like a great resource on RTL styling. |
Beta Was this translation helpful? Give feedback.
-
Based on @zerolab’s resource above and my own research, it looks like the best approach for this in Wagtail would be:
I don’t think the switch to logical properties would be that much work if anyone wants to get started with this. We’ll need to set up https://github.com/csstools/postcss-logical as well for better browser support for the time being. If anyone wants to work on this, I think a more reasonable approach would be to do this component-by-component rather than "the whole admin at once". This minimises the risk of PRs falling out of date. Edit: resource on this component by component: https://spectrum.adobe.com/page/bi-directionality/. |
Beta Was this translation helpful? Give feedback.
-
An additional resource: https://www.chenhuijing.com/blog/css-for-i18n/ |
Beta Was this translation helpful? Give feedback.
-
We’re almost there with #6170, at which point supporting RTL languages should largely be a matter of switching our stylesheets to logical properties. A great deal should be achievable with relatively mechanical conversion to those properties, with little expert knowledge needed. If anyone wants to work on this, now is a good time to start so we can have RTL support in Wagtail 2.14. My preference would be to start doing this with a few components as a trial, so we can further validate this approach, and see tangible improvements. In particular, document the steps taken to achieve the RTL-friendly styles, and provide guidance on how you tested the changes. |
Beta Was this translation helpful? Give feedback.
-
I have converted this from a GitHub issue to a discussion thread, as we’re about to start work on this. At this stage I don’t think it’s terribly useful for us to have a single "pass/fail" issue – we’re going to be rolling this out across Wagtail over many releases, we’ll have to do tooling setup, documentation updates, and we’ll likely say we "support" RTL languages earlier than when we’ve definitely fixed all the bugs everywhere. We’re going to work on this as part of the page editor 2022 redesign, and at this stage we badly need feedback on our approach:
|
Beta Was this translation helpful? Give feedback.
-
A few updates on progress in this area
We would love to keep getting ideas on the #8017 discussion - as there is a lot of work underway for the 2022 Page Editor refresh, and where possible, we want to set up new things well. |
Beta Was this translation helpful? Give feedback.
-
#8051 has been merged (thank you LB for the review). I have created three follow-up issues which I think would be nice ones for people interested in RTL support to contribute to:
RTL support is getting there but there is still a fair amount of changes needed for the whole of the admin to mirror. |
Beta Was this translation helpful? Give feedback.
-
Discussed in today’s UI team meeting – @fabienheureux is picking some of this up, it feels like we’re not far off full support. He’s going to review float usage in particular, and which icons should and shouldn’t be mirrored. Here is a CodePen we put together with all the icons to collate whether they should be mirrored or not: https://codepen.io/thibaudcolas/pen/qBobgWG?editors=1000. |
Beta Was this translation helpful? Give feedback.
-
Are you still working on this guys? |
Beta Was this translation helpful? Give feedback.
-
For anyone keen to help with this but not necessarily able to easily access a Wagtail site – here is a snapshot of Wagtail 5.1 in Arabic. This isn’t a real Wagtail instance, just a snapshot of the HTML – so lots of parts of the CMS won’t work as expected, but I hope this will be helpful nonetheless. At this point the main blocker to RTL support in Wagtail is people with RTL language expertise or experience pointing out what the problems are and drafting solutions. We have some sense of common issues (see above) but it’s hard to notice what else might be amiss. Our fav resources for people who want to get up to speed:
|
Beta Was this translation helpful? Give feedback.
-
Hi all I have reviewed our existing icon set and made some recommendations for how we treat the icons for RTL languages - based on the best practices outlined in the resources shared above inc. https://m2.material.io/design/usability/bidirectionality.html#mirroring-layout In summary:
|
Beta Was this translation helpful? Give feedback.
-
👋 I’m looking for help from people who speak right-to-left (RTL) languages (Hebrew, Arabic, and Persian, and any other), as part of our goal to support Right-To-Left languages in the next release. Can you help us by spotting any issues in Wagtail which haven’t already been reported here? We’re already aware of icons not being properly mirrored, and of which translations are missing – are there any other glaring issues? To help with testing, I’ve set up two snapshot copies of the Wagtail admin: Please report any issues you spot in this thread. Once we have enough reports, we will proceed with: |
Beta Was this translation helpful? Give feedback.
-
Hi @thibaudcolas,
|
Beta Was this translation helpful? Give feedback.
-
Hi @thibaudcolas! Otherwise, I have a remark which is about the scroller. I think it would be better if it was on the right side there are some examples of famous web sites in Arabic (Aljazera, Alarabiya, Facebook in arabic ) , and they did exactly this |
Beta Was this translation helpful? Give feedback.
-
Hi @thibaudcolas , in the example above that I gave it is for the sites Aljazira, Facebook in Arabic and Alarabiya. I think we can take inspiration from them. |
Beta Was this translation helpful? Give feedback.
-
Update: the UI is looking solid now. We have about 20 days until we release Wagtail 6.0, where this new UI will ship. One remaining gap is translations – is anyone interested in helping with this, or know people who would be interested? Tagging @bjesus @fabienheureux @ammarhararah @badr4y @faagour in particular since you’ve been involved with this already. Improving translationsPlease see our documentation for translation contributors. Here is a record of how well Wagtail is translated across multiple languages, on Transifex. As of today, here is where RTL languages stand:
|
Beta Was this translation helpful? Give feedback.
-
Hi,
I've chosen Wagtail as the CMS for a big website our company runs. I'm in the process of integrating it into our current Django website, but I need the admin interface to be in all in Hebrew, and therefore, in RTL.
I've signed up on Transifex and requested (?) Hebrew so I can do the translation. Is this the right process?
Also, I guess the best way to RTL the admin interface is to have a separate CSS file that's loaded only for RTL languages. I'd be happy to write this CSS file, but I'm not sure how and where should I include it, and what would be best as way to contribute back to the project and not only to have a local hack. Any ideas?
Thanks.
Beta Was this translation helpful? Give feedback.
All reactions