993089 - [BB][RTL] Make handling RTL & LTR text inside headers smarter

Status: RESOLVED WORKSFORME

(Firefox OS Graveyard :: Gaia, defect)

Description

[Ahmed Nefzaoui [:Nefzaoui]]

The idea is to make *RTL text* always on the Right no matter what direction the document has. and *LTR text* always on the left with what so ever document direction too.
The concept gets clearer when Playing both RTL and LTR Music while OS is in English, you will notice no matter what title you're playing, it's always on the left. And for Arabic too, no matter what song title, it's always on the right.
The idea is to use both dir="auto" alongside :dir pseudo class so that if we have an RTL text, align it to the right, if we have LTR text, align it to the left no matter what direction the current app has.

Comment 1

[Ahmed Nefzaoui [:Nefzaoui]]

I actually opened the bug before rechecking Headers' css file :P After doing so it seems there is no need for :-moz-dir() in this case and all we have to do is delete text-align:left then whenever we need such feature we just add dir="auto" to the <h1> element of the title. (Music App is one example)
Attaching PR and Screenshots

Comment 2

[Ahmed Nefzaoui [:Nefzaoui]]

Attachment: Music App - System languge: English - LTR Song

Comment 3

[Ahmed Nefzaoui [:Nefzaoui]]

Attachment: Music App - System languge: English - RTL Song

Comment 4

[Ahmed Nefzaoui [:Nefzaoui]]

Attachment: PR to Github

Based on our IRC conversation, I think the goal of the bug is pretty clear by now, if you're okay with it then may I get a review please, Kazé? :)
Thanks

Comment 5

[Stephany Wilkes]

I think that, for headers, we'll have to do the following:
* Ensure the web components team that is turning the header into a web component knows that the header needs RTL support, and that they have requirements around that;
* Ensure the CSS styles for the web component do what they need to do;
* Target it for 2.1 most likely.

Does this sound right to you Ahmed? Sorry for the bug traffic today. Just trying to get a sane backlog in order for RTL work so it can get some traction. Thanks!

Comment 6

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

I think this is obsolete because of the new Centered [BB]Headers and we can close this one :)

Comment 7

[Ahmed Nefzaoui [:Nefzaoui]]

(In reply to Stephany Wilkes from comment #5)
> I think that, for headers, we'll have to do the following:
> * Ensure the web components team that is turning the header into a web
> component knows that the header needs RTL support, and that they have
> requirements around that;
> * Ensure the CSS styles for the web component do what they need to do;
> * Target it for 2.1 most likely.
> 
> Does this sound right to you Ahmed? Sorry for the bug traffic today. Just
> trying to get a sane backlog in order for RTL work so it can get some
> traction. Thanks!

I must have completely lost track of this one. Sorry about that..

(In reply to Pavel Ivanov [:ivanovpavel] from comment #6)
> I think this is obsolete because of the new Centered [BB]Headers and we can
> close this one :)

This is obsolete because of the new Centered BB headers as Pavel said

Comment 8

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

No problem :) I will mark this as WORKSFORME

Comment 9

[Stephany Wilkes]

Great news - thanks guys!

Comment 10

[Peter Bylenga [:PBylenga]]

Mass Edit: adding the [rtl-meta]