Additional WPF Text Clarity Improvements


During each milestone of WPF4, we have been working to improve our text rendering. WPF4 Beta2 included new text rendering and formatting modes. The RC contained additional bug fixes to our rendering. We hoped that this work would solve WPF’s text rendering issues. Overall, feedback on our improved text rendering was positive; however it was clear a few issues remained.

During our last milestone, we have identified an issue with our display mode (pixel aligned) rendering. When using light colored text on a dark background, text rendering differed noticeably from GDI. With this fixed, WPF is not technically pixel perfect with GDI text rendering, but the difference is indiscernible to the naked eye.

Below are some comparison screenshots of VS2008 (GDI) and VS10 (WPF) with this fix. All cropped images use Consolas 9. The color schemes used are: default(default VS color scheme), customColors1(submitted via a connect bug as a blurry color scheme. I believe it is the same as Oren Ellenbogen’s DarkScheme), and customColors2(DesertNights color scheme). Check them out and let us know what you think!

Open corresponding images in two different windows of an image editor. Make sure the windows completely align and overlap. Alt-tab between the two windows. You should NOT be able to tell the difference between the two images. To verify that these are actually different images, zoom in and use the color picker to sample the color on the same pixel from both images. Notice that the RGB values change ever so slightly as you sample the color from the different images.

 

– Chipalo

 

VS2008 userProgram defaultColors cropped

VS2008, default colors

 

VS2010WithFix userProgram defaultColors cropped

VS2010 with fix, default colors

 

VS2008 userProgram customColors1 cropped

VS2008, customColors1

 

VS2010WithFix userProgram customColors1 cropped

VS2010 with fix, customColors1

 

VS2008 userProgram customColors2 cropped

VS2008, customColors2

 

 VS2010WithFix userProgram customColors2 cropped

VS2010 with fix, customColors2

 

SxS Consolas.

Side by side comparison of VS2008 and VS2010 with fix

 

SXS Consolas -  Orcas (Top) x Dev10 (Bottom)

Enlarged comparison of a line of text from VS2008 and VS2010 with fix

 

SxS Darker Theme

Side by side comparison of VS2008 and VS2010 with fix

 

SXS Darker Theme -  Orcas (Top) x Dev10 (Bottom)

Enlarged comparison of a line of text from VS2008 and VS2010 with fix


Comments (33)

  1. Mike says:

    You’re right, I can’t tell the difference! Umm … congratulations? 🙂

  2. Pete says:

    Awesome, congrats guys! I know you just made a lot of developers really happy.

  3. rickbrew says:

    Sounds really good!

    Another analysis trick is to copy-paste these into 2 layers in Paint.NET ( http://www.getpaint.net/ ), and then set the top layer’s blend mode to "Xor".

    You can use Ctrl+Alt+V (Edit->Paste into New Image) for the first image, and then Ctrl+Shift+V (Edit->Paste into New Layer) to make this faster.

    -Rick Brewster

  4. scorpion007 says:

    LGTM.

  5. I can see the difference just between the Vs2008 and Vs2010 original color scheme. The Vs2010 is much better.

  6. Great!

    Thanks for this improvement. I really appreciate it.

  7. Bijan says:

    Could you please comment on this:

    http://social.msdn.microsoft.com/Forums/en-ZA/wpfprerelease/thread/84874beb-60af-4474-a42e-fb727a0e950b

    ================================

    Would it possible to create exact texts that we see in GDI? I have already played with TextFormattingMode and TextRenderingMode but they are not effective enough (except TextRenderingMode.Aliased). If you look at the below picture (link), you will see the "Windows 7 Paint" on the left and a WPF application on the right and they are different and "Windows 7 Paint" is much more better.

    http://cid-e096e7c6c38aedc5.skydrive.live.com/self.aspx/Public/TextRenderingComparison.bmp

    Regards,

    Bijan

  8. _akidan says:

    This is great news!  Thank you for listening, and thank you for your work on fixing this.

    I was getting worried when I saw the white-on-black text issue was still present in VS2010 RC.  Seeing these screenshots is a big relief!

  9. text says:

    Bijan – With this new fix WPF and GDI text rendering should be almost identical. If you can’t tell a difference between the screenshots of VS2008 and VS2010, then you should not be able to tell the difference between GDI and another WPF app. Please note that while our rendering is almost GDI compatible, our text layout can differ (line breaking, hyphenation, bidi, etc.). In 95%+ scenarios, we are the same but it is possible for us to produce different layouts. From your screenshot, I don’t think it will affect you; however, I have talked with customers who legally need to reproduce GDI layouts.

  10. Sergey says:

    I can’t tell the difference too. Awesome!  Thanks!

  11. tobi says:

    well done. now I can sleep easy at night again.

  12. Will says:

    This sounds good – could you just confirm that this is a general WPF4 fix, not a VS-specific thing?  I am working on a white-on-black WPF app at the moment which doesn’t have very good rendering despite fiddling with the various WPF text options – is this going to improve at RTM?

  13. anonymous says:

    So finally in the 4th release of WPF (3.0, 3.5, 3.5 SP1 and now 4.0), text rendering is sharp and GDI-like with ClearType enabled. This makes Visual Studio, Expression Blend, Design and Encoder, and dozens of other .NET apps highly usable. Thank you. An important development for WPF IMO.

  14. Borek says:

    I opened the two top-most images (default color schemes in VS2k8 and 2010) and still can tell the difference between them (that is, without any tools or zooming in). I’m not saying which rendering is better but your assumption that WPF and GDI are now practically indistinguishable is false. In fact, I believe I would succeed in a blinded test recognizing WPF / GDI rendering – if you set up such experiment, I would be happy to participate.

    Is there any older post on this blog explaining why you guys are trying to mimic GDI instead of simply reusing the algorithms? I don’t quite understand what’s so damn hard about getting the font rendering right.

  15. Arnoud van Bers says:

    This is great work!

    Will this be ported to Silverlight, where the same issues apply??

  16. Martin says:

    I use a bitmap font (ProggySquareTT size 12). Will this work equally well?

  17. Atle Iversen says:

    Looks great – but what about Portrait mode ?

    Does WPF render differently than "normal" cleartype ?

    If not, how does WPF work for non-cleartype fonts ?

  18. Graham says:

    Awesome, absolutely awesome guys.

    Thanks for helping us all, and sorry for making your lives hell, I’m the original MS connect article writer you mentioned who had the white on black color scheme 🙂  It is a derivitive of Oleg’s color scheme you are right 🙂

    Pixel for pixel at maximum zoom I can’t see ANY difference.  This has made an obsessive compulsive  developer like myself VERY happy =)

    Can’t wait for RTM!

  19. Ole says:

    Thank you, thank you, thank you. This is the one thing that have held me back from using VS2010.

  20. Sean says:

    I must be the only one. Looking at the side-by-side, 2010 looks much blurrier to me.

    2008 looks much more ‘crisp’.

  21. text says:

    Will – This fix will be default behavior for all apps based on the final release of WPF4.

    Borek – It would be interesting to see if you could consistently pick one out in a blind test. We’ve run this on a few people here and they have not been able to do so. Leave your email and if we set up a broader test, I’d be happy to include you.

    Getting font rendering “right” is very dependent on personal preference the scenario in which font is being used. I know the link below has some info on this subject. I thought I had written about it more, but the location of those posts is slipping my mind at the moment.

    http://windowsclient.net/wpf/white-papers/wpftextclarity.aspx

    Arnoud – Text plans around the next versions of Silverlight (5+) have not been finalized

    Martin – This fix should apply to all fonts; however, WPF does not support bitmap/raster fonts so neither does VS10. Are you already using this font with VS10. With some work, a customer has figured out how to convert a bitmap/raster font to a font usable by WPF.

    http://www.electronicdissonance.com/2010/01/raster-fonts-in-visual-studio-2010.html

    Atle – You’ll have to give me more information as to what you mean by “Portrait mode.” VS running on a rotated monitor? Portarit mode printing?

    No, WPF uses the standard ClearType algorithm for rendering glyph bitmaps. This process takes many different inputs which can change the final result of the image produced.

    ClearType is an antialiasing method, used for fonts, which takes advantage of physical properties of a LCD screen. Some fonts, like Consolas, are hinted to improve the ClearType process; however this does not prevent a text stack from using other antialiasing algorithms on the glyph bitmaps (eg grayscale). If WPF is told to use ClearType (system settings or TextRenderingMode), WPF will use ClearType. Otherwise WPF will use grayscale antialiasing or aliased rendering.

    Sean – You may not be alone, Borek says that he can tell a difference as well. Hopefully it is not as noticeable for you in a running WPF application.

  22. Simon Buchan says:

    Is there any info about how this fix relates to DirectWrite? Many of the complaints against WPF text seem to be the same as complaints against other DW clients (Valve’s beta Steam UI a recent example).

  23. Sven says:

    Great work guys ! Finally WPF gets decent text rendering.

    However, when looking at the two images side by side I can definitely see the difference. I wouldn’t say GDI is more crisp though. WPF’s text just seems to be slightly more bold compared to GDI’s. I don’t think the difference would bother me (haven’t really been using VS2010 RC yet, just played with it)

    Anyways, great work !

    Sven

  24. Robert Vukovic says:

    Can we assume that same text rendering will available in Silverlight 4 ?

  25. André says:

    Will we get a hotfix for .net 4.0 RC, so that we can check it ourself that it is fixed?

  26. ac says:

    I can tell the "M" and "W" and "a" letters look easily brighter in 2010 flipping between them quickly. However if a test to look for this involved say a couple minute break between the flip to a random shot, I doubt I could tell which is which as it’s still quite subtle.

    As to which looks better? While it’s quite subtle, the brighter subpixels contribute to the more blurry appearance but really I think this is acceptable now.

    The REAL QUESTION, is what about backgrounds that are not very dark or bright? eg. Low contrast/pastel themes. While those may not be a huge issue for the editor, WPF application overall would still use text on more than just black or white bg.

  27. Aaron says:

    For the people saying that it still is blurry, make sure you are not looking at it zoomed out. There is no difference. I even put them in photoshop to compare with some of the blending options to highlight differences.

  28. Borek says:

    Thanks for the response, my email is borekb@gmail.com. If you took a couple of screenshots in VS 2k8/2010 and sent them to me I’d be happy to try to guess which is which.

  29. text says:

    Simon – On Win7, WPF uses DirectWrite so it should be possible to create the same experience we do. Unfortunately, possible and easy are two different things. WPF uses very low level DirectWrite APIs. I’m not sure if the functionality needed to mimic WPF rendering is exposed on the higher level APIs that I assume Steam is using.

    Robert – No, this is not in Silverlight4.

    Andre – I doubt that we will produce a hotfix for RC.

    AC/Borek – I’m out of the country right now, but when I get back I’ll put up some more screenshots with more background colors. When I do, I won’t mark which are which. If you want to know, I’ll email you the answers.

  30. Andrew says:

    I just want it to display aliased text.

  31. Zoxc says:

    Can this be applied to the blurry text in Windows 7 too? (jump lists, window captions, taskbar)

  32. text says:

    Zoxc – no this only applies to WPF applications. The Widows7 shell should already be using GDI.

  33. HadesMR says:

    One question: WPF does AFAIK use DirectWrite. Is this still true if you use TextFormattingMode="Display"?

    And if it still holds true, how can I achieve the same effect when I use DirectWrite – but not WPF – in my application?

Skip to main content