Frontend Right-to-left support

[yosilevy]

Currently hass frontend defaults to left to right. Hebrew and Arabic use Right to left alignment and reading order. This requires style updates and possibly some script updates (for calculations dependent on GUI properties (such as sliders positions).

I need advice on the best method of implementation since it seems that many small changes are required in many places.

Need to decide on:

• The level of RTL flag - is it at the frontend: level or each individual group or component. My vote is to keep it simple now and we gradually setup RTL support for more and more components

• How will styles and scripts render the updated code? Conditional code in each component or a global style/script override file?

Just to understand the scope - getting the basics to look good is simply a direction:rtl in home-assistant-main but that immediately causes scroll bars not to work as well as sliders to produce the wrong value. I am working on a list of things to fix and how but I will need your guidance on how to incorporate it in a way that keeps the code clean.

I also want to set all panels other than the main states panel to use "direction: ltr" since they are perfectly fine to stay as-is and not be right-to-left friendly. Therefore the direction:ltr should probably not be placed in home-assistant-main but I'm not sure how to make it apply only to the states panel (haven't tried yet).

Thanks.

[emlove]

Do we know if Polymer provides any tools for us to use for RTL support? Particularly if sliders aren't working I'd be interested in knowing if there's an upstream solution.

Also it would be great if we can find any prior discussions of other open-source projects tackling this, especially ones that use Polymer.

[emlove]

Also for reference here is the material design guidelines: https://material.io/design/usability/bidirectionality.html#

[balloob]

I am fine with adding RTL styling. However, it's unreasonable to expect developers adding features making sure that it works with RTL. It adds another burden and requires more knowledge to add things. So you, or other RTL developers, will need to keep an eye on this yourself and fix bugs as they come up.

Instead of making lists of what to fix, let's start and see if it works with a single component: the sidebar. Here is an MVP that you could implement:

• Each language that is RTL will need to have a new attribute added: isRTL = true.
• This should be reflected by the LocalizeMixin as an attribute on the custom element. To do this, it should be stored in app.js on the hass object so that every component can have access to it.
• We can then add styling to ha-sidebar.js by using :host([rtl]) as a CSS selector.

If you can get this working, we can look at adding it to other components.

For the Polymer components, they are no longer maintaining the paper-* elements, instead they are now saying that we should use material-components-web-components.

[rhayun]

home-assistant/frontend#1966

[awarecan]

can be closed?

[yosilevy]

Yes. Closed. Constantly improving it...