1337114 - Diacritics rendered incorrectly with decomposed unicode and Proxima Nova

Status: NEW

(Core :: Graphics: Text, defect, P3)

Description

[vojtech]

Attachment: Screen Shot 2017-02-06 at 21.22.56.png

User Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_10_5) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/55.0.2883.95 Safari/537.36

Steps to reproduce:

Everything is described precisely in Stackoverflow post:

http://stackoverflow.com/questions/42076418/strange-font-encoding-in-all-browsers

In general this website does not render correctly in Firefox whereas in Chrome it is okay:

https://goout.net/cs/muzea/apple-museum/wucb/


Actual results:

The font is rendered incorrectly.


Expected results:

The font should be rendered correctly.

Comment 1

[Jonathan Kew [:jfkthame]]

The site is using decomposed Unicode (encoding form NFD), where diacritics are encoded separately following the base letters; but the font being used (an embedded version of Proxima Nova, possibly subsetted?) does not actually support this, and so font fallback comes into play for some of the characters, and results in the stylistic mixtures and poor rendering.

Make sure the font being used supports all the characters that are present in the text. (Modifying the CSS to use, for example, Times New Roman instead makes things look much better.) It will also help to use encoding form NFC (precomposed) rather than NFD, as that is much better supported by many fonts.

Similarly, in the "source" view on jsfiddle (referenced from the stackoverflow post), the Inconsolata font being used lacks support for the decomposed accents; modifying the CSS to use (for example) Courier New instead makes things look better.

So this is not really a Firefox bug, I think; it's an authoring problem. The font provided by the site is being rendered correctly for the subset of characters that it supports, but it lacks support for the diacritics and so they end up being drawn from a different font.

Comment 2

[vojtech]

Thanks for your detailed response. This is just a text which was copy-pasted from another site – this is not the way it is provided by the website/server and other pages are displayed correctly. 

I am happy to implement some kind of preprocessing/text-repairing on the server side, but I actually don't know how, as this seems to be a very specific issue. 

The reason I am reporting it is that Proxima Nova on Chrome is displayed correctly whereas on Firefox it is not.

Comment 3

[Andrew Osmond [:aosmond] (he/him)]

In case it is relevant, I note that this renders correctly for me on Linux nightly (probably due to different fonts and/or fallback behaviour?).

Comment 4

[vojtech]

I fixed it on our server, so these kind of characters are preprocessed with Normalizer tool. What matters is the jsfiddle, where it is unmodified.

Comment 5

[Jonathan Kew [:jfkthame]]

As noted in comment 1, the jsfiddle source view is using a font that does not have support for the decomposed accents, so results will be system- and browser-dependent (as available fonts and fallback rendering behavior may well differ).

One thing to note is that I believe Blink applies NFC normalization by default in its rendering code, which means that in some cases (quite likely including this one) it will successfully render "decomposed" text even though the font doesn't directly support it. Currently, Gecko doesn't do that; it presents the text as authored to the font for rendering, so if the text is encoded in a way that the font doesn't support, you lose.

Comment 6

[Thomas Wisniewski [:twisniewski]]

As a user on Reddit just indirectly pointed out, Webkit/Blink's normalizing behavior ultimately makes Firefox appear to be the problem (though to be fair Edge also does not normalize): https://www.reddit.com/r/firefox/comments/8zdbsv/what_the_hell_firefox_incorrect_diacritics/

Perhaps we should revisit this as a full-blown interop issue?

Comment 7

[Sylvestre Ledru [:Sylvestre]]

Even if this isn't our fault, maybe we should workaround the issue to provide the same feature as chrome/safari

Comment 8

[Firefox Bug Husbandry Bot]

Migrating Webcompat whiteboard priorities to project flags. See bug 1547409.

Comment 9

[Firefox Bug Husbandry Bot]

See bug 1547409. Migrating whiteboard priority tags to program flags.

Comment 10

[Jonathan Kew [:jfkthame]]

The examples here and in the linked bug 1588206 no longer seem to reproduce, but I believe that's because sites and fonts have been updated; in principle this is an issue that could still occur. In practice, though, it's rare, being dependent on uncommon text encoding (using decomposed sequences, where precomposed Unicode characters exist) combined with a font that lacks adequate support for the diacritics used.

Bug 543200 would be a way forward to improve this, but will need careful handling to ensure we don't regress performance for "normal" content that doesn't run into this kind of issue.

Comment 11

[Michal Čaplygin [:myf]]

Attachment: Composed_Decomposed subsetted DM Sans webfont Latin diacritics test.htm

I have stumbled upon page with diacritics disfigured horribly in a similar fashion in the wild (archived version). That page used "DM Sans" font loaded from Google Fonts and decomposed forms in the text contents. The font was subsetted to "Latin" and "Latin-ext", and the issue is also reproducible on https://fonts.google.com/?query=dm+sans when manually entered decomposed text into "preview" textbox. (*) These are all characters the "latin-ext" part of that font claims to support, in the decomposed form:

data:text/plain;charset=utf-8,A%CC%84 a%CC%84 A%CC%86 a%CC%86 A%CC%A8 a%CC%A8 C%CC%81 c%CC%81 C%CC%87 c%CC%87 C%CC%8C c%CC%8C D%CC%8C d%CC%8C %C4%90 %C4%91 E%CC%84 e%CC%84 E%CC%86 e%CC%86 E%CC%87 e%CC%87 E%CC%A8 e%CC%A8 E%CC%8C e%CC%8C G%CC%86 g%CC%86 G%CC%87 g%CC%87 G%CC%A7 g%CC%A7 %C4%A6 %C4%A7 I%CC%83 i%CC%83 I%CC%84 i%CC%84 I%CC%86 i%CC%86 I%CC%A8 i%CC%A8 I%CC%87 %C4%B2 %C4%B3 K%CC%A7 k%CC%A7 L%CC%81 l%CC%81 L%CC%A7 l%CC%A7 L%CC%8C l%CC%8C %C4%BF %C5%80 %C5%81 %C5%82 N%CC%81 n%CC%81 N%CC%A7 n%CC%A7 N%CC%8C n%CC%8C %C5%8A %C5%8B O%CC%84 o%CC%84 O%CC%86 o%CC%86 O%CC%8B o%CC%8B R%CC%81 r%CC%81 R%CC%A7 r%CC%A7 R%CC%8C r%CC%8C S%CC%81 s%CC%81 S%CC%A7 s%CC%A7 S%CC%8C s%CC%8C T%CC%A7 t%CC%A7 T%CC%8C t%CC%8C U%CC%83 u%CC%83 U%CC%84 u%CC%84 U%CC%86 u%CC%86 U%CC%8A u%CC%8A U%CC%8B u%CC%8B U%CC%A8 u%CC%A8 W%CC%82 w%CC%82 Y%CC%82 y%CC%82 Y%CC%88 Z%CC%81 z%CC%81 Z%CC%87 z%CC%87 Z%CC%8C z%CC%8C %C6%8F %C6%92 %C3%86%CC%81 %C3%A6%CC%81 S%CC%A6 s%CC%A6 T%CC%A6 t%CC%A6 %C8%B7 %C9%99 %CC%80 %CC%81 %CC%83 %CC%84 %CC%88 W%CC%80 w%CC%80 W%CC%81 w%CC%81 W%CC%88 w%CC%88 %E1%BA%9E Y%CC%80 y%CC%80 Y%CC%83 y%CC%83 %E2%80%A0 %E2%82%A8 %E2%82%B9 %E2%82%BA %E2%82%BD %E2%84%93

Attaching self-contained interactive testcase with embedded font files for reliable repro. Sadly, I was unable to identify what does Firefox actually use for the diacritics, since the devtools "Fonts used" apparently reports and highlights things in a weird way when it comes to grapheme clusters.

(*) Sadly, passing it through URL parameter makes it composed or something, so the manual copypasta is necessary.

Comment 12

[Michal Čaplygin [:myf]]

Attachment: google fonts screenshot DM Sans decomposed 2025-05-11.png

Comment 13

[Michal Čaplygin [:myf]]

Attachment: Composed_Decomposed subsetted DM Sans webfont Latin diacritics test - screenshot Firefox 139.png

Comment 14

[Michal Čaplygin [:myf]]

Attachment: Composed_Decomposed subsetted DM Sans webfont Latin diacritics test - screenshot Edge 136.png