Open
Bug 1233572
Opened 10 years ago
Updated 3 years ago
Icon fonts using hinting are blurry when text box offset is fractional (eg. odd browser window width)
Categories
(Core :: Graphics: Text, defect, P3)
Core
Graphics: Text
Tracking
()
UNCONFIRMED
People
(Reporter: ono, Unassigned)
Details
(Whiteboard: [gfx-noted])
Attachments
(3 files, 1 obsolete file)
GitHubFractionalMargin.png
User Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_11_2) AppleWebKit/601.3.9 (KHTML, like Gecko) Version/9.0.2 Safari/601.3.9
Steps to reproduce:
While icon fonts rendering was somehow working fine in Safari and Chrome (not anymore due regressions), in Firefox it was never working fine.
Before version 25 Firefox was not obeying font hinting, version 25 introduced font hinting support, but when text box starts at fractional offset, when font hinting gives wrong results including most recent releases.
Many modern sites use icon fonts, such as Font Awesome, Octicons, etc. This is more optimal for bandwidth conservation and HiDPI displays support than using separate images. These fonts come usually optimized for certain sizes, eg. Octicons for multiple of 16px font height. This optimization relies on font hinting that makes glyph elements to be aligned to pixel boundaries, this guarantees visual sharpness and clearness of the icons.
Please test the following page with even pixel browser window width and odd width to see the difference (LeftIntegerPositionRightFractionalPosition.png).
The fixed 800px width #container has automatic margin. So if browser window width is 1000px, then the left-margin is 1000px-800px/2 -> 100px, but when browser windows width is 1001px then left-margin is non-integer 100.5px causing blur.
--- octicons.html
<!DOCTYPE html>
<html>
<head>
<link crossorigin="anonymous" href="https://cdnjs.cloudflare.com/ajax/libs/octicons/3.3.0/octicons.css" media="all" rel="stylesheet">
<head>
<style>
#container {
border: 1px solid silver;
padding: 10px;
width: 800px;
margin: auto;
height: 100%;
}
</style>
</head>
</head>
<body>
<div id="container">
<span class="octicon octicon-repo"></span>
<span class="octicon octicon-plus"></span>
</div>
</body>
</html>
--- /octicons.html
Actual results:
When browser window width is even everything looks good, crisp & sharp. When browser window is odd, then icons are blurred.
Expected results:
Hinted text should look crisp & clear regardless of text box fractional offsets.
IMHO this bug has major severity, as causing blurry rendering on many well known sites such as GitHub (see attached screenshots). This cannot be worked around using some CSS tricks. It reduces experience and causes eye strain.
|
Reporter | |
Comment 1•10 years ago
|
||
|
|
Reporter | |
Comment 2•10 years ago
|
||
|
|
Reporter | |
Comment 3•10 years ago
|
||
This rendering was done on Firefox 43, previous image was taken from buggy WebKit version - sorry.
But the results is just the same.
Attachment #8699654 -
Attachment is obsolete: true
|
||
Updated•10 years ago
|
Component: Untriaged → Graphics: Text
Product: Firefox → Core
|
||
Updated•10 years ago
|
Whiteboard: [gfx-noted]
|
|
||
Updated•8 years ago
|
Priority: -- → P3
|
||
Updated•3 years ago
|
Severity: normal → S3
You need to log in
before you can comment on or make changes to this bug.
Description
•