tags:

views:

9093

answers:

11

Problem is described and demonstrated on the following links:

Explanation: Text Clarity in WPF. This link has font comparison.

I would like to collect all possible solutions for this problem. Microsoft Expression Blend uses WPF but fonts look readable.

  • Dark background as in Microsoft Expression Blend
  • Increasing the font size and changing the font (Calibri ... ) [link]
  • Embed windows forms [link]
  • Use GDI+ and/or Windows Forms TextRenderer class to render text to a bitmap, and then render that bitmap as a WPF control. [link]

Are there any more solutions?

This is going to be fixed in VS2010 (and WPF4) beta 2

WPF 4.0 Text Stack Improvements

IT LOOKS LIKE IT HAS BEEN FINALLY SOLVED !

Scott Hanselman's ComputerZen.com: WPF and Text Blurriness, now with complete Clarity
WPF Text Blog: Additional WPF Text Clarity Improvements

+3  A: 

They say "SnapToDevicePixels = true" works, but I've never seen any good results.

I combat the blurred text by switching to a different font.

Obviously this is not a solution to the problem, however this is how I've worked around it.

JTA
I just compared a TextBlock with SnapToDevicePixels="true" with one without and there was _no_ difference with the Segoe UI Font at 12duis. May I ask what fonts you use?
David Schmitt
We also made the situation better by switching our font. The font we chose was Avenir (I don't think it is installed by default, at least not on Windows XP).
cplotts
+44  A: 
David Schmitt
excellent explanation, +1. Probably explains why Flash has such horrid font rendering as well.
Jeff Atwood
Yes. That's a good explanation, but I still wish there was a way to turn on font hinting for a nice look when you know you aren't going to animate. I suppose that this would imply a given scale for which you're optimizing the hinting. This kind of stuff makes WPF seem still beta-version to me.
PeterAllenWebb
It's not like the "scalable" variant doesn't use font hinting, it's just that WPF doesn't optimize for hitting the pixel grid, like ClearType does. Arguably SnapToDevicePixels should work for text, but this would always have to be inherited because a control cannot know whether it may snap or not.
David Schmitt
+1  A: 

I want the solution to that too.

Another possibility is to embed windows forms text.

Artur Carvalho
Did you ever try this? Were you happy with the results?
cplotts
No. Before trying it out I made a sample with windows forms and another with WPF. Then I asked about 5-6 persons what font they preferred and only one chose the Windows Forms one. I tested with a 14 size font and the bigger the less blurrier.
Artur Carvalho
+6  A: 

SnapToDevicePixels only applies to WPF shapes (lines etc), not to text renderer.

There is no known workaround to this issue. According to Microsoft, the behavior is "by design".

Also see this thread on Microsoft forums discussing the problems - it has gotten a few replies from MS guys which clarify their position on the issue.

+4  A: 

From a developer's point, the only known "workaround" to date is to use GDI+ and/or Windows Forms TextRenderer class to render text to a bitmap, and then render that bitmap as a WPF control. Aside from obvious performance implications, this doesn't alleviate the problem for existing applications.

I have now created a Microsoft Connect ticket for this issue (to my surprise, despite all the negativity, there was no actual bug report in the designated tracker).

Since that is one of the official channels of communicating requests and questions to Microsoft, I would advise also going through it for a quicker answer. At least, if you wish for the issue to be addressed one way or another, voting for that ticket there and/or validating the issue will help to draw the attention of Microsoft PMs and engineers to this problem, and possibly raise its perceived priority.

+3  A: 

Just tried out VS2010 beta, which is all done in WPF, and it suffers BADLY from the blurry-font issue. Particularly on tooltips.

That seems to give some evidence that WPF4 will in fact not solve the problem (if anything it looks worse)

Orion Edwards
I am filing bugs against VS2010B1 for each place in the UI the text is blurry. The tooltips are almost comically bad, I agree. Given how explicitly it's been said this was to be fixed in WPF4, I can only hope that it just didn't make the cut for this beta.
Will Dean
+9  A: 

The blurry WPF font rendering prevents me to use the VS 2010 at all. I want sharp GDI fonts without any kind of "cleartype" technology. The way Microsoft develops the new visual framework looks scarry because they still completely ignore this issue. Any way to rewrite the WPF font renderer ?

I agree, it's absolutely terrible.
Will Dean
+4  A: 

I have just seen this:

http://channel9.msdn.com/shows/Continuum/WPF4Beta1/

Which can give those of us alarmed by 2010 beta 1 some consolation that the new text work is in the NEXT beta. Phew!

Will Dean
+3  A: 

Wow, I can't believe I finally got my WPF fonts readable. And I also can't believe there is no option dialog to make these changes easy while the default values are horrible on my display.

These registry settings (in decimal) worked for me and come closest to my regular cleartype font:

  • ClearTypeLevel: 10 (mostly greyscale aliasing)
  • GammaLevel: 1300 (higher gamma made the font too thin and I was seeing the colors in the aliasing)
VVS
+3  A: 
Pavel Minaev
+1 for testing. Interesting to see how much wider this text is.
David Schmitt
+1  A: 

I encountered a problem the other day when I used a border which had a DropShadowEffect applied. The result was that all text inside that border was extremely blurry. It doesn't matter if text was inside other panels or directly under the border - any text block that is child of parent that has an Effect applied seems to be affected.

The solution to this particular case was to not put stuff inside the border that has effects, but instead use a grid (or anything else that supports putting content on top of each other) and place a rectangle in the same cell as the text (i.e. as a sibling in the visual tree) and put the effects on that.

Like so:

<!-- don't do this --->
<Border>
     <Border.Effect>
          <DropShadowEffect BlurRadius="25" ShadowDepth="0" Opacity="1"/>
     </Border.Effect>
     <TextBlock Text="This Text Will Be Blurry" />
</Border>

<!-- Do this instead -->
<Grid>
  <Rectangle>
     <Rectangle.Effect>
          <DropShadowEffect BlurRadius="25" ShadowDepth="0" Opacity="1"/>
     </Rectangle.Effect>
  </Rectangle>
  <TextBlock Text="This Text Will Be Crisp and Clear" />
</Grid>
Isak Savo
This done the trick nicely. Bit of a hack, but better than messing around with settings etc. Nice one. thanks. One thing I had to do however, was set the fill of the rectangle to something. Maybe this was just my setup though.
HAdes