Bounding text width adds extra top padding

[djeedai]

Bevy version

0.8

Relevant system information

Win10 / Vulkan

AdapterInfo { name: "NVIDIA GeForce RTX 2070", vendor: 4318, device: 7938, device_type: DiscreteGpu, backend: Vulkan }

What you did

To work around #1490, constrain the size of a text in an attempt to wrap it:

                .spawn_bundle(NodeBundle {
                    style: Style {
                        flex_direction: FlexDirection::ColumnReverse, // top to bottom
                        align_items: AlignItems::FlexStart,           // align content top
                        ..default()
                    },
                    color: UiColor(Color::rgba_u8(122, 47, 125, 214)),
                    ..default()
                })
                .with_children(|parent| {
                    parent
                        .spawn_bundle(TextBundle {
                            text: Text::from_section(
                                "",
                                TextStyle {
                                    font: font.clone(),
                                    font_size: 17.0,
                                    color: Color::GRAY,
                                },
                            ),
                            style: Style {
                                size: Size::new(Val::Px(490.), Val::Auto), // #1490 - Text wrapping should work with a percent width
                                ..default()
                            },
                            ..default()
                        });
                });

What went wrong

Without the size, or with a percentage (#1490):

With the code above:

But now with a shorter text and the same size constraint, some top padding appeared:

And it's proportional to the constraint width, here's for 370. instead of 490.:

When the constraint reaches the actual calculated text size, the padding disappear. When going further below, the text as expected starts to wrap again.

Additional information

The text vertical alignment is ignored, so cannot even work around by vertically aligning to top. I'm not sure with the size is counted toward the text wrapping, since the size is that of the node, whereas text wrapping should work with the actual calculated size of the glyphs.

[zyxkad]

It will happen on MacOS/darwin too.

[djeedai]

Confirmed that the text CalculatedSize is as expected out of text_system() with the following minimal example. So this might be a bug in Taffy?

Screenshot on a high-DPI @ 150% scaling, purple box is 67px tall, but CalculatedSize of text itself is only 48px tall.

use bevy::{
    diagnostic::{Diagnostics, FrameTimeDiagnosticsPlugin},
    prelude::*,
};

fn main() {
    App::new()
        .add_plugins(DefaultPlugins)
        .add_plugin(FrameTimeDiagnosticsPlugin::default())
        .insert_resource(bevy::log::LogSettings {
            level: bevy::log::Level::WARN,
            filter: "bevy_ui=trace".to_string(),
        })
        .add_startup_system(setup)
        .run();
}

fn setup(mut commands: Commands, asset_server: Res<AssetServer>) {
    // UI camera
    commands.spawn_bundle(Camera2dBundle::default());
    // Text with one section
    commands
        .spawn_bundle(NodeBundle {
            style: Style {
                position_type: PositionType::Absolute, // avoid interaction with other UI items if any
                flex_direction: FlexDirection::ColumnReverse, // top to bottom
                justify_content: JustifyContent::FlexStart, // align top
                position: UiRect {
                    left: Val::Percent(30.0),
                    right: Val::Percent(30.0),
                    bottom: Val::Px(30.),
                    ..default()
                },
                padding: UiRect::all(Val::Px(10.)),
                size: Size::new(Val::Auto, Val::Px(90.)),
                ..default()
            },
            color: UiColor(Color::rgb_u8(42, 42, 42)),
            ..default()
        })
        .with_children(|parent| {
            parent
                .spawn_bundle(NodeBundle {
                    style: Style {
                        flex_direction: FlexDirection::ColumnReverse, // top to bottom
                        align_items: AlignItems::FlexStart,           // align content top
                        ..default()
                    },
                    color: UiColor(Color::rgba_u8(122, 47, 125, 214)),
                    ..default()
                })
                .with_children(|parent| {
                    parent.spawn_bundle(
                        // Create a TextBundle that has a Text with a single section.
                        TextBundle::from_section(
                            // Accepts a `String` or any type that converts into a `String`, such as `&str`
                            "hello bevy! this is a text",
                            TextStyle {
                                font: asset_server.load("fonts/FiraSans-Bold.ttf"),
                                font_size: 32.0,
                                color: Color::WHITE,
                            },
                        ) // Set the alignment of the Text
                        .with_text_alignment(TextAlignment::TOP_CENTER)
                        // Set the style of the TextBundle itself.
                        .with_style(Style {
                            align_self: AlignSelf::FlexStart,
                            size: Size::new(Val::Px(400.), Val::Auto),
                            ..default()
                        }),
                    );
                });
        });
}

[tigregalis]

This issue was also picked up in #5502

[janos-r]

I would like to confirm that I also hit this issue today when trying to set up line wrapping.
In this commit on line 144, the short text (unlike the long one) is pushed way down from its proper starting location. Proportionally to the set up width of the text and the width of the surrounding container.
https://github.com/janos-r/bevy-test/blob/7930822f4aeb33a97c6405f1530cf29a9bc8aa22/src/main.rs

Btw the same can be reproduced in the official bevy example file ui.rs by just increasing the size: Size::new(Val::Px(200.0) from 200 to something more noticable, like 800. And than inserting a text size that is close to that, for example width: Val::Px(700.) - the same issue is observable there too.

This way line-wrapping is impossible to use for wide boxes with dynamic text.
For now I will work around with fixed sizes and fixed line breaks in text. But I really wish somebody could have a look at this, that can understand what is happening here.

[janos-r]

I also just realized that the size of the gap is correlated also to the real size of the text. If you literally delete a word from the sentence, the rendered position drops lower.

[djeedai]

I also just realized that the size of the gap is correlated also to the real size of the text. If you literally delete a word from the sentence, the rendered position drops lower.

Yes I've observed the same.

[ickshonpe]

This was resolved by #6724 I think.