Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Icon size bug #81

Closed
torsteingrindvik opened this issue Jan 19, 2023 · 3 comments
Closed

Icon size bug #81

torsteingrindvik opened this issue Jan 19, 2023 · 3 comments
Labels
bug Something isn't working good first issue Good for newcomers

Comments

@torsteingrindvik
Copy link

I'm importing bootstrap icons.
I tried the FontForge program to open the TTF file, and found an icon called gears. In the program's editor it looks like this:

image

So it seems to be perfectly touching the edges of its area.

Using the tab bar example, it gets cut off:

image

However if I change this line https://github.com/iced-rs/iced_aw/blob/main/src/native/tab_bar.rs#L564
to be:

size: icon_bounds.height * 0.9

I get this:

image

I don't know enough about fonts and how the rendering in iced works, but hopefully this at least can give an indicator.
Other icons which are made such that the icon touches the "top of their own bounds" were also cut off.

@genusistimelord
Copy link
Collaborator

ahh yeah, the font stuff in iced might be making changes soon which can help with this too.

@rctlmk
Copy link

rctlmk commented Feb 23, 2023

There is a horizontal clipping bug as well, but it goes away if the font is changed (even to itself):

// Converted from `.woff2` from the latest release
// https://github.com/twbs/icons/releases/tag/v1.10.3
const BOOTSTRAP_ICONS: iced::Font = iced_native::Font::External {
    name: "Bootstrap-Icons",
    bytes: include_bytes!("../resources/bootstrap-icons.ttf"),
};

fn view(&self) -> iced::Element<'_, Self::Message, iced::Renderer<Self::Theme>> {
    use iced::widget::text;
    use iced_aw::graphics::IconText;
    use iced_aw::ICON_FONT;
    use iced_native::Alignment::Center;

    let gear = '\u{F3E5}';
    let icons = "\u{F159}\u{F156}";

    let content = container(
        column![
            row![text("Icon::Gear"), IconText::new(Icon::Gear).size(40.0),].align_items(Center),
            row![
                text("Icon::Gear, ICON_FONT"),
                IconText::new(Icon::Gear).font(ICON_FONT).size(40.0)
            ]
            .align_items(Center),
            row![
                text("Icon::Gear, bootstrap-icons.ttf"),
                IconText::new(Icon::Gear).font(BOOTSTRAP_ICONS).size(40.0)
            ]
            .align_items(Center),
            row![text("Gear code"), IconText::new(gear).size(40.0)].align_items(Center),
            row![
                text("Gear code, ICON_FONT"),
                IconText::new(gear).font(ICON_FONT).size(40.0)
            ]
            .align_items(Center),
            row![
                text("Hourglass, bootstrap-icons.ttf"),
                IconText::new('\u{F420}').font(BOOTSTRAP_ICONS).size(40.0)
            ]
            .align_items(Center),
            row![
                text("Gear code, bootstrap-icons.ttf"),
                IconText::new(gear).font(BOOTSTRAP_ICONS).size(40.0)
            ]
            .align_items(Center),
            row![text("IconText"), IconText::new(icons).size(40.0)].align_items(Center),
            row![text("IconText, ICON_FONT"), text(icons).font(ICON_FONT).size(40.0)].align_items(Center),
            row![text("text, ICON_FONT"), text(icons).font(ICON_FONT).size(40.0)].align_items(Center),
            row![
                text("IconText, bootstrap-icons.ttf"),
                IconText::new(icons).font(BOOTSTRAP_ICONS).size(40.0)
            ]
            .align_items(Center),
            row![
                text("text, bootstrap-icons.ttf"),
                text(icons).font(BOOTSTRAP_ICONS).size(40.0)
            ]
            .align_items(Center),
        ]
        .spacing(20),
    )
    .padding(10);
}

Screenshot

Here is bootstrap-icons.ttf I was using (it's not a .zip file, change the extension to .ttf): bootstrap-icons.zip
The vertical clipping is still there, though, but it is much less noticeable.
It also seems that the current icons file has other problems and is somewhat outdated.

@genusistimelord
Copy link
Collaborator

After investigating I have found that this is 100% a iced issue.

it occurs when the Renderer measures the Text size and returns a incorrect Size.
let (width, height) =
renderer.measure(&self.content, size, self.font.unwrap_or_default(), bounds);

This somehow is not correct and I hope the newer Text renderer will fix this issue.

@genusistimelord genusistimelord added bug Something isn't working good first issue Good for newcomers labels May 8, 2023
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug Something isn't working good first issue Good for newcomers
Projects
None yet
Development

No branches or pull requests

3 participants