UI text is blurry


#1

Choicebutton text is blurry, but MenuItem text isn’t. I guess the blurry text is anti-aliased? Why are some widgets anti-aliased and some aren’t? Is there an “easy” way to make all text be aliased? My browser and all my editors display what I would consider “sharp” text. image


Rack v1 development blog
#2

oops - the above was taken from v1.0, but the zoom was set to 105%. When back to 100 it looks fine. For sure the font rendering isn’t “perfect” as you change the zoom, but that’s to be expected.


#3

I’ve always noticed that some letters in the default font don’t seem to render optimally. Look at how the left side of “M” is nice and sharp, but it’s blurry on the right side. I’m guessing this is because the font renderer is not snapping the vertical lines to the nearest pixel, so the right side is landing on a half pixel position. Is this a limitation of nano-vg? Or of the font? It definitely makes drawn text look sloppy. image


(Andrew Belt) #4

If you have a solution, as either a patch to NanoVG or as a suggestion of how nvgText calls should be handled in Rack, let me know.


#5

Yeah, I talked to a friend who knows more about graphics that me. He said that since nanovg renders all its text to a “texture atlas” It doesn’t know where the pixels are when it’s rendering the text. So it can’t do the hinting that most font renders (windows, os x, skia) do. If I run into any magic work-arounds I will report back.