Page MenuHomePhabricator

The links to "Mobile" and "Desktop" at the bottom are not separated
Closed, ResolvedPublic

Description

The elements with "Mobile" and "Desktop" at the bottom of the page are not separated in any way. They appear one right after another in the HTML code without any space. These two elements are <li>s with display: inline.

If the language of the site is written in Arabic letters, then Firefox thinks that this is a consecutive word and connects the last Arabic letter of the first element to the first letter of the second element. This happens even though CSS inserts space between the elements.

This doesn't happen in WebKit. I am not sure what is the correct standard browser behavior here.

Inserting an nbsp or a zwnj between the two elements would resolve the problem, albeit in a somewhat ugly way.


Version: unspecified
Severity: normal
URL: http://fa.m.wikipedia.org/

Details

Reference
bz60916

Event Timeline

bzimport raised the priority of this task from to Needs Triage.Nov 22 2014, 2:58 AM
bzimport set Reference to bz60916.
bzimport added a subscriber: Unknown Object (MLST).

bingle-admin wrote:

Prioritization and scheduling of this bug is tracked on Mingle card https://wikimedia.mingle.thoughtworks.com/projects/mobile/cards/1670

Could you provide screenshots? Not completely clear what this is referring to...
They are separating using :before and :after on more modern browsers with a | symbol. Not sure what behaviour is on other browsers.

What browser are you seeing this issue in?

(In reply to comment #2)

What browser are you seeing this issue in?

Firefox desktop.

This bug started a very curious discussion among CSS standard makers about what is the Right Standard Behavior for browsers in this case.

Until it's resolved uniformly in all browsers, I guess that there should be an nbsp or a zwnj, as suggested in the opening report.

henry wrote:

Chrome getting it right

Attached:

chrome.png (732×621 px, 92 KB)

henry wrote:

Firefox getting it wrong

Attached:

firefox.png (731×620 px, 107 KB)

henry wrote:

Could I get this assigned? I have a fix ready.

Change 112595 had a related patch set uploaded by Henry:
Add zero-width non-joiner to fix Arabic ligature issue affecting Firefox users

https://gerrit.wikimedia.org/r/112595

henry wrote:

Firefox getting it right with the help of a zero-width non-joiner

Attached:

Screen_Shot_2014-02-10_at_22.09.24.png (628×556 px, 90 KB)

Change 112595 merged by jenkins-bot:
Add zero-width non-joiner to fix Arabic ligature issue affecting Firefox users

https://gerrit.wikimedia.org/r/112595

As a matter of curiosity, this bug started a pretty big discussion in the WWW mailing lists:
http://lists.w3.org/Archives/Public/www-international/2014JanMar/thread.html
(Search for "Arabic letters connecting between elements with display: inline")

Super interesting. I love it when we cause a stir in the W3C :)