Fixed RTL - Firefox username alignment issue

[refael]

This is how usernames looks in firefox (v33) with RTL language.
It's related to the dir="auto" statement of usernames.



To clarify, the expected result is the username to be in the right side.
It's okay in Chrome and IE11. But firefox could be the one who actually works by the spec in this situation.

This resource explains that this behavior is expected for block elements.
To avoid the change in the alignment, they suggests to wrap the inner content with an inline element and apply the dir attribute to that.

From my tests I noticed that changing the 'block' into 'inline-block' resolves the problem as well.

 

[Mike]

inline-block works here mostly because the next element is a block, but that can't really be guaranteed so I don't think it's a safe change.

I'm wondering if applying [dir=auto] { text-align: left|right } is a safe workaround. If the element is inline, this should be ignored; the specificity is also the same as one class specification so it shouldn't really override anything (it would be in the earliest CSS we set).

 

[Mike]

I'm trying the text-align workaround. I'm not expecting any side effects (low specificity and specified very early), but please let me know if you notice anything.