Text is blurry if if there's an icon before it (using merged fonts with different pixel alignment properties)

[leiradel]

I've tested some icons from Font Awesome and Material Design plus text in a button, and the text gets blurry:

See how the window title is crispy while the button text is blurry. I don't think I'm doing anything wrong:

      int ttf_size;
      const void* ttf_data = ImGuiAl::Fonts::GetCompressedData( ImGuiAl::Fonts::kProggyTiny, &ttf_size );

      ImGuiIO& io = ImGui::GetIO();
      ImFont* proggy = io.Fonts->AddFontFromMemoryCompressedTTF( ttf_data, ttf_size, 10.0f );
      proggy->DisplayOffset.y = 1.0f;

      static const ImWchar ranges[] = { ICON_MIN_FA, ICON_MAX_FA, 0 };
      ImFontConfig config;
      config.MergeMode = true;
      ttf_data = ImGuiAl::Fonts::GetCompressedData( ImGuiAl::Fonts::kFontAwesome, &ttf_size );
      io.Fonts->AddFontFromMemoryCompressedTTF( ttf_data, ttf_size, 12.0f, &config, ranges );

And then, to draw the button:

        bool ok = ImGui::Button( ICON_FA_FLOPPY_O " Load core..." );

[ocornut]

The default font is designed to be pixel-aligned and without super-sampling. So if you are merging in another font which isn't, you need to set config.PixelSnapH = true in the Icon font there so that your icon width will be padded to the next integer.

[leiradel]

Thanks, works like a charm. Sorry for opening an issue for something that's already implemented, I think I'm missing a mailing list where this kind of noob question is expected to come up from time to time.

[ocornut]

It's totally fine to ask here, I've always seen this section as a forum, and happy to contain it in one spot. From a user perspective you don't always know if it is a bug or something you have overlooked.

From my perspective I still always see how I can "fix" it for the next user (hence adding one comment here, even if that's a very little change). Any extra idea for the future users are great.