Imgui: Align icons glyphs or Align text

[madeso]

Version/Branch of Dear ImGui:

About 1 week old master (948009a8)

Back-end file/Renderer/OS:

Slightly modified imgui_impl_sdl_gl3.h (changed imgui and opengl include paths)

My Issue/Question:

I want to align the texts/center the icons in this popup:

if(ImGui::BeginPopup("Example Bug"))
{
  // defined somewhere else
  // static bool enabled1 = true;
  // static bool enabled2 = true;
  const char* text1    = ICON_FK_ARROWS_H " New Horizontal divider";
  const char* text2    = ICON_FK_ARROWS_V " New Vertical divider";

  if(enabled1) ImGui::Selectable(text1);
  else ImGui::Text(text1);

  if(enabled2) ImGui::Selectable(text2);
  else ImGui::Text(text2);
  ImGui::EndPopup();
}

The current workaround is to add spaces before and after the icon, to align the text, so one possible, but hacky solution would be to add a min_glyph_width to the ImFontConfig struct when loading the font.

[ocornut]

At the user level, you may split your text rendering in two steps:

ImGui::Text(icon)
ImGui::SameLine(position)
ImGui::Text(description)

Or:

one possible, but hacky solution would be to add a min_glyph_width to the ImFontConfig struct when loading the font.

I agree, been meaning to add an option like that for merging icon fonts as it is a common problem. Will probably add this feature soon. To not add additional absolute size into ImFontConfig, I wonder if this option should be specified as a ratio of the font height? Maybe a little weird..

[ocornut]

I pushed a branch font_min_max_advance with the feature, if you'd like to test it.
There are both Min and Max settings, allowing to force a font to be monospaced.
When the AdvanceX value for a given glyph is adjusted, the code offset the glyphs by half that amount to recenter it. This is possibly subject to tweaks or additional options (feedback welcome).

ImGui::Text(ICON_FA_ARROWS_H " New Horizontal divider");
ImGui::Text(ICON_FA_ARROWS_V " New Vertical divider");

void DebugLoadFontAwesome4()
{
    ImGuiIO& io = ImGui::GetIO();
    io.Fonts->AddFontDefault();

    ImFontConfig cfg;
    cfg.MergeMode = true;
    cfg.GlyphMinAdvanceX = 14.0f;
    static const ImWchar icon_ranges[] = { ICON_MIN_FA, ICON_MAX_FA, 0 };
    io.Fonts->AddFontFromFileTTF("../../../imgui-wip/fonts/fontawesome-webfont.ttf", 14.0f, &cfg, icon_ranges);
}

[madeso]

I saw it, the diff looks awesome, added a calender reminder, will try it when I get back from work in about 5-6 hours.

Not sure about the SameLine() solution though, as that will create 2 seperate widgets, and hence decrease the active region of the selectable, right?

[ocornut]

Selectable by default uses the entire available width for hit testing:

ImGui::Selectable("Hello");
ImGui::SameLine();
ImGui::Text("Blah");

[codecat]

This works great! :tada:

[madeso]

I couldn't get SameLine() solution lines to sync up, but the min_max_advance branch works perfectly.

[codecat]

To be clear, that's what I'm using in my screenshots as well, the minimum advance glyph branch.

[codecat]

Will this be merged soon? Seems like a small enough feature to merge?

[dougbinks]

I've just tried this branch and it works extremely well for us. We no longer need to add tabs or manually position content. Many thanks!

[ocornut]

Merged. Thanks @madeso @codecat @dougbinks for the confirmation!