Admin Bar has RTL issues with the new icons and search

[helenyhou]

Admin bar appears to have some issues in RTL, namely with icons and search. Seems that the icons should be on the other side (and perhaps the comment bubble tail flipped) and search placement needs a little tweaking.

[koopersmith]

attachment:19424.diff​ makes the RTL positioning happier. Thus, I am happier.

[nacin]

Leading with a sidenote: In my old version of Firefox, the text looks like it is one pixel lower on the baseline than it should be. koopersmith confirmed on a current version.

I don't have an IE7 test environment, but in Opera, the icons brush up against text: ​http://cl.ly/3t2e1f1U2L2X0M1r0b2i. Same for frontend (no jQ) and backend. Search appears unaffected. Looks good in Opera for LTR.

In Safari and Chrome, same deal as Opera, but not as bad: ​http://cl.ly/1t1O1w3a3r0Z2l0T0I1C. Perhaps a pixel or two. This was not tested in Firefox but is probably present.

[nacin]

Spoke too soon for Opera LTR. The baseline is one pixel too high. ​http://cl.ly/0r3C0W03050I0X2V2G2v

[koopersmith]

Looking into these now. The baseline bugs seem to vary by browser — fixing one breaks the others. There's no special rtl line-height code, these are just browser inconsistencies.

[koopersmith]

I do not know what the deal is with that Opera screenshot, but it makes me sad.

[nacin]

Suggest commit on 19424.diff​ but the ticket should be left open for investigation for A) generic baseline issues and B) Opera issues.

[helenyhou]

I think Opera tries too hard to be clever and actually flip-flops left and right margins all by itself once you declare the direction of something to be rtl in CSS. If you take out direction: rtl it at least solves the icon issues in Opera, but it affects the user menu and maybe more. Not sure there's really an elegant solution.

Also, admin bar in RTL (actually, all of RTL) has Tahoma specified first. Baseline is still all over the place between browsers anyway, but that could explain the extra discrepancy. Does RTL need to be in Tahoma? That seems kind of strange - isn't Arial great for Unicode?

[SergeyBiryukov]

Replying to helenyhou:

Does RTL need to be in Tahoma? That seems kind of strange - isn't Arial great for Unicode?

Related: ticket:3136:15, #6616, #11239, #17854

[helenyhou]

Replying to SergeyBiryukov:

Ah, thanks. Scratch that part, then.

[nacin]

Dev reviewed in IRC.

[ryan]

In [19551]:

Admin bar RTL fixes for icon and search styling. Props koopersmith. fixes #19424

[ryan]

Reopen to investigate remaining issues.

[azaozz]

In [19561]:

Fix position of icons in Opera RTL, see #19424

[ryan]

Looks good.

[azaozz]

19424-3.patch includes the changes from 19424-2.patch and also fixes the background color on the "folded" search box in IE8 and 9.

[azaozz]

In [19566]:

Toolbar fix bg color in IE8 & 9 folded search box and IE7 search box size, see #19424

[azaozz]

As far as I can see the only thing remaining is the Opera RTL image padding/margin swap bug. Should be fixed in the next Opera version, ​http://my.opera.com/community/forums/topic.dml?id=190393