Unicode combined characters displayed incorrectly
Categories
(Core :: Layout: Text and Fonts, defect, P3)
Tracking
()
People
(Reporter: dg, Unassigned)
References
(Depends on 1 open bug)
Details
Attachments
(1 file)
|
(deleted),
image/png
|
Details |
Screenshot 2021-08-21 at 12.53.50.png
User Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/14.1.2 Safari/605.1.15
Steps to reproduce:
I created a simple page containing a unicode combined character:
<!DOCTYPE html>
<html>
<head>
<title>Test</title>
</head>
<body>
This is a ?⃝ test
</body>
</html>
Actual results:
The question mark is displayed inside the circle, but it is not centered but shifted to the right. In addition, the circle overlaps the text adjacent to the right and left, in this case the space character.
The attached screenshot shows the incorrect display in the window on the left (Firefox under Mac OS 11.5.2). On the right the correct display in Safari (14.1.2).
Expected results:
The question mark should be centered inside the circle. The combined character should keep the distances to the right and left correctly.
|
||
Updated•3 years ago
|
|
||
Comment 1•3 years ago
|
||
This is dependent on the font being used. The combining circle is not supported by very many fonts, and in particular the default content font used by the browser doesn't include it. So font fallback comes into effect, and finds some font that can render it -- but it won't combine well with the question-mark (or anything else) from the default font that was being used for the rest of the text.
If a font that does support the character is used for the element, it'll render fine. E.g. try applying font-family: lucida grande to the content, or font-family: system-ui, -apple-system.
It seems that Safari applies font fallback to the complete sequence of <question mark, combining circle> and then renders the combination from Lucida Grande. Firefox currently does fallback on a per-character basis, so the question mark gets rendered from the main font, and then the circle from the fallback. (FWIW, Chrome also fails to do a nice job here.)
The solution that would give us a better result in Firefox would be to implement something like bug 543200. However, the exact results would still depend on what font fallback happens to pick, which may be difficult to predict; for more consistent results, authors should choose fonts that actually support the content on the page.
Description
•