Closed Bug 1259978 Opened 8 years ago Closed 8 years ago

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

Categories

(Firefox :: Theme, defect)

x86_64
Windows
defect
Not set
normal

Tracking

()

RESOLVED FIXED
Firefox 48
Tracking Status
firefox47 --- fixed
firefox48 --- fixed

People

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

References

Details

Attachments

(5 files, 1 obsolete file)

Attached image Bug 1.png
Font is unclear. In the menubar the font is broken and looks like cropped.
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.
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".
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
Something like this should avoid the clipping.
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)
(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)
Here's the panel in Gujarati, showing similar clipping to the Marathi screenshot; the issue here is not specific to a single localization.
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.
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?
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.
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)
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+
(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.)
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
https://hg.mozilla.org/mozilla-central/rev/3eca091288e4
Status: ASSIGNED → RESOLVED
Closed: 8 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.