volto icon indicating copy to clipboard operation
volto copied to clipboard

rtl support is missing from Volto

Open pbauer opened this issue 6 months ago • 4 comments

Over 2 billion people read rtl-languages like Adlam, Arabic, Hebrew, N'Ko, Syriac, and Thaana (see https://www.w3.org/International/questions/qa-scripts.de#directions).

Enabling a right-to-left language does not enable dir="rtl" on the body-tag (see also #6851). When I add the tag to the body in volto/src/helpers/Html/Html.jsx basic rtl-functionality is there and view does not look too terrible but there are many issues, most notably the sidebar is still on the right hiding the toolbar which moved to the right, making is essentially impossible to work.

Additional context Given the plan to have the user-interface translated to virtually all languages as presented by Mack Palomäki at the Beethoven Sprint 2025 fixing rtl-support would open up a huge potential user-base.

Screenshots Here are screenshots of a dummy page with rtl in view, edit, default and volto-light-theme:

Image Image Image Image

pbauer avatar Jun 12 '25 15:06 pbauer

This is a duplicate of #6851

davisagli avatar Jun 12 '25 15:06 davisagli

Good point. I moved the comment to #6851

pbauer avatar Jun 13 '25 07:06 pbauer

Not a duplicate after all

davisagli avatar Jun 13 '25 18:06 davisagli

from https://github.com/plone/volto/issues/6851#issuecomment-2971497961

I think what is needed is 3 different kinds of language which at the moment are all conflated into one.

  1. The site language. When you have a multilinual site this is what the vistor has selected (or auto detected) as the language wanting to consume the content in whereever possible. Where its not multilingual site this is going to be the site default language. This is what the html lang attrib should be.
  2. The content language. You might not want to translate a whole site but have the need to have a few pages in different languages. In this case you still need this ability and in particular to do the right thing with RTL. This is an editor decision so this language is controlled by the language metadata field of the content. and the lang tag is just around the content itself. The editor is not expecting to go translate menus and footers etc so that should all be in the site default language still and the lang tag should reflect this.
  3. The UI language. Just because I'm writing content and browsing in another language doesn't mean as an editor I want the UI to be in that language. So this setting should be determined by the logged in user language setting. and it would only apply to the CMSUI parts of the screen. volto mixes this all up a lot so its not easy but I think its a really good thing to seperate this out so it's not longer such a mess. One example from our work is we needed our australian editors to enter the date in a sensical format which means we have to correct the US bug of putting the month before the day in the date entry widget for page settings. To do this we currently have to set the whole site language to english australian but that has other consequences.

Hopefully this seperation would make this problem of RTL language support more trackable also because it can be dealt with differently for each. For a start I don't think it makes sense to change the location of the toolbar and sidebar based on RTL or even the alignment of settings. But that decision can be tackled without having impact on multilingual RTL support first which is way more important.

djay avatar Jun 14 '25 03:06 djay