ImGui added an extralineheight and extralineadvance parameter to be able to adjust the lineheight of wrapped text.
ocornut:master
← thedmd:feature/font-line-spacing
opened 11:50AM - 20 Nov 21 UTC
This PR address #4578, #2945 feature requests.
## Summary
I made a pass ov… er ImGui and prepared necessary patch to support extra spacing in text.
I introduced two new parameters in `ImFont`:
- `ExtraLineHeight` - by how many pixels line height should be increased, extra space will be equally distributed between top and bottom of the font
- `ExtraLineAdvance` - by how many pixels spacing should be increased between consecutive lines of multiline texts, does not affect line height, just move cursor more
## Tasks
- [x] Implement `ExtraLineHeight`
- [x] ~~Implement `ExtraLineAdvance`~~ Removed in favor of `ExtraLineHeight`
- [x] Implement `BaselineOffset`
- [x] Use `FontLineHeight` for vertical axis instead of `FontSize`
- [ ] Collect feedbak
- [x] Rename `_FontSize` back to `FontSize`
- [ ] Version bump / cleanup
- [ ] Determine course of action with `GetFontXXX` functions
## Preview
| `ExtraLineHeight=0` `ExtraLineAdvance=0` | <img width="75%" alt="image" src="https://user-images.githubusercontent.com/1197433/142724087-679a54b4-b366-43d8-bf35-d4bacfa02f67.png" /> |
|:-----------------------------------------|:--------------------------------------------------------------------------------------------------------------:|
| `ExtraLineHeight=8` `ExtraLineAdvance=0` | <img width="75%" alt="image" src="https://user-images.githubusercontent.com/1197433/142724124-7951e6db-48ef-48cb-aed1-9cb1c5447020.png" /> |
| `ExtraLineHeight=0` `ExtraLineAdvance=8` | <img width="75%" alt="image" src="https://user-images.githubusercontent.com/1197433/142724153-d9085056-fe5b-4174-9e56-45a8602cd857.png" /> |
| `ExtraLineHeight=8` `ExtraLineAdvance=8` | <img width="75%" alt="image" src="https://user-images.githubusercontent.com/1197433/142724179-0876a87c-1f21-4ca1-89a8-29a0d326c563.png" /> |
## How atlas generation changed?
Atlas itself isn't affected. Change is entirely run-time only. Also `Font scale`, `window scale` and `global scale` still works as expected.
| <img width="45%" alt="image" src="https://user-images.githubusercontent.com/1197433/142724369-83dae9c8-4800-4896-80a2-f05987924c60.png" /> |
|----------------------------------------------------------------------------------------------------------------|
## How does it behave in action?
| https://user-images.githubusercontent.com/1197433/142724958-04c92c42-87ee-4473-b234-6b5322fd368d.mp4 |
|----------------------------------------------------------------------------------------------------------------|
Currently it would appear this is not exposed in ImGui in vvvv. I believe it should be an input in the FontConfig.
After the size of the text, the lineheight is the 2nd most important parameter when it comes to making text legible.
Here you can see how hard the text is to read, when it is too close together:
In most cases the line height is set to 100% the text size as a default, which is too low for readability when the text wraps over multiple lines. Text set at just 100% line height does not follow accessibility standards.
(from
Readability: The Optimal Line Length – Baymard Institute )
The text you are currently reading has a line height of 140%.
Thanks for considering!
1 Like
Hello seltzdesign,
yes I would also like to have this parameter available, but the Pull Request you’ve mentioned is still not merged, so at the moment the original ImGui library can’t set LineHeight / LineSpacing.
As soon as they have it, we’ll add it too.
Best,
Anton
1 Like