1
0
mirror of https://github.com/emilk/egui.git synced 2026-08-31 05:40:03 -04:00

Center-align all text vertically (#5117)

* Closes https://github.com/emilk/egui/issues/4929
* Builds on top of https://github.com/emilk/egui/pull/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">
This commit is contained in:
Emil Ernerfeldt
2024-09-19 11:44:29 +02:00
committed by GitHub
parent bb9e874c83
commit 2a40d16e5a
11 changed files with 148 additions and 60 deletions

View File

@@ -189,7 +189,7 @@ impl Default for FontTweak {
scale: 1.0,
y_offset_factor: 0.0,
y_offset: 0.0,
baseline_offset_factor: -0.0333, // makes the default fonts look more centered in buttons and such
baseline_offset_factor: 0.0,
}
}
}
@@ -271,29 +271,26 @@ impl Default for FontDefinitions {
let mut families = BTreeMap::new();
font_data.insert("Hack".to_owned(), FontData::from_static(HACK_REGULAR));
font_data.insert(
"Ubuntu-Light".to_owned(),
FontData::from_static(UBUNTU_LIGHT),
);
// Some good looking emojis. Use as first priority:
font_data.insert(
"NotoEmoji-Regular".to_owned(),
FontData::from_static(NOTO_EMOJI_REGULAR).tweak(FontTweak {
scale: 0.81, // make it smaller
scale: 0.81, // Make smaller
..Default::default()
}),
);
font_data.insert(
"Ubuntu-Light".to_owned(),
FontData::from_static(UBUNTU_LIGHT),
);
// Bigger emojis, and more. <http://jslegers.github.io/emoji-icon-font/>:
font_data.insert(
"emoji-icon-font".to_owned(),
FontData::from_static(EMOJI_ICON).tweak(FontTweak {
scale: 0.88, // make it smaller
// probably not correct, but this does make texts look better (#2724 for details)
y_offset_factor: 0.11, // move glyphs down to better align with common fonts
baseline_offset_factor: -0.11, // ...now the entire row is a bit down so shift it back
scale: 0.90, // Make smaller
..Default::default()
}),
);