436509 - CSS direction:rtl is pushing non alpha-numeric characters to the left

Status: UNCONFIRMED

(Core :: Layout: Text and Fonts, defect)

Description

[Kris Willis]

User-Agent:       Mozilla/5.0 (X11; U; Linux i686; en-US; rv:1.9b5) Gecko/2008050509 Firefox/3.0b5
Build Identifier: Mozilla/5.0 (X11; U; Linux i686; en-US; rv:1.9b5) Gecko/2008050509 Firefox/3.0b5

The following code is being rendered differently in 3b5 compared to 2.0 and IE7:

#CSS
.panel_bg em {
    display: inline-block;
    display: -moz-inline-box;
    text-align: right;
    direction: rtl;
    width: 80px;
    font-weight: bold;
    font-style: normal;
}

// XHTML
<div>
    <em>key:</em> value<br>
    <em>key:</em> value<br>
</div>


In FF2 and IE7 I'm getting a nice organised set of 'key: value' pairs, one on each line, FF3b5 does render it similarly, but the colon is being placed before the word 'key' instead of afterwards, like it is typed in the code. If I comment out the 'direction' attribute in the CSS, the colon is positioned correctly, but I loose the formatting it provides. This appears to be the case for a number of non alpha-numeric characters (!,£,$,% etc...)

Reproducible: Always

Steps to Reproduce:
1. Load am HTML file containing the code provided.
Actual Results:  
:key value
:key value

Expected Results:  
key: value
key: value

Comment 1

[David Baron :dbaron: (⌚️UTC-4, no longer working on Mozilla)]

You should really be using display:inline-block after display:-moz-inline-box; that would mean newer Firefox's that support inline-block would use it.

You also probably don't actually want to be using direction:rtl here; that's what you'd use to indicate that the element contains Hebrew or Arabic text.  I suspect this behavior is correct (since colons need to support being in right-to-left or left-to-right text), but I'm a little surprised that it changed between Fx2 and Fx3, so moving to the appropriate component.

Comment 2

[Simon Montagu :smontagu]

(In reply to comment #0)
> If I
> comment out the 'direction' attribute in the CSS, the colon is positioned
> correctly, but I loose the formatting it provides.

What formatting exactly does the direction attribute provide here? Some people use it mistakenly to get right alignment, but since you also have "text-align: right", I assume you mean something else. It's likely that whatever it is is a side effect of "direction: rtl" which you can achieve in some other way.