Frontend Right-to-left support about architecture

[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...