Improve vertical alignment of fonts #2724
Merged
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
emilk
reviewed
Feb 28, 2023
caused by variable row heights
|
Thank you! |
emilk
changed the title
emilk
changed the title
This was referenced Sep 17, 2024
emilk
added a commit
that referenced
this pull request
Sep 19, 2024
* Closes #4929 * Builds on top of #2724 by @lictex (ptal!) * Implement `Center` and `Max` vertical text alignment properly * Change default vertical alignment of text to centering The end result is that text centers better in buttons and other places, especially when mixing in emojis. Before, mixing text of different heights (e.g. emojis and latin text) in a label or button would cause the text to jump vertically. ## Before This is `master`, with custom `FontTweak` to move fonts up and down: <img width="1714" alt="image" src="https://github.com/user-attachments/assets/a10e2927-e824-4580-baea-124c0b38a527"> <img width="102" alt="image" src="https://github.com/user-attachments/assets/cd41f415-197b-42cd-9558-d46d63c21dcb"> ## After This PR, with the default (zero) `FontTweak` <img width="102" alt="image" src="https://github.com/user-attachments/assets/15e7d896-66b1-4996-ab58-dd1850b19a63"> <img width="1714" alt="image" src="https://github.com/user-attachments/assets/54ec708c-7698-4754-b1fc-fea0fd240ec9">
hacknus
pushed a commit
to hacknus/egui
that referenced
this pull request
Oct 30, 2024
* Closes emilk#4929 * Builds on top of emilk#2724 by @lictex (ptal!) * Implement `Center` and `Max` vertical text alignment properly * Change default vertical alignment of text to centering The end result is that text centers better in buttons and other places, especially when mixing in emojis. Before, mixing text of different heights (e.g. emojis and latin text) in a label or button would cause the text to jump vertically. ## Before This is `master`, with custom `FontTweak` to move fonts up and down: <img width="1714" alt="image" src="https://github.com/user-attachments/assets/a10e2927-e824-4580-baea-124c0b38a527"> <img width="102" alt="image" src="https://github.com/user-attachments/assets/cd41f415-197b-42cd-9558-d46d63c21dcb"> ## After This PR, with the default (zero) `FontTweak` <img width="102" alt="image" src="https://github.com/user-attachments/assets/15e7d896-66b1-4996-ab58-dd1850b19a63"> <img width="1714" alt="image" src="https://github.com/user-attachments/assets/54ec708c-7698-4754-b1fc-fea0fd240ec9">
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
try to proper align glyph from different fallback fonts on the baseline without some manually tricky tweaks
i guess in most cases (where no font fallback happens) it should look same as before
FontTweak::scalenow should only affect glyphs themselves, not full text layouts (row heights, alignments etc). imo for the latter case is better to change the actual font size instead of using this hacky scale...test using
Cantarellas primary font andNoto Sans CJKas cjk fallbackall font tweak values are default
note the row height is now calculated using the font metrics from the tallest glyph
example: the second row is slightly taller than the first because of the noto cjk glyphs
might also resolve #2700
why theres still some tweaks for the
emoji-icon-fontnote that
emoji-icon-fonthas a significantly lower baseline than other common fonts.this will make the correct rendering look a bit off center:
...which is not so good