Make v-align and scale of user fonts tweakable #1241

emilk · 2022-02-12T09:05:33Z

Some fonts sit higher on a line, and some lower.

This PR allows users to tweak the vertical alignment and scale of each font to match it better with other fonts and the rest of the UI, like so:

font_data.insert(
    "emoji-icon-font".to_owned(),
    FontData::from_static(include_bytes!("../../fonts/emoji-icon-font.ttf")).tweak(
        FontTweak {
            scale: 0.8, // make it smaller
            y_offset_factor: 0.1, // move it down slightly
            y_offset: 0.0,
        },
    ),
);

This PR also changes those values slightly for the default fonts.

This moves some text by a pixel or so, especially small and large text, but the difference i minimal:

Before:

After:

After plus text bounding boxes (text should be centered vertically in each green box):

This help vertically center large text.

juancampa · 2022-02-12T14:14:11Z

Not sure if just me. But in the "after" screenshot, the top-right heading "egui demos", seems to be less vertically centered than before. Higher, to be specific.

emilk · 2022-02-12T16:05:35Z

Not sure if just me. But in the "after" screenshot, the top-right heading "egui demos", seems to be less vertically centered than before. Higher, to be specific.

That's because of how the text is placed within the panel, not how the text is centered within the label. I've added another screenshot with the text boxes drawn out - text should now be better centered vertically in those green boxes than before, including the "egui demos" bit.

I will need to tweak the margins for the side panels to make "egui demos" center better.

emilk added 3 commits Feb 12, 2022

Add ability to "tweak" the scale and y-offsets of individual fonts

950bb0b

Change default font tweak

feeafc0

This help vertically center large text.

Update changelogs

bcf6b70

Tweak y_offset for emoji-icon-font

6d56fd0

emilk merged commit 6962629 into master Feb 12, 2022
20 checks passed

emilk deleted the font-tweak branch Feb 12, 2022

4JX mentioned this pull request Feb 12, 2022

Expose FontTweak through egui::FontTweak #1244

Merged

Jan	FEB	Mar
	13
2021	2022	2023

emilk / egui Public

Make v-align and scale of user fonts tweakable #1241

Make v-align and scale of user fonts tweakable #1241

emilk commented Feb 12, 2022 •

edited

juancampa commented Feb 12, 2022

emilk commented Feb 12, 2022

emilk / egui Public

Make v-align and scale of user fonts tweakable #1241

Make v-align and scale of user fonts tweakable #1241

Conversation

emilk commented Feb 12, 2022 • edited

Before:

After:

juancampa commented Feb 12, 2022

emilk commented Feb 12, 2022

emilk commented Feb 12, 2022 •

edited