1471180 - On the Facebook Ads Manager, when an amount is combined with an Arabic Currency, the amount is totally flipped

Status: RESOLVED WORKSFORME

(Web Compatibility :: Site Reports, defect, P3)

Description

[janeshepardandromeda]

Attachment: Screen Shot 2018-06-26 at 3.22.52 PM.png

User Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10.13; rv:60.0) Gecko/20100101 Firefox/60.0
Build ID: 20180605171542

Steps to reproduce:

Have Arabic currency on Facebook Ads Manager (In my case it's AED, United Arab Emirates Dirham)


Actual results:

The numbers next to the currency are flipped:
57.329د.إ.



Expected results:

The numbers should be د.إ.923.75

I have tested this on Google Chrome and it's not an issue. It's only in Firefox

Comment 1

[Jonathan Kew [:jfkthame]]

To investigate this, it would be helpful to have an example page where we can examine the exact content, markup and styling that is involved. I have no idea how to access the page from the screenshot -- I presume it requires some kind of facebook account and login.

Is it possible to save an affected page to a local file and then attach to the bug (if it doesn't include private/confidential details)?

Comment 2

[janeshepardandromeda]

(In reply to Jonathan Kew (:jfkthame) from comment #1)
> To investigate this, it would be helpful to have an example page where we
> can examine the exact content, markup and styling that is involved. I have
> no idea how to access the page from the screenshot -- I presume it requires
> some kind of facebook account and login.
> 
> Is it possible to save an affected page to a local file and then attach to
> the bug (if it doesn't include private/confidential details)?

You have to have a Facebook Account and open Facebook Business Manager. Apart from that, you would have to have AED as the selected currency (or possibly any arabic currency). I've attached a local copy of the page in zip format

Comment 3

[janeshepardandromeda]

Attachment: A local copy of the page

Comment 4

[Jonathan Kew [:jfkthame]]

This appears to be the result of an error on the Facebook page. They have the amount wrapped in a <bdo> tag, as:

    <bdo dir="auto">د.إ.938.75</bdo>

but this is an incorrect usage of the HTML element. The spec (see https://html.spec.whatwg.org/#the-bdo-element) explicitly says:

    "Authors must specify the dir attribute on this element, with the value ltr to specify a left-to-right override and with the value rtl to specify a right-to-left override. The auto value must not be specified."

yet Facebook is using 'auto'.

The point of <bdo> is to *override* the inherent Unicode directionality of the characters, imposing a specific (LTR or RTL) directionality on all the text contained in the element. (As the spec says, "The bdo element represents explicit text directionality formatting control for its children. It allows authors to override the Unicode bidirectional algorithm by explicitly specifying a direction override.")

So it makes no sense to use <bdo> and then expect "normal" Unicode bidi handling based on the directionality of the characters. Yet this seems to be what Chrome does with it. The dir=auto attribute appears to turn *off* the overriding behavior (which is the core function of <bdo>!) and the normal bidi algorithm is then applied.

Firefox, on the other hand, resolves 'auto' based on the content (as it would for other elements), determines that the direction should be RTL (because the first strongly-directional character is the 'د'), and then imposes this on all the text.

Arguably, Firefox's behavior is also incorrect, as the use of 'dir=auto' on <bdo> is prohibited by the spec; but AFAICS the spec doesn't clearly state what a browser *should* do in this case. Probably the most reasonable result would be to treat 'auto' the same as any other unknown value of the dir attribute (or indeed the complete lack of the attribute).

What I think the Facebook page should be using here (the pattern occurs repeatedly in the example page) is not <bdo> but <bdi>. That is the appropriate element to wrap a fragment of content that should be bidi-isolated from the surrounding page, but should still have normal bidi processing applied within its text.

Moving this to Tech Evangelism; the page is misusing HTML and should be fixed.

Reporter, as you presumably have a business relationship with facebook, I'd suggest also reporting the bug to them. (You can refer to this comment for further explanation.)

Comment 5

[Jonathan Kew [:jfkthame]]

Testing with https://jfkthame.github.io/test/bdo.html indicates that Internet Explorer and MS Edge also do NOT implement the webkit/blink behavior -- which I believe violates the spirit of the HTML spec -- for <bdo dir=auto>. So presumably the Facebook page will display the currency amounts "incorrectly" in Microsoft browsers as well.

Comment 6

[Jonathan Kew [:jfkthame]]

I've submitted https://bugs.chromium.org/p/chromium/issues/detail?id=857409 to report this to Chrome.

Comment 7

[Jonathan Kew [:jfkthame]]

Also filed https://github.com/whatwg/html/issues/3782 to seek clarification in the spec.

Comment 8

[Karl Dubost💡 :karlcow]

Attachment: bdo test in firefox chrome and safari

Rendering in firefox, chrome and safari in that order.
All working the same.

Closing as worksforme