Opened 3 years ago

Closed 4 months ago

#2412 closed defect (worksforme)

Download button and browser icons overlap text in Firefox in Arabic

Reported by: Ross Assignee:
Priority: P2 Milestone:
Module: Websites Keywords:
Cc: saroyanm, trev, greiner, ire Blocked By:
Blocking: Platform: Unknown
Ready: yes Confidential: no
Tester: Unknown Verified working: no
Review URL(s):

Description (last modified by saroyanm)

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.

Attachments (1)

HomePage-Overlap-Arabic-Firefox.jpg (55.4 KB) - added by Ross 3 years ago.

Download all attachments as: .zip

Change History (14)

Changed 3 years ago by Ross

comment:1 follow-up: Changed 3 years ago by trev

  • Blocking 2035 removed
  • Cc saroyanm added
  • Priority changed from P3 to Unknown

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. آدبلوك بلس

comment:2 in reply to: ↑ 1 Changed 3 years ago by saroyanm

  • Cc trev added
  • Description modified (diff)
  • Priority changed from Unknown to P4
  • Ready set

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.

comment:3 Changed 3 years ago by saroyanm

  • Cc sven added

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.

comment:4 Changed 2 years ago by greiner

  • Tester set to Unknown

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

comment:5 Changed 2 years ago by greiner

  • Cc greiner added

comment:6 Changed 13 months ago by juliandoucette

  • Priority changed from P4 to P5
  • Ready unset

comment:7 Changed 13 months ago by juliandoucette

  • Priority changed from P5 to Unknown

comment:8 Changed 8 months ago by juliandoucette

  • Cc sven removed
  • Priority changed from Unknown to P3
  • Ready set

comment:9 Changed 6 months ago by 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

comment:10 Changed 6 months ago by 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.

comment:11 Changed 5 months ago by juliandoucette

  • Priority changed from P3 to P2

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.

comment:12 Changed 5 months ago by ire

  • Cc ire added

comment:13 Changed 4 months ago by juliandoucette

  • Resolution set to worksforme
  • Status changed from new to closed

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

Note: See TracTickets for help on using tickets.