Last modified: 2014-02-16 21:14:40 UTC
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.
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.
Created attachment 14547 [details] Chrome getting it right
Created attachment 14548 [details] Firefox getting it wrong
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
Created attachment 14549 [details] Firefox getting it right with the help of a zero-width non-joiner
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
Merged, marking as fixed.
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")
(I meant W3C mailing lists.)
Super interesting. I love it when we cause a stir in the W3C :)
