Docs update. Improved Fonts troubleshooting section.

docs/FAQ.md

@@ -165,8 +165,8 @@ Console SDK also sometimes provide equivalent tooling or wrapper for Synergy-lik
 ---
 
 ### Q: I integrated Dear ImGui in my engine and little squares are showing instead of text...
-Your renderer is not using the font texture correctly or it hasn't been uploaded to the GPU.
-- If this happens using the standard backends: A) have you modified the font atlas after `ImGui_ImplXXX_NewFrame()`? B) maybe the texture failed to upload, which could happens if for some reason your texture is too big. Also see [docs/FONTS.md](https://github.com/ocornut/imgui/blob/master/docs/FONTS.md).
+Your renderer backend is not using the font texture correctly or it hasn't been uploaded to the GPU.
+- If this happens using the standard backends: A) have you modified the font atlas after `ImGui_ImplXXX_NewFrame()`? B) maybe the texture failed to upload, which **can if your texture atlas is too big**. Also see [docs/FONTS.md](https://github.com/ocornut/imgui/blob/master/docs/FONTS.md).
 - If this happens with a custom backend: make sure you have uploaded the font texture to the GPU, that all shaders are rendering states are setup properly (e.g. texture is bound). Compare your code to existing backends and use a graphics debugger such as [RenderDoc](https://renderdoc.org) to debug your rendering states.
 
 ##### [Return to Index](#index)
@@ -530,7 +530,7 @@ This approach is relatively easy and functional but comes with two issues:
 - Style override may be lost during the `Begin()` call crossing monitor boundaries. You may need to do some custom scaling mumbo-jumbo if you want your `OnChangedViewport()` handler to preserve style overrides.
 
 Please note that if you are not using multi-viewports with multi-monitors using different DPI scales, you can ignore that and use the simpler technique recommended at the top.
-    
+
 On Windows, in addition to scaling the font size (make sure to round to an integer) and using `style.ScaleAllSizes()`, you will need to inform Windows that your application is DPI aware. If this is not done, Windows will scale the application window and the UI text will be blurry. Potential solutions to indicate DPI awareness on Windows are:
 
 - For SDL: the flag `SDL_WINDOW_ALLOW_HIGHDPI` needs to be passed to `SDL_CreateWindow()``.
@@ -570,44 +570,15 @@ io.Fonts->AddFontFromFileTTF("MyFolder/MyFont.ttf", size);  // ALSO CORRECT
 ### Q: How can I easily use icons in my application?
 The most convenient and practical way is to merge an icon font such as FontAwesome inside your
 main font. Then you can refer to icons within your strings.
-You may want to see `ImFontConfig::GlyphMinAdvanceX` to make your icon look monospace to facilitate alignment.
-(Read the [docs/FONTS.md](https://github.com/ocornut/imgui/blob/master/docs/FONTS.md) file for more details about icons font loading.)
-With some extra effort, you may use colorful icons by registering custom rectangle space inside the font atlas,
-and copying your own graphics data into it. See docs/FONTS.md about using the AddCustomRectFontGlyph API.
+Read the [docs/FONTS.md](https://github.com/ocornut/imgui/blob/master/docs/FONTS.md) file for more details about icons font loading.
 
 ##### [Return to Index](#index)
 
 ---
 
 ### Q: How can I load multiple fonts?
-Use the font atlas to pack them into a single texture:
-(Read the [docs/FONTS.md](https://github.com/ocornut/imgui/blob/master/docs/FONTS.md) file and the code in ImFontAtlas for more details.)
 
-```cpp
-ImGuiIO& io = ImGui::GetIO();
-ImFont* font0 = io.Fonts->AddFontDefault();
-ImFont* font1 = io.Fonts->AddFontFromFileTTF("myfontfile.ttf", size_in_pixels);
-ImFont* font2 = io.Fonts->AddFontFromFileTTF("myfontfile2.ttf", size_in_pixels);
-io.Fonts->GetTexDataAsRGBA32() or GetTexDataAsAlpha8()
-// the first loaded font gets used by default
-// use ImGui::PushFont()/ImGui::PopFont() to change the font at runtime
-
-// Options
-ImFontConfig config;
-config.OversampleH = 2;
-config.OversampleV = 1;
-config.GlyphOffset.y -= 1.0f;      // Move everything by 1 pixel up
-config.GlyphExtraSpacing.x = 1.0f; // Increase spacing between characters
-io.Fonts->AddFontFromFileTTF("myfontfile.ttf", size_pixels, &config);
-
-// Combine multiple fonts into one (e.g. for icon fonts)
-static ImWchar ranges[] = { 0xf000, 0xf3ff, 0 };
-ImFontConfig config;
-config.MergeMode = true;
-io.Fonts->AddFontDefault();
-io.Fonts->AddFontFromFileTTF("fontawesome-webfont.ttf", 16.0f, &config, ranges); // Merge icon font
-io.Fonts->AddFontFromFileTTF("myfontfile.ttf", size_pixels, nullptr, &config, io.Fonts->GetGlyphRangesJapanese()); // Merge japanese glyphs
-```
+Use the font atlas to pack them into a single texture. Read [docs/FONTS.md](https://github.com/ocornut/imgui/blob/master/docs/FONTS.md) for more details.
 
 ##### [Return to Index](#index)
 

docs/FONTS.md

@@ -11,10 +11,7 @@ In the [misc/fonts/](https://github.com/ocornut/imgui/tree/master/misc/fonts) fo
 **Also read the FAQ:** https://www.dearimgui.com/faq (there is a Fonts section!)
 
 ## Index
-- [Readme First](#readme-first)
-- [About Filenames](#about-filenames)
-- [About UTF-8 Encoding](#about-utf-8-encoding)
-- [Debug Tools](#debug-tools)
+- [Troubleshooting](#troubleshooting)
 - [How should I handle DPI in my application?](#how-should-i-handle-dpi-in-my-application)
 - [Fonts Loading Instructions](#fonts-loading-instructions)
 - [Using Icon Fonts](#using-icon-fonts)
@@ -23,103 +20,44 @@ In the [misc/fonts/](https://github.com/ocornut/imgui/tree/master/misc/fonts) fo
 - [Using Custom Glyph Ranges](#using-custom-glyph-ranges)
 - [Using Custom Colorful Icons](#using-custom-colorful-icons)
 - [Using Font Data Embedded In Source Code](#using-font-data-embedded-in-source-code)
+- [About Filenames](#about-filenames)
+- [About UTF-8 Encoding](#about-utf-8-encoding)
+- [Debug Tools](#debug-tools)
 - [Credits/Licenses For Fonts Included In Repository](#creditslicenses-for-fonts-included-in-repository)
 - [Font Links](#font-links)
 
 ---------------------------------------
 
-## Readme First
-
-**A vast majority of font and text related issues encountered comes from 3 things:**
-- Invalid filename due to use of `\` or unexpected working directory. See [About Filenames](#about-filenames). AddFontXXX functions should assert if the filename is incorrect.
-- Invalid UTF-8 encoding of your non-ASCII strings. See [About UTF-8 Encoding](#about-utf-8-encoding). Use the encoding viewer to confirm yours is correct.
-- You need to load a font with explicit glyph ranges if you want to use non-ASCII characters. See [Fonts Loading Instructions](#fonts-loading-instructions). Use Metrics/Debugger->Fonts to confirm loaded fonts and loaded glyph ranges.
-
-The third point is a current constraint of Dear ImGui (which we will lift in the future): when loading a font you need to specify which characters glyphs to load.
-All loaded fonts glyphs are rendered into a single texture atlas ahead of time. Calling either of `io.Fonts->GetTexDataAsAlpha8()`, `io.Fonts->GetTexDataAsRGBA32()` or `io.Fonts->Build()` will build the atlas. This is generally called by the Renderer backend, e.g. `ImGui_ImplDX11_NewFrame()` calls it.
-
-**If you use custom glyphs ranges, make sure the array is persistent** and available during the calls to `GetTexDataAsAlpha8()/GetTexDataAsRGBA32()/Build()`.
-
-##### [Return to Index](#index)
-
-## About Filenames
-
-**Please note that many new C/C++ users have issues loading their files _because the filename they provide is wrong_ due to incorrect assumption of what is the current directory.**
-
-Two things to watch for:
-
-(1) In C/C++ and most programming languages if you want to use a backslash `\` within a string literal, you need to write it double backslash `\\`. At it happens, Windows uses backslashes as a path separator, so be mindful.
-```cpp
-io.Fonts->AddFontFromFileTTF("MyFiles\MyImage01.jpg", ...);   // This is INCORRECT!!
-io.Fonts->AddFontFromFileTTF("MyFiles\\MyImage01.jpg", ...);  // This is CORRECT
-```
-In some situations, you may also use `/` path separator under Windows.
-
-(2) Make sure your IDE/debugger settings starts your executable from the right working (current) directory. In Visual Studio you can change your working directory in project `Properties > General > Debugging > Working Directory`. People assume that their execution will start from the root folder of the project, where by default it often starts from the folder where object or executable files are stored.
-```cpp
-io.Fonts->AddFontFromFileTTF("MyImage01.jpg", ...);       // Relative filename depends on your Working Directory when running your program!
-io.Fonts->AddFontFromFileTTF("../MyImage01.jpg", ...);    // Load from the parent folder of your Working Directory
-```
-##### [Return to Index](#index)
-
-
-## About UTF-8 Encoding
-
-**For non-ASCII characters display, a common user issue is not passing correctly UTF-8 encoded strings.**
-
-(1) We provide a function `ImGui::DebugTextEncoding(const char* text)` which you can call to verify the content of your UTF-8 strings.
-This is a convenient way to confirm that your encoding is correct.
-
-```cpp
-ImGui::SeparatorText("CORRECT");
-ImGui::DebugTextEncoding(u8"こんにちは");
-
-ImGui::SeparatorText("INCORRECT");
-ImGui::DebugTextEncoding("こんにちは");
-```
-![UTF-8 Encoding viewer](https://github.com/ocornut/imgui/assets/8225057/61c1696a-9a94-46c5-9627-cf91211111f0)
+## Troubleshooting
 
-You can also find this tool under `Metrics/Debuggers->Tools->UTF-8 Encoding viewer` if you want to paste from clipboard, but this won't validate the UTF-8 encoding done by your compiler.
+**A vast majority of font and text related issues encountered comes from 4 things:**
 
-(2) To encode in UTF-8:
+### (1) Invalid filename due to use of `\` or unexpected working directory.
 
-There are also compiler-specific ways to enforce UTF-8 encoding by default:
+See [About Filenames](#about-filenames). AddFontXXX functions should assert if the filename is incorrect.
 
-- Visual Studio compiler: `/utf-8` command-line flag.
-- Visual Studio compiler: `#pragma execution_character_set("utf-8")` inside your code.
-- Since May 2023 we have changed the Visual Studio projects of all our examples to use `/utf-8` ([see commit](https://github.com/ocornut/imgui/commit/513af1efc9080857bbd10000d98f98f2a0c96803)).
+### (2) Invalid UTF-8 encoding of your non-ASCII strings.
 
-Or, since C++11, you can use the `u8"my text"` syntax to encode literal strings as UTF-8. e.g.:
-```cpp
-ImGui::Text(u8"hello");
-ImGui::Text(u8"こんにちは");   // this will always be encoded as UTF-8
-ImGui::Text("こんにちは");     // the encoding of this is depending on compiler settings/flags and may be incorrect.
-```
+See [About UTF-8 Encoding](#about-utf-8-encoding). Use the encoding viewer to confirm encoding of string literal in your source code is correct.
 
-Since C++20, because the C++ committee hate its users, they decided to change the `u8""` syntax to not return `const char*` but a new type `const char_t*` which doesn't cast to `const char*`.
-Because of type usage of `u8""` in C++20 is a little more tedious:
-```cpp
-ImGui::Text((const char*)u8"こんにちは");
-```
-We suggest using a macro in your codebase:
-```cpp
-#define U8(_S)    (const char*)u8##_S
-ImGui::Text(U8("こんにちは"));
-```
-##### [Return to Index](#index)
+### (3) Missing glyph ranges.
 
+You need to load a font with explicit glyph ranges if you want to use non-ASCII characters. See [Fonts Loading Instructions](#fonts-loading-instructions). Use [Debug Tools](#debug-tools) confirm loaded fonts and loaded glyph ranges.
 
-## Debug Tools
+This is a current constraint of Dear ImGui (which we will lift in the future): when loading a font you need to specify which characters glyphs to load.
+All loaded fonts glyphs are rendered into a single texture atlas ahead of time. Calling either of `io.Fonts->GetTexDataAsAlpha8()`, `io.Fonts->GetTexDataAsRGBA32()` or `io.Fonts->Build()` will build the atlas. This is generally called by the Renderer backend, e.g. `ImGui_ImplDX11_NewFrame()` calls it. **If you use custom glyphs ranges, make sure the array is persistent** and available during the calls to `GetTexDataAsAlpha8()/GetTexDataAsRGBA32()/Build()`.
 
-#### Metrics/Debugger->Fonts
-You can use the `Metrics/Debugger` window (available in `Demo>Tools`) to browse your fonts and understand what's going on if you have an issue. You can also reach it in `Demo->Tools->Style Editor->Fonts`. The same information are also available in the Style Editor under Fonts.
+### (4) Font atlas texture fails to upload to GPU.
 
-![Fonts debugging](https://user-images.githubusercontent.com/8225057/135429892-0e41ef8d-33c5-4991-bcf6-f997a0bcfd6b.png)
+This is often of byproduct of point 3. If you have large number of glyphs or multiple fonts, the texture may become too big for your graphics API. **The typical result of failing to upload a texture is if every glyph or everything appears as empty black or white rectangle.** Mind the fact that some graphics drivers have texture size limitation. If you are building a PC application, mind the fact that your users may use hardware with lower limitations than yours.
 
-#### UTF-8 Encoding Viewer**
-You can use the `UTF-8 Encoding viewer` in `Metrics/Debugger` to verify the content of your UTF-8 strings. From C/C++ code, you can call `ImGui::DebugTextEncoding("my string");` function to verify that your UTF-8 encoding is correct.
-
-![UTF-8 Encoding viewer](https://user-images.githubusercontent.com/8225057/166505963-8a0d7899-8ee8-4558-abb2-1ae523dc02f9.png)
+Some solutions:
+- You may reduce oversampling, e.g. `font_config.OversampleH = 2`, this will largely reduce your texture size.
+  Note that while OversampleH = 2 looks visibly very close to 3 in most situations, with OversampleH = 1 the quality drop will be noticeable. Read about oversampling [here](https://github.com/nothings/stb/blob/master/tests/oversample).
+- Reduce glyphs ranges by calculating them from source localization data.
+  You can use the `ImFontGlyphRangesBuilder` for this purpose and rebuilding your atlas between frames when new characters are needed. This will be the biggest win!
+- Set `io.Fonts.Flags |= ImFontAtlasFlags_NoPowerOfTwoHeight;` to disable rounding the texture height to the next power of two.
+- Set `io.Fonts.TexDesiredWidth` to specify a texture width to reduce maximum texture height (see comment in `ImFontAtlas::Build()` function).
 
 ##### [Return to Index](#index)
 
@@ -144,7 +82,7 @@ io.Fonts->AddFontDefault();
 ImGuiIO& io = ImGui::GetIO();
 io.Fonts->AddFontFromFileTTF("font.ttf", size_pixels);
 ```
-If you get an assert stating "Could not load font file!", your font filename is likely incorrect. Read "[About filenames](#about-filenames)" carefully.
+If you get an assert stating "Could not load font file!", your font filename is likely incorrect. Read [About filenames](#about-filenames) carefully.
 
 **Load multiple fonts:**
 ```cpp
@@ -153,8 +91,9 @@ ImGuiIO& io = ImGui::GetIO();
 ImFont* font1 = io.Fonts->AddFontFromFileTTF("font.ttf", size_pixels);
 ImFont* font2 = io.Fonts->AddFontFromFileTTF("anotherfont.otf", size_pixels);
 ```
+
+In your application loop, select which font to use:
 ```cpp
-// In application loop: select font at runtime
 ImGui::Text("Hello"); // use the default font (which is the first loaded font)
 ImGui::PushFont(font2);
 ImGui::Text("Hello with another font");
@@ -220,22 +159,6 @@ ImGui::SliderFloat("float", &f, 0.0f, 1.0f);
 ![sample code output](https://raw.githubusercontent.com/wiki/ocornut/imgui/web/v160/code_sample_02_jp.png)
 <br>_(settings: Dark style (left), Light style (right) / Font: NotoSansCJKjp-Medium, 20px / Rounding: 5)_
 
-**Font Atlas too large?**
-
-- If you have very large number of glyphs or multiple fonts, the texture may become too big for your graphics API. The typical result of failing to upload a texture is if every glyph appears as a white rectangle.
-- Mind the fact that some graphics drivers have texture size limitation. If you are building a PC application, mind the fact that your users may use hardware with lower limitations than yours.
-
-Some solutions:
-
-1. Reduce glyphs ranges by calculating them from source localization data.
-   You can use the `ImFontGlyphRangesBuilder` for this purpose and rebuilding your atlas between frames when new characters are needed. This will be the biggest win!
-2. You may reduce oversampling, e.g. `font_config.OversampleH = 2`, this will largely reduce your texture size.
-   Note that while OversampleH = 2 looks visibly very close to 3 in most situations, with OversampleH = 1 the quality drop will be noticeable.
-3. Set `io.Fonts.TexDesiredWidth` to specify a texture width to minimize texture height (see comment in `ImFontAtlas::Build()` function).
-4. Set `io.Fonts.Flags |= ImFontAtlasFlags_NoPowerOfTwoHeight;` to disable rounding the texture height to the next power of two.
-5. Read about oversampling [here](https://github.com/nothings/stb/blob/master/tests/oversample).
-6. To support the extended range of unicode beyond 0xFFFF (e.g. emoticons, dingbats, symbols, shapes, ancient languages, etc...) add `#define IMGUI_USE_WCHAR32`in your `imconfig.h`.
-
 ##### [Return to Index](#index)
 
 ## Using Icon Fonts
@@ -270,6 +193,12 @@ ImGui::Button(ICON_FA_SEARCH " Search");
 ```
 See Links below for other icons fonts and related tools.
 
+**Monospace Icons?**
+
+To make your icon look more monospace and facilitate alignment, you may want to set the ImFontConfig::GlyphMinAdvanceX value when loading an icon font.
+
+**Screenshot**
+
 Here's an application using icons ("Avoyd", https://www.avoyd.com):
 ![avoyd](https://user-images.githubusercontent.com/8225057/81696852-c15d9e80-9464-11ea-9cab-2a4d4fc84396.jpg)
 
@@ -287,7 +216,7 @@ Here's an application using icons ("Avoyd", https://www.avoyd.com):
 
 ## Using Colorful Glyphs/Emojis
 
-- Rendering of colored emojis is only supported by imgui_freetype with FreeType 2.10+.
+- Rendering of colored emojis is supported by imgui_freetype with FreeType 2.10+.
 - You will need to load fonts with the `ImGuiFreeTypeBuilderFlags_LoadColor` flag.
 - Emojis are frequently encoded in upper Unicode layers (character codes >0x10000) and will need dear imgui compiled with `IMGUI_USE_WCHAR32`.
 - Not all types of color fonts are supported by FreeType at the moment.
@@ -384,6 +313,93 @@ ImFont* font = io.Fonts->AddFontFromMemoryCompressedBase85TTF(compressed_data_ba
 
 ##### [Return to Index](#index)
 
+--
+
+## About Filenames
+
+**Please note that many new C/C++ users have issues loading their files _because the filename they provide is wrong_ due to incorrect assumption of what is the current directory.**
+
+Two things to watch for:
+
+(1) In C/C++ and most programming languages if you want to use a backslash `\` within a string literal, you need to write it double backslash `\\`. At it happens, Windows uses backslashes as a path separator, so be mindful.
+```cpp
+io.Fonts->AddFontFromFileTTF("MyFiles\MyImage01.jpg", ...);   // This is INCORRECT!!
+io.Fonts->AddFontFromFileTTF("MyFiles\\MyImage01.jpg", ...);  // This is CORRECT
+```
+In some situations, you may also use `/` path separator under Windows.
+
+(2) Make sure your IDE/debugger settings starts your executable from the right working (current) directory. In Visual Studio you can change your working directory in project `Properties > General > Debugging > Working Directory`. People assume that their execution will start from the root folder of the project, where by default it often starts from the folder where object or executable files are stored.
+```cpp
+io.Fonts->AddFontFromFileTTF("MyImage01.jpg", ...);       // Relative filename depends on your Working Directory when running your program!
+io.Fonts->AddFontFromFileTTF("../MyImage01.jpg", ...);    // Load from the parent folder of your Working Directory
+```
+##### [Return to Index](#index)
+
+--
+
+## About UTF-8 Encoding
+
+**For non-ASCII characters display, a common user issue is not passing correctly UTF-8 encoded strings.**
+
+(1) We provide a function `ImGui::DebugTextEncoding(const char* text)` which you can call to verify the content of your UTF-8 strings.
+This is a convenient way to confirm that your encoding is correct.
+
+```cpp
+ImGui::SeparatorText("CORRECT");
+ImGui::DebugTextEncoding(u8"こんにちは");
+
+ImGui::SeparatorText("INCORRECT");
+ImGui::DebugTextEncoding("こんにちは");
+```
+![UTF-8 Encoding viewer](https://github.com/ocornut/imgui/assets/8225057/61c1696a-9a94-46c5-9627-cf91211111f0)
+
+You can also find this tool under `Metrics/Debuggers->Tools->UTF-8 Encoding viewer` if you want to paste from clipboard, but this won't validate the UTF-8 encoding done by your compiler.
+
+(2) To encode in UTF-8:
+
+There are also compiler-specific ways to enforce UTF-8 encoding by default:
+
+- Visual Studio compiler: `/utf-8` command-line flag.
+- Visual Studio compiler: `#pragma execution_character_set("utf-8")` inside your code.
+- Since May 2023 we have changed the Visual Studio projects of all our examples to use `/utf-8` ([see commit](https://github.com/ocornut/imgui/commit/513af1efc9080857bbd10000d98f98f2a0c96803)).
+
+Or, since C++11, you can use the `u8"my text"` syntax to encode literal strings as UTF-8. e.g.:
+```cpp
+ImGui::Text(u8"hello");
+ImGui::Text(u8"こんにちは");   // this will always be encoded as UTF-8
+ImGui::Text("こんにちは");     // the encoding of this is depending on compiler settings/flags and may be incorrect.
+```
+
+Since C++20, because the C++ committee hate its users, they decided to change the `u8""` syntax to not return `const char*` but a new type `const char_t*` which doesn't cast to `const char*`.
+Because of type usage of `u8""` in C++20 is a little more tedious:
+```cpp
+ImGui::Text((const char*)u8"こんにちは");
+```
+We suggest using a macro in your codebase:
+```cpp
+#define U8(_S)    (const char*)u8##_S
+ImGui::Text(U8("こんにちは"));
+```
+##### [Return to Index](#index)
+
+--
+
+## Debug Tools
+
+#### Metrics/Debugger->Fonts
+You can use the `Metrics/Debugger` window (available in `Demo>Tools`) to browse your fonts and understand what's going on if you have an issue. You can also reach it in `Demo->Tools->Style Editor->Fonts`. The same information are also available in the Style Editor under Fonts.
+
+![Fonts debugging](https://user-images.githubusercontent.com/8225057/135429892-0e41ef8d-33c5-4991-bcf6-f997a0bcfd6b.png)
+
+#### UTF-8 Encoding Viewer**
+You can use the `UTF-8 Encoding viewer` in `Metrics/Debugger` to verify the content of your UTF-8 strings. From C/C++ code, you can call `ImGui::DebugTextEncoding("my string");` function to verify that your UTF-8 encoding is correct.
+
+![UTF-8 Encoding viewer](https://user-images.githubusercontent.com/8225057/166505963-8a0d7899-8ee8-4558-abb2-1ae523dc02f9.png)
+
+##### [Return to Index](#index)
+
+--
+
 ## Credits/Licenses For Fonts Included In Repository
 
 Some fonts files are available in the `misc/fonts/` folder: