-
Notifications
You must be signed in to change notification settings - Fork 29
Inform browsers on how to optimize text rendering #6
Conversation
The `text-rendering` svg property provides a hint to the user agent about how to optimize its text rendering. In this particular case, the value specified for the `text-rendering` property is `geometricPrecision`, indicating that the user agent should emphasize geometric precision over legibility and rendering speed. This is done because certain aspects of fonts — such as kerning — don't scale linearly: In SVG, when text is scaled up or down, browsers calculate the final size of the text (which is the specified font size and the applied scale) and request a font of that computed size from the platform's font system. However, if a user requests a font size of, say, 9 with a scale of 140%, the resulting font size of 12.6 doesn't explicitly exist in the font system, so the browser rounds the font size to 12 instead. This results in stair-step scaling of text. If `geometricPrecision` is fully supported by the rendering engine, it will allow users to scale text fluidly, making the text look good. References: * http://www.w3.org/TR/SVG/painting.html#TextRenderingProperty * https://developer.mozilla.org/en-US/docs/Web/CSS/text-rendering See also: * #5
Does it give less blurry results for you? Can you provide a comparison snapshot? In my case, the result is just as sharp, but the letters are "rearranged" (as a result, I presume, of a suspended kerning) in an improbable way: Note the weird space between "w" and "hiz" in "whiz", and in other places. I'd love to have more comparisons before we settle on this choice. |
There are some browsers where it does, but in most cases, there isn't any difference:
Can you specify the browser / OS / device where that happened ? I didn't see this exact behavior in any of the browsers I've tested in.
Of course, that is why I've open this pull request, so we can discuss this potential addition. |
Thanks a lot for all this work! It's surprising but very welcome to see that IE10 doesn't have the blur bug. It usually doesn't make a difference, but if it makes it that much better in Firefox, it's worth it. However, it seems like it changes the width of the text significantly. On HEAD, we are computing that dynamically (using canvas). Is there a way to ensure that what is computed matches? |
Firefox + Linux KDE + Thinkpad (desktop) |
Maybe I'm missing something (and I apologize for that), but isn't the Theoretically, From MDN:
Ok, thanks. Updated my previous comment to include screenshots for Ubuntu (it seems, for this OS, Firefox also doesn't have any problems). @espadrine @mathiasbynens just a heads-up (if you haven't notice already): |
Yes, that's correct. However, I am talking about the width of the text used, not the height. For instance, "dependencies" is something like thrice as wide as "build".
Good to know! |
Ok, I now understand what you where referring to.
Don't think so. Do note that: the result of
|
A 10px difference is much bigger than I expected. I guess I didn't see it because both Firefox and node-canvas use the Cairo library as their backend. I'm back to the drawing board. Might there be a way in SVG to force the rectangle to be of the size of a specified text? |
Closing because this repo is no longer the main one. |
The
text-rendering
svg property provides a hint to the user agent about how to optimize its text rendering.In this particular case, the value specified for the
text-rendering
property isgeometricPrecision
, indicating that the user agent should emphasize geometric precision over legibility and rendering speed.This is done because certain aspects of fonts — such as kerning — don't scale linearly:
If
geometricPrecision
is fully supported by the rendering engine, it will allow users to scale text fluidly, making the text look good.References:
See also: