Devanagari script menu-item labels in the PanelUI menu are clipped (was: Localization font is unclear.)

RESOLVED FIXED in Firefox 47

Status

()

defect
RESOLVED FIXED
3 years ago
3 years ago

People

(Reporter: rohit.8859, Assigned: jfkthame, Mentored, NeedInfo)

Tracking

unspecified
Firefox 48
x86_64
Windows
Points:
---

Firefox Tracking Flags

(firefox47 fixed, firefox48 fixed)

Details

Attachments

(5 attachments, 1 obsolete attachment)

Reporter

Description

3 years ago
Posted image Bug 1.png
Font is unclear. In the menubar the font is broken and looks like cropped.

Comment 1

3 years ago
Another Bug has been created. Bug 1259981
Status: UNCONFIRMED → NEW
Component: Menus → Graphics: Text
Ever confirmed: true
Product: Firefox → Core
Summary: localization → Localization font is unclear.
Assignee

Comment 3

3 years ago
This refers specifically to the labels under the menu-item icons in the "hamburger" menu; the text is clipped at the top by at least one pixel (perhaps two?), making many of the vowel marks incomplete and difficult to read. It's also clipped at the bottom, though there are fewer places where this actually shows up -- one example is at the end of the "Add-ons" label (ॲड-ऑन्स्), where the final halant is barely visible because it is partially clipped.

This clipping -- presumably due to a too-small line height being specified in the relevant CSS -- does not appear to affect other text, such as the labels of the Cut/Copy/Paste items across the top of the menu: the translation of "Paste" includes an unclipped short-i vowel ( ि ), although the same character is clipped where it occurs in "Save Page" and "History".
Assignee

Comment 4

3 years ago
This is caused by the combination of CSS line-height and clip specified in panelUIOverlay.inc.css, which is too tight for scripts such as Devanagari. (Note that the same issue will almost certainly affect a number of other Asian scripts; it's not unique to this localization.)

So we need slightly more generous line height in the styling there; in general, a line-height value of at least 1.2 (it's currently set to 1.1) is much safer.
Component: Graphics: Text → Theme
OS: Windows 7 → Windows
Product: Core → Firefox
Summary: Localization font is unclear. → Devanagari script menu-item labels in the PanelUI menu are clipped (was: Localization font is unclear.)
Version: 45 Branch → unspecified
Assignee

Comment 5

3 years ago
Something like this should avoid the clipping.
Assignee

Updated

3 years ago
Assignee: nobody → jfkthame
Status: NEW → ASSIGNED
We played with a few of these values when creating the menu panel, and the line height of 1.1 looked the best for English. Do you think this is something that we could let localizers adjust in their DTD/properties file?

We could give them some tips and sample values alongside the entities to help them make a decision as to what looks best for their locale.
Flags: needinfo?(jfkthame)
Assignee

Comment 7

3 years ago
(In reply to Jared Wein [:jaws] (please needinfo? me) from comment #6)
> We played with a few of these values when creating the menu panel, and the
> line height of 1.1 looked the best for English. Do you think this is
> something that we could let localizers adjust in their DTD/properties file?

In principle, I expect that would be an option. I don't know how much is involved in making a collection of (inter-related) CSS values localizable, and whether the added work is justified here.

ISTM that the visual difference for English is extremely slight (note that only one of the labels in the default panel actually wraps, so that's the only one affected), and having an extra pixel of line-height there is pretty insignificant -- whereas clipping of the glyphs in South Asian languages is a serious flaw.

So my suggestion would be to adjust the default setting, along the lines of the patch here, so as to address the international readability issues; and then IF the fractionally wider spacing in the English "New Private Window" is really disliked, consider a followup to make the spacing localizable, and let the English localization tighten it -- but let the default remain something that works for everyone.

Note that the 1.1 spacing would look a bit tight even for Latin-script languages, I think, if it were applying to more text; but as "New Private" does not include letters with descenders, and English doesn't stack lots of diacritics above and below the letters, the issue doesn't show up in the specific case of the English Firefox UI. It may be different for a language like Vietnamese, where diacritics are extensively used.
Flags: needinfo?(jfkthame)
Assignee

Comment 8

3 years ago
Here's the panel in Gujarati, showing similar clipping to the Marathi screenshot; the issue here is not specific to a single localization.
Assignee

Comment 9

3 years ago
And here's the Vietnamese version. Although there's no clipping here, note how crowded the two lines look in the label for the Developer Tools item. This would be much improved by a slight increase in line-height.
Assignee

Comment 10

3 years ago
Side-by-side screenshots comparing the current Firefox 45 rendering (line-height:1.1) with a patched version using line-height:1.25, in both Marathi and English.

Note how the patched Marathi version resolves the problem of clipping many of the vowel marks.

IMO, the increased spacing in the English version is not a problem -- but I guess that's ultimately a question for the Firefox design folk: is the desire for tighter line spacing in "New Private Window" strong enough to justify the added effort and maintenance burden of making it localizable?
Assignee

Comment 11

3 years ago
BTW, note that the screenshots above are from Windows 8.1 running on a hi-dpi (200% scaling) screen. The clipping effects tend to be worse, on the whole, for users with lower-dpi screens, where even a single row of pixels clipped from a glyph may seriously affect legibility.
Assignee

Comment 12

3 years ago
OK, after a bit more experimentation locally, here's what I propose as an initial fix that doesn't require the added effort of localizability. That could then be considered in a followup if people aren't happy with the result this gives across all locales.
Attachment #8735436 - Flags: review?(jaws)
Assignee

Updated

3 years ago
Attachment #8735306 - Attachment is obsolete: true
Comment on attachment 8735436 [details] [diff] [review]
Allow slightly more line height for menu-item labels in the panel

Review of attachment 8735436 [details] [diff] [review]:
-----------------------------------------------------------------

Thanks for the screenshots and further explanation. Let's go with your patch for the time being. It stinks that we didn't know about this sooner, as we've had this menu panel in Firefox now since v29.
Attachment #8735436 - Flags: review?(jaws) → review+
Assignee

Comment 14

3 years ago
(In reply to Jared Wein [:jaws] (please needinfo? me) from comment #13)
> Comment on attachment 8735436 [details] [diff] [review]
> Allow slightly more line height for menu-item labels in the panel
> 
> Review of attachment 8735436 [details] [diff] [review]:
> -----------------------------------------------------------------
> 
> Thanks for the screenshots and further explanation. Let's go with your patch
> for the time being. It stinks that we didn't know about this sooner, as
> we've had this menu panel in Firefox now since v29.

Yeah, it's obviously not a new thing. I wonder if maybe some of the relevant localizers are working on systems that don't happen to suffer from the issue -- e.g. on Linux with different fonts, it might not happen.

(Maybe WinXP didn't show it, either? Win7 introduced a new Indic system font, so that may be where the problem began, or became more serious. I see very slight clipping on OS X, too, but hardly noticeable unless you're specifically looking for it.)
Assignee

Comment 15

3 years ago
https://hg.mozilla.org/integration/mozilla-inbound/rev/3eca091288e47d48edf843f9e73799d77e60362e
Bug 1259978 - Allow slightly more line height for menu-item labels in the panel. r=jaws

Comment 16

3 years ago
bugherder
https://hg.mozilla.org/mozilla-central/rev/3eca091288e4
Status: ASSIGNED → RESOLVED
Closed: 3 years ago
Resolution: --- → FIXED
Target Milestone: --- → Firefox 48
Comment on attachment 8735436 [details] [diff] [review]
Allow slightly more line height for menu-item labels in the panel

We should uplift this to at least Aurora, as it affects how people in some locales use Firefox. However, we may not get good beta or aurora feedback as to if any regression occurs for non-Latin based languages as this problem has persisted for many releases before this bug was filed.

Approval Request Comment
[Feature/regressing bug #]: regression since Firefox29 (Australis)
[User impact if declined]: users in some locales cannot read the Firefox menu properly, text is displayed missing parts of the characters
[Describe test coverage new/current, TreeHerder]: manual verification
[Risks and why]: low-risk, css only change
[String/UUID change made/needed]: none
Attachment #8735436 - Flags: approval-mozilla-beta?
Attachment #8735436 - Flags: approval-mozilla-aurora?
Comment on attachment 8735436 [details] [diff] [review]
Allow slightly more line height for menu-item labels in the panel

Old regression but critical enough. Aurora47+
Attachment #8735436 - Flags: approval-mozilla-aurora? → approval-mozilla-aurora+
Rohit, could you please verify this issue is fixed as expected on a latest Nightly build? Thanks!
Flags: needinfo?(rohit.8859)
Comment on attachment 8735436 [details] [diff] [review]
Allow slightly more line height for menu-item labels in the panel

Too late for beta, not a new regression, but this will be fixed in 47 release.
Attachment #8735436 - Flags: approval-mozilla-beta? → approval-mozilla-beta-
You need to log in before you can comment on or make changes to this bug.