Text Overflow Bug

[franklinblanco]

Bevy version

0.13

Relevant system information

cargo 1.77.0-nightly (1ae631085 2024-01-17)

AdapterInfo { name: "Apple M1 Pro", vendor: 0, device: 0, device_type: IntegratedGpu, driver: "", driver_info: "", backend: Metal }

What you did

Added a TextBundle with a max_width of 80% of the parent, Overflow::Clip on both axis.

Item holder (Parent) (Corresponds to any slot that's blue in the screenshot)

    let item_holder = commands.spawn(NodeBundle {
        style: Style {
            position_type: PositionType::Absolute,
            grid_column,
            grid_row,
            margin: UiRect::all(Val::Auto),
            width: Val::Percent(100.0),
            height: Val::Percent(100.0),
            border: GRID_INNER_OCCUPIED_BORDER,
            display: Display::Flex,
            justify_content: JustifyContent::Center,
            align_items: AlignItems::Center,
            ..Default::default()
        },
        border_color: GRID_INNER_OCCUPIED_BORDER_COLOR,
        background_color: item.item.item.get_inventory_background_color(),
        z_index: ZIndex::Global(1),
        focus_policy: FocusPolicy::Block,
        ..Default::default()
    }).id();

Text inside parent (This is where the problem is)

commands.spawn(TextBundle {
        text: Text::from_section(item.item.item.get_item_properties().name, TextStyle {
            font_size: 13.0,
            color: Color::WHITE,
            ..Default::default()
        }).with_justify(JustifyText::Right),
        style: Style {
            position_type: PositionType::Absolute,
            right: Val::Px(1.0),
            top: Val::Px(1.0),
            overflow: Overflow { x: OverflowAxis::Clip, y: OverflowAxis::Clip },
            max_width: Val::Percent(80.0),
            max_height: Val::Px(13.0),
            ..Default::default()
        },
        z_index: ZIndex::Local(2),
        ..Default::default()
    })
    .set_parent(item_holder);

What went wrong

As this Screenshot shows, almost all the items have names that would take up more than the allowed width. But weirdly enough, the ones that have the first word take up the max_width or more, overflow. The ones that would take up >= max_width but with separate words in between them don't overflow. They clip, as expected.

Just so you have an Idea of how long the names are, here it is without a max_height property:

Additional information

Just wanted to know if this is considered a bug, (I'm pretty sure it is). Or if it's expected behaviour. This isn't really the worst bug, I could just limit the characters and remove any length of characters past some formula calculating available width.

Thanks to the bevy devs for your work!

[rparrett]

I wonder if this is related to #6879.

You might need to wrap the text in a separate nodebundle to do the clipping.

[porkbrain]

Reporting a similar problem, wrapping in a child node bundle did not help. This is my setup:

The red area is a child node bundle with just the text. The parent is the white bubble you see. Both the bubble and the text node have a width and height set (hence the red highlight.) Both have clipping in both axes set.

When I made the height smaller, it kept showing the text until a threshold, then it finally clipped it.

[rparrett]

It seems like there's something very interesting happening with PositionType::Absolute and clipping.