1194105 - Telugu Language not rendered properly

Status: RESOLVED WORKSFORME

(Core :: Layout: Text and Fonts, defect)

Description

[Yuva]

Attachment: Preview.PNG

User Agent: Mozilla/5.0 (Windows NT 10.0; WOW64; rv:40.0) Gecko/20100101 Firefox/40.0
Build ID: 20150807085045

Steps to reproduce:

Open http://lekhini.org/
Check how it is rendering


Actual results:

Check attached screenshot which actually shows difference


Expected results:

Check attached screenshot which actually shows difference

Comment 1

[Axel Hecht [:Pike]]

Attachment: Rendering on a OSX, Nightly

This is how it looks for me on Nightly, on OSX.

Yuva, can you test on Nightly again?

Also, which platform are you on?

And it'd help if you could use the inspector in the devtools, select a node with badly laid text, and see which Fonts are used in the Fonts tab next to the inspector panel.

Comment 2

[Vamshi]

https://www.facebook.com/ourcultureandtredations/photos/a.136320949879069.1073741828.136281899882974/535551516622675/?type=3&permPage=1

Comment 3

[Vamshi]

Same issue in the above page. I am on firefox 42. 


Fonts that got used are :  helvetica,​arial,​sans-serif

Comment 4

[Jonathan Kew [:jfkthame]]

(In reply to Axel Hecht [:Pike] from comment #1)
> Created attachment 8688422 [details]
> Rendering on a OSX, Nightly
> 
> This is how it looks for me on Nightly, on OSX.

This also shows some broken rendering, actually. Look at the text in the first line, immediately above the second yellow-highlighted area, and you'll see a number of cases where a combining mark is displayed on a dotted circle, separately from the base character where it should have applied.

The same problem shows up slightly left-of-center in the next line of text (not the heading), too.

This happens if we're using the Telugu MN font on OS X; it doesn't happen if you tweak your font preferences, or the page styles, so as to use the Telugu Sangam MN font instead.

And the reason seems to be that Telugu MN does not include the zero-width joiner and zero-width non-joiner characters in its 'cmap', and I suspect this is causing a break in the font run for shaping purposes when these codes occur in the text. For Indic scripts (among others), we need to ensure these control characters are included in the same shaped text run as the surrounding letters; harfbuzz will process them appropriately, even if the font does not directly support them as (invisible) glyphs.

It's not clear to me exactly what platform/fonts are involved in the original reporter's example, so this may or may not be what's happening in that case.

Comment 5

[Jonathan Kew [:jfkthame]]

(In reply to Jonathan Kew (:jfkthame) from comment #4)
> And the reason seems to be that Telugu MN does not include the zero-width
> joiner and zero-width non-joiner characters in its 'cmap', and I suspect
> this is causing a break in the font run for shaping purposes when these
> codes occur in the text. For Indic scripts (among others), we need to ensure
> these control characters are included in the same shaped text run as the
> surrounding letters; harfbuzz will process them appropriately, even if the
> font does not directly support them as (invisible) glyphs.

FWIW, we have code in gfxFontGroup::FindFontForChar that's supposed to handle this situation, by continuing to use the same font across zwj/zwnj codepoints regardless of whether the font "supports" them. But perhaps that's not working as intended.

Comment 6

[Jonathan Kew [:jfkthame]]

Ah, the OS X / Telugu MN case is not caused by FindFontForChar; we're OK there. It's falling foul of the code in gfxCoreTextShaper that checks for "unexpected" font fallback during Core Text shaping.

I'll file a separate bug on this, as I don't believe this is Yuva's issue; the original screenshot from comment 0 shows a more complete shaping failure throughout the Telugu text. It's probably related to the particular font that's being used (note that the screenshot shows Chrome using a different Telugu font from Firefox).


(In reply to Vamshi from comment #3)
> Fonts that got used are :  helvetica,​arial,​sans-serif

That looks like the fonts listed in the CSS font-family property, but it doesn't tell us what font is actually being used for the Telugu text. For that, you need to look in the Fonts tab of the devtools element inspector (rather than the Rules or Computed tabs that show the CSS properties).

Comment 7

[Vamshi]

I have added the screenshot of what exactly I see on both chrome and Firefox. 

I have checked the font-family using firebug and seeing font-family as "helvetica,arial,sans-serif"


I used the below plugin and found the same :
https://addons.mozilla.org/en-us/firefox/addon/font-finder/

Comment 8

[Vamshi]

Attachment: Firefox VS Chrome

Comment 9

[Jonathan Kew [:jfkthame]]

(In reply to Vamshi from comment #7)
> I have added the screenshot of what exactly I see on both chrome and
> Firefox. 
> 
> I have checked the font-family using firebug and seeing font-family as
> "helvetica,arial,sans-serif"
> 
> 
> I used the below plugin and found the same :
> https://addons.mozilla.org/en-us/firefox/addon/font-finder/

That's still only telling us what the font-family property is set to. Please try the following steps:

* Right-click on an element with the badly-displayed Telugu text, to show the context menu.

* Choose "Inspect Element" from the menu. This will open the Firefox developer tools (in a panel at the bottom of the window).

* On the right-hand side of the dev tools, it will probably open showing the Rules panel (all the CSS properties that have been set on the element, etc).

* The third panel in that right-hand area of the dev tools is the Fonts panel. Click that, and let us know what font(s) it lists.

(I think you can use the mouse to drag-select and then copy all the text from the Fonts panel, and paste it here.)  Thanks.

Comment 10

[Vamshi]

Got it :)


Here is what I see ..



Abc

Arial system

Used as: "Arial"

Abc

Arial Unicode MS system

Used as: "Arial Unicode MS"

Comment 11

[Jonathan Kew [:jfkthame]]

Aha! OK, I think I understand what's going on.

Try going to the Firefox Option dialog. Choose the Content section, and then under Fonts & Colors, click the Advanced... button to bring up the detailed Fonts dialog.

From the "Fonts for:" popup at the top, choose Telugu.

What does it show as the options for Serif, Sans-serif, and Monospace on your system? My guess is that they're blank.

If so, try changing them all to Nirmala UI, and see if that helps.

Comment 12

[Vamshi]

I didnot change anything for Telugu as the options for Serif, Sans-serif, and Monospace on my system are not blank  . I have attached screenshot of what I see.

Comment 13

[Vamshi]

Attachment: Telugu Font

Comment 14

[Vamshi]

Default fonts for Telugu has been set to "Arial Unicode MS" for all Serif, Sans-serif, and Monospace .



After changing all of them to "Nirmala UI" , telugu font is loading fine.

Comment 15

[Jonathan Kew [:jfkthame]]

The other thing that may help is to go to the "Manage Optional Features" dialog (in Windows Settings; you can get there from Control Panel > Fonts > Manage optional features link), find the package "Telugu Supplemental Fonts", and install it. Or if it's already installed, try uninstalling and then reinstalling it.

Then run Firefox again, and it might (I think) correctly find the Gautami font for Telugu.

Comment 16

[Jonathan Kew [:jfkthame]]

(In reply to Vamshi from comment #14)
> Default fonts for Telugu has been set to "Arial Unicode MS" for all Serif,
> Sans-serif, and Monospace .

That's odd; I would have expected them to be either "Gautami" or blank. But having them set to Arial Unicode MS would certainly cause this problem, because although Arial Unicode MS has the Telugu letters, it does not have the proper OpenType tables for shaping.

> After changing all of them to "Nirmala UI" , telugu font is loading fine.

OK, good.

Comment 17

[Vamshi]

After changing all of the fonts to  "Nirmala UI" , telugu font is loading fine for me  :) 

So I think it is fine :)

Just want to know how come it works in other browsers but not in Firefox. I remembered I used to read telugu news on facebook without issues earlier.

Comment 18

[Yuva]

This seems issue is fixed. Thank you for your support.

Comment 19

[Shahul World]

Watch this video for the solution   https://www.youtube.com/watch?v=wJCM2A4FPiY