Download button and browser icons overlap text in Firefox in Arabic

[Ross]

Environment

Occurs in:

• Firefox 37.0.1 / Windows 8.1 x64

Does not occur in:

• Chrome 42.0.2311.90 / Windows 8.1 x64
• Opera 28.0.1750.51 / Windows 8.1 x64
• IE 11.0.18 / Windows 8.1 x64

How to reproduce

1. Navigate to ​https://beta.adblockplus.org in Firefox.
2. Observe the text, download button and browser icons do not overlap (as expected).
3. Select the language drop-down in the top right. Select Arabic (first in the list).
4. Observe the text, download button and browser icons now overlap (see attached screenshot).

Observed behaviour

When the language is set to Arabic, the text, download button and browser icons overlap in Firefox. This does not occur in any other browser and does not occur when another right to left language is selected like Hebrew.

Expected behaviour

The text, download button and browser icons should not overlap whatever language is currently set.

Additional notes

We don't translate product name in all other languages, so doesn't make sense to translate Adblock Plus header.

[trev]

Not blocking #2035 - this issue exists on ​https://adblockplus.org/ as well, not related to the migration.

Also resetting priority, up to Manvel to determine. That appears to be a layout issue, triggered by the page heading being too long. Note that this heading doesn't match the Arabic name of Adblock Plus: it's مانع الإعلانات المطور vs. آدبلوك بلس

[saroyanm]

Replying to trev:

Not blocking #2035 - this issue exists on ​https://adblockplus.org/ as well, not related to the migration. Also resetting priority, up to Manvel to determine.

Thanks for notes.

That appears to be a layout issue, triggered by the page heading being too long. Note that this heading doesn't match the Arabic name of Adblock Plus: it's مانع الإعلانات المطور vs. آدبلوك بلس

Well I wouldn't say that it make sense to translate name of the product Adblock Plus to Arabic, we haven't translated product name to other languages as well, I would say this string had to be fixed (not translatable).
The difference between browser are because different pixel size calculation in different browsers:
​https://developer.mozilla.org/en-US/docs/Web/CSS/font-size#Pixels

Also please note we have similar issue in Brazilian version. Well in Brazilian version I think make sense to translate the first bullet point, that should fix the problem, I don't see any quick solution for Brazilian version.

[saroyanm]

Bulgarian, Spanish, Dutch, Russian version have similar problem, It's free! (GPLv3) bullet point appears under the installation button, I think this is something we should consider during website redesign.

[greiner]

We don't translate product name in all other languages, so doesn't make sense to translate Adblock Plus header.

Currently, the extension name was translated for the following languages:

• ar
• bn-BD
• hi-IN
• mr
• si-LK

Therefore I wouldn't consider this to be a valid argument.

Furthermore there are even more problems with the arabic page:

• Adblock Plus logo is overlaying "Installation" link
• Platform icons are on the wrong side of the download button
• "Learn more" link is on the wrong side of the page

[ire]

Is this still an issue?

1. ​https://beta.adblockplus.org doesn't lead anywhere
2. The icons on ​https://adblockplus.org are below, not beside the Install button

[trev]

The icons moved below the download button, so there is no overlap there any more. The text still overlaps however. On Firefox 53 it is clearly visible that the distance between text and download button is much smaller than for other languages, in Chrome 58 I can see an actual overlap there.

[juliandoucette]

Is this still an issue?

Not as described. But I think the issue of browser icons appearing underneath the download button is related enough. That is why I am bumping this issues priority. I will update the description later.

[juliandoucette]

This specific issue seems to be resolved. And the general issue in the comments will be addressed in #5522.