Why does the text in the interactive manual looks small and blurry?

[pthom]

This question was asked in the messages of a reddit announcement for ImGui Bundle.

Getting crisp font rendering is a challenge on which I worked a lot, and if it does not render well, I would interested to investigate and solve this.

Introduction: how does Hello ImGui handle high DPI

When using High DPI screens, a common issue with ImGui is that windows will appear very small, and text rendering will be very small also.

On desktop platforms
HelloImGui tries to detect the screen DPI scaling factor, and will then, 1/ load the font at twice the size if the scaling factor is 200% and 2/ increase the window size and the widget styling. This works reasonably well under Windows, Linux and Mac.

In the web demo
However, when running the web interactive demo the DPI scaling factor cannot be detected (it is not possible to query the OS from emscripten). In that case, InitImGuiFontGlobalScale() will cause fonts to be loaded with a size that is 2 times bigger

Hello ImGui dpi_aware API
See hello_imgui/dpi_aware.h for more detail on the DPI related API.

Why is the font too small?

More info would be needed, since this is probably related to the particular setup (OS, GPU, and monitor DPI).

Is the default text size just a little too small (which would be due to the default font size choice)?

In that case, to make the text bigger, you can zoom the web page in the interactive demo; this works well (use Ctrl + / Ctrl -).

is it too small by a factor of 2 or more?

In that case, this is probably due to the fact that your screen is using a scaled rendering, and that this was unfortunately not detected under emscripten. This is an issue I cannot reproduce on my machine (where I run Windows ARM on a mac).

If someone experiences that and is willing to help diagnose, sending a screenshot may help as a first step.

Why is the font blurry?

If the text looks blurry, it is not normal, and there may be something to investigate also.

Actually, ImGui store all its fonts inside a single GPU texture. And, since the interactive demo uses a lot of fonts, the maximum size of an acceptable texture may have been reached. In that case, you might a message like this in the console output:

Detected a potential font loading error! You might try to reduce the number of loaded fonts and/or their size!

See ReloadFontIfFailed()

I'd be interested to know if anyone encounter this message in the console log window.

[TheAwesomeGem]

Even with 200% scaling, it still looks blurry on my machine. Running at 2560x1440 on 100% DPI.

https://i.imgur.com/j9T4bxb.png

[pthom]

Thanks, I'll have a look at this in the next days.

[pthom]

@TheAwesomeGem : would you mind make another quick test and tell me if it is better for you? I made some modifications where the dpi scaling is inferred from the browser, and where I reduced the size of the font texture. (Please force-reload the page, to make sure you get the new version).
If possible, could you copy-paste the output of the javascript console, it should also display the detected devicePixelRatio: see first line on the example log below.

window.devicePixelRatio=2.000000 [demo_imgui_bundle.html:1:110](https://traineq.org/ImGuiBundle/emscripten/bin/demo_imgui_bundle.html)
WARNING: Output of vertex shader 'webgl_d13dd8c11d20120f' not read by fragment shader [demo_imgui_bundle.html:1:197](https://traineq.org/ImGuiBundle/emscripten/bin/demo_imgui_bundle.html)
<empty string> [demo_imgui_bundle.html:1:197](https://traineq.org/ImGuiBundle/emscripten/bin/demo_imgui_bundle.html)
emscripten_set_main_loop_timing: Cannot set timing mode for main loop since a main loop does not exist! Call emscripten_set_main_loop first to set one up. [demo_imgui_bundle.html:1:197](https://traineq.org/ImGuiBundle/emscripten/bin/demo_imgui_bundle.html)
...
status:

[TheAwesomeGem]

I don't notice much a visual change. It's still the same. Here's the log:

traineq.org-1675352718331.log

[pthom]

@TheAwesomeGem : you told me that you are running at 2560x1440 on 100% DPI.

This is what I saw in your logs (in which I saw demo_imgui_bundle.html:1 window.devicePixelRatio=1.000000). However, with such a high resolution, it is understandable that the font size is small.
ImGui Bundle uses a font size of 14 by default, which may appear small on your monitor if you are running at 100% DPI.

Possible workarounds and solutions:

• Change your system DPI scaling? This is not a real solution, since I guess you are happy with your setup.
  My guess is that you are using 100% DPI in order to keep window decorations small, but this forces you to use bigger default font sizes. Am I right?.
• Zoom the web page: if you zoom the web page to 150% of 200% and then reload the page, the fonts will be reloaded and rendered with subpixel accuracy (i.e. the new devicePixelRatio will be detected). This should work nicely.
• Modify ImGui Bundle in order to render fonts via freetype: as I do not want to increase the number of dependencies, which is already quite high, I'd rather not explore this right now.

[pthom]

I updated the default font size (the text should be a little bigger now), and improved the default theme colors.

---

Experimental support for freetype:

The branch freetype_render adds an experimental support for freetype.

It works only with the C++ project, not with emscripten and not with python.

On this branch, Freetype support is activated only if find_package(Freetype) succeeds (i.e. freetype shall be installed either globally or via a package manager such as conan or vcpkg).

It is then possible to switch between StbTrueType and Freetype:

@TheAwesomeGem : If you have time, I would be interested in your opinion on whether it improves the rendering or not.