That's a long title that perfectly captures another issue I have found with GDI+ text rendering.
While checking Kris's claim on text rendering using GraphicsPath1 I have noticed that GDI+ text rendering using TextRenderingHint.AntiAlias looks much better (less fuzzy) in simple tests than the result of using HTML Renderer to generate transparent image (using AntiAlias hint). It's strange as HTML Renderer uses the same GDI+ text rendering method.
A quick investigation revealed that when using Graphics.DrawString with non-integer Y coordinates (figure 1) the rendered text is blurry (figure 2).
- Only effected by Y coordinate, using fractions on X plane doesn't affect the rendered text.
- Only effects "AntiAlias" and "AntiAliasGridFit" TextRenderingHint .
- Relevant to image generation as well as regular WinForms controls.
- I didn't find a proper explanation to it, to me it seems like AntiAlias tries to cheat the obvious inability to render half pixels by creating half-transparent pixels.
g.DrawString(string, font, brush, 2, 20.5f);
Figure 1: using DrawString method with non-integer Y coordinate.
Figure 2: first line is rendered on integer number coordinates while the second on fraction number.
HTML Renderer
HTML Renderer is affected because the text position is calculated by HTML layout so fractions are the common case, rounding the coordinates before rendering text significantly improved the rendered HTML.
Conclusion
- Even when the API accepts floating-point values it is worth checking that the result is what you expect it to be.
- With GDI+ text rendering it is definitely not, so make sure you round the coordinates.
Sample code
Font font = new Font("Segoe UI", 12); const string String = "Test-string m(g=j{}3)"; Image image = new Bitmap(155, 45, PixelFormat.Format32bppArgb); using(var g = Graphics.FromImage(image)) { g.TextRenderingHint = TextRenderingHint.AntiAliasGridFit; g.DrawString(String, font, Brushes.Red, 2, 2); g.DrawString(String, font, Brushes.Red, 2, 20.5f); } image.Save(@"blurry.png", ImageFormat.Png);
- See the comments on my previous post: GDI text rendering to image, I will later post my finding on this subject. ↩
[…] latest "revelation" (see: Blurry/Fuzzy GDI+ Text Rendering using anti-alias and floating-point Y coördinates) on improving GDI+ text rendering visual […]
[…] latest "revelation" (see: Blurry/Fuzzy GDI+ Text Rendering using anti-alias and floating-point Y coördinates ) on improving GDI+ text rendering visual […]