Blurred text with TTF fonts and SDL2

[Thomas Arnbjerg]

I'm rendering text with SDL2 and TTF fonts and the text looks very blurred?

Has anyone a solution for this?

[Floh]

I didn't try SDL fonts specifically, but I had quite a bit of trouble getting sharp pixel details for raster font rendering, with differing results between browsers and operating systems. The problem is that a lot of things need to go right starting from your own rendering up to the operating system's window composer.

The most important thing is to avoid any sort of filtering in the WebGL canvas in the CSS rules, e.g.: https://github.com/floooh/oryol/blob/master/web/style.css#L182

You need to prevent any sort of scaling, and use the right 'subpixel' positions throughout your rendering (I guess SDL takes care of that, hopefully).

After that I still had trouble in some browsers (for instance Chrome had a bug in OSX: 

https://bugs.chromium.org/p/chromium/issues/detail?id=602103&can=1&q=floooh&colspec=ID%20Pri%20M%20Stars%20ReleaseBlock%20Component%20Status%20Owner%20Summary%20OS%20Modified )

...and Safari on OSX still looks blurry though, no chance to get crisp text there.

I usually use ImGui's text rendering as reference whether everything looks right: http://floooh.github.io/oryol-samples/asmjs/ImGuiDemo.html

Cheers,

-Floh.