1051763 - [WebComponents] - RTL support

Status: RESOLVED WONTFIX

(Firefox OS Graveyard :: Gaia, defect, P2)

Description

[Pavel Ivanov [:ivanovpavel][:pivanov] UX]

We need to support RTL in Web Components. We don't have :host or content: selectors yet that's why we need other solution to override the Web Components styles.

Comment 1

[Pavel Ivanov [:ivanovpavel][:pivanov] UX]

Here (http://pivanov.github.io/gaia-header/) is a working demo. Basicaly we add the dir attr to the .inner element and then just use: 

.inner[dir="rtl"] .icon-back:before {
  transform: scaleX(-1);
};

I'm not sure we need the event who listen on html[dir] changes and maybe `transform: scaleX(-1);` is not the best solution because of the performance :) but we can add rtl icons to the font and just use them when we need them.

Hope this help us to find a best solution for this problem.

Thoughts?

Comment 2

[Wilson Page [:wilsonpage]]

Looks good. I would just use the 'forward' icon instead of using the transform, but guess it doesn't matter too much.

.inner[dir="rtl"] .icon-back:before {
  content: 'forward';
};

Comment 3

[Pavel Ivanov [:ivanovpavel][:pivanov] UX]

Yeah :) I just use this the transform because we need to have in mind that in some cases we will need rtl icon :)

Comment 4

[Wilson Page [:wilsonpage]]

For something that works today we should set this inside the `createdCallback` and keep it up to date. Moving forward we should use `:host-context` [1] selector for a CSS only solution:

:host-context([dir="rtl"]) .icon-back:before {
  content: 'forward';
};

Could this bug be a good reason to start platform work on shadow-dom CSS selectors? Our workarounds are going to start piling up.

[1] http://robdodson.me/blog/2014/04/10/shadow-dom-css-cheat-sheet/#host-context

Comment 5

[Gordon Brander :gordonb]

FYI, flipping the spacial model of apps is not always the right answer for RTL. There are a lot of edge cases that require informed decisions and user research to go along with such a decision. swilkes has more details here.

We don't have RTL committed for web components until 2.2. If shadow-dom selectors are targeted for implementation in that timeframe, it might be better to "do it right, since we might have to re-write any work-around RTL hacks anyway. Just a thought.

Comment 6

[Bobby Chien]

[Tracking Requested - why for this release]:

Comment 7

[BMO Automation]

Firefox OS is not being worked on