Page MenuHomePhabricator

Content Translation UI masks selected Text when using Firefox/Ubuntu making editing problematic
Open, Needs TriagePublicBUG REPORT

Assigned To
None
Authored By
Arjunaraoc
Sep 4 2020, 10:45 PM
Referenced Files
F34908891: Telugu-with-notosans-12.png
Jan 6 2022, 1:43 AM
F34908887: Telugu-Lohit 12.png
Jan 6 2022, 1:43 AM
F34906636: image.png
Jan 4 2022, 5:09 AM
F34906638: image.png
Jan 4 2022, 5:09 AM
F34906634: image.png
Jan 4 2022, 5:09 AM
F32245844: Content translation UI problem on Firefox.png
Sep 4 2020, 10:45 PM

Description

Steps to Reproduce:
Configuation: Ubuntu 18.04, Firefox 68.12.0esr(64bit) snap
Login to https://te.wikipedia.org and goto translation dashboard by typing Special:CX in searchbar
Select a draft translation or create a new translation and translate few paras using Google Translate

Click on sentence of translated text or try to edit Translated text in the sentence.

Actual Results:
Only the last line of the sentence is displayed properly, while other lines are displayed parts with each succeeding line hiding the previous line.

Content translation UI problem on Firefox.png (931×1 px, 222 KB)

Expected Results:
Proper display of translated text.

Event Timeline

No problem was observed when using Chromium Version 85.0.4183.83 (Official Build) snap (64-bit)

Reedy renamed this task from Content Translation UI masks selected Text when using Firefox/Ubuntu making editing problematic to Content Translation UI masks selected Text when using Firefox/Ubuntu making editing problematic.Sep 4 2020, 10:52 PM
Reedy added a project: Browser-Support-Firefox.
Reedy updated the task description. (Show Details)

I can still reproduce this.

Perhaps setting a custom line-height for Telugu can resolve this.

Telugu, like other dravidian scripts require relatively higher lineheight and our styles provide it. But Lohit Telugu font is very problematic with its metrics.
It has an Ascender 1617 units which exceed the total 1024 em units defined. And the x-height where the most of glyph strokes are supposed to occupy is just 500 units, leaving too much empty space above and below the em square.

image.png (684×596 px, 42 KB)

The effect can be seen by comparing same text rendering by Noto and Lohit.

Noto Sans TeluguLohit Telugu
image.png (386×596 px, 126 KB)
image.png (493×594 px, 109 KB)

The height taken by the highligher span is overlapping each other hiding the parts of text as shown in the bug report. Adjustments specific to Lohit Telugu will cause issues with other fonts. Ideally Lohit Telugu need to fix its typography metrics, but as far as I know that font is unmaintained these days.

@santhosh , Thanks for investigating. I enclose sample text snapshots of text in text editor with font as Lohit Telugu and Noto sans at 12 pt and did not find a diff. Could there be some other reason for the difference in behavior in content translation context

Lohit Telugu 12ptNoto sans Telugu 12 pt
Telugu-Lohit 12.png (465×932 px, 211 KB)
Telugu-with-notosans-12.png (465×932 px, 215 KB)

On google chrome(Version 92.0.4515.131 (Official Build) (64-bit)), I observed the problem with Noto sans Telugu also, but the overlap with adjacent lines is far less making it usable.