Blurry/Fuzzy GDI+ Text Rendering using AntiAlias and floating-point Y coordinates

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.
 
clip_image001.png
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);      

 


  1. See the comments on my previous post: GDI text rendering to image, I will later post my finding on this subject. 

2 comments on “Blurry/Fuzzy GDI+ Text Rendering using AntiAlias and floating-point Y coordinates

  1. […] latest "revelation" (see: Blurry/Fuzzy GDI+ Text Rendering using anti-alias and floating-point Y coördinates) on improving GDI+ text rendering visual […]

  2. […] latest "revelation" (see: Blurry/Fuzzy GDI+ Text Rendering using anti-alias and floating-point Y coördinates ) on improving GDI+ text rendering visual […]

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s