Adding TextBounds to Text2d causes weird offsets

[keithsharp]

Bevy 0.15.3; Rust 1.86.0; macOS 15.3.2.

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

Initial discussion in #18679 and might be related to #12319.

I wanted to draw a 2d shape such as a square and have some text centred, vertically and horizontally, on top of the shape. Using code such as:

commands.spawn(
    // Create mesh with shape here
).with_children(|parent| {
    Text2d("My text string".to_string()),
    TextLayout::new(JustifyText::Center, LineBreak::WordBoundary),
    TextBounds::new_horizontal(BOUNDS_WIDTH),
});

I was expecting the text to be centred, however the TextBounds component, especially combined with wrapping, appears to be adding weird offsets depending on the length of the string, the length of words within the string, and where the line breaks can be inserted.

This image shows the output of my reproducer code:

The code to reproduce this image (without the annotations):

use bevy::color::palettes::css::{DIM_GRAY, WHITE};
use bevy::prelude::*;
use bevy::text::TextBounds;

const BOUNDS_WIDTH: f32 = 80.0;

fn main() {
    App::new()
        .insert_resource(ClearColor(Color::Srgba(DIM_GRAY)))
        .add_plugins(DefaultPlugins.set(WindowPlugin {
            primary_window: Some(Window {
                title: "TextBounds".to_string(),
                resolution: (300.0, 400.0).into(),
                ..default()
            }),
            ..default()
        }))
        .add_systems(Startup, setup)
        .run();
}

fn setup(
    mut commands: Commands,
    mut meshes: ResMut<Assets<Mesh>>,
    mut materials: ResMut<Assets<ColorMaterial>>,
) {
    commands.spawn(Camera2d);

    let white = materials.add(Color::Srgba(WHITE));
    let square = meshes.add(Rectangle::new(100.0, 100.0));

    // Top Left
    commands
        .spawn((
            Mesh2d(square.clone()),
            MeshMaterial2d(white.clone()),
            Transform::from_xyz(-60.0, 120.0, 0.0),
        ))
        .with_children(|parent| {
            parent.spawn((
                Text2d("No wrap".to_string()),
                TextLayout::new(JustifyText::Center, LineBreak::WordBoundary),
                TextColor(Color::BLACK),
                TextFont {
                    font_size: 15.0,
                    ..default()
                },
            ));
        });

    // Top Right
    commands
        .spawn((
            Mesh2d(square.clone()),
            MeshMaterial2d(white.clone()),
            Transform::from_xyz(60.0, 120.0, 0.0),
        ))
        .with_children(|parent| {
            parent.spawn((
                Text2d("No wrap".to_string()),
                TextLayout::new(JustifyText::Center, LineBreak::WordBoundary),
                TextBounds::new_horizontal(BOUNDS_WIDTH),
                TextColor(Color::BLACK),
                TextFont {
                    font_size: 15.0,
                    ..default()
                },
            ));
        });

    // Middle Left
    commands
        .spawn((
            Mesh2d(square.clone()),
            MeshMaterial2d(white.clone()),
            Transform::from_xyz(-60.0, 0.0, 0.0),
        ))
        .with_children(|parent| {
            parent.spawn((
                Text2d("Long with wrap".to_string()),
                TextLayout::new(JustifyText::Center, LineBreak::WordBoundary),
                TextBounds::new_horizontal(BOUNDS_WIDTH),
                TextColor(Color::BLACK),
                TextFont {
                    font_size: 15.0,
                    ..default()
                },
            ));
        });

    // Middle Right
    commands
        .spawn((
            Mesh2d(square.clone()),
            MeshMaterial2d(white.clone()),
            Transform::from_xyz(60.0, 0.0, 0.0),
        ))
        .with_children(|parent| {
            parent.spawn((
                Text2d("Long with wrap".to_string()),
                TextLayout::new(JustifyText::Center, LineBreak::WordBoundary),
                TextBounds::new_horizontal(BOUNDS_WIDTH),
                Transform::from_xyz(-(BOUNDS_WIDTH / 4.0), 0.0, 0.0),
                TextColor(Color::BLACK),
                TextFont {
                    font_size: 15.0,
                    ..default()
                },
            ));
        });

    // Bottom Left
    commands
        .spawn((
            Mesh2d(square.clone()),
            MeshMaterial2d(white.clone()),
            Transform::from_xyz(-60.0, -120.0, 0.0),
        ))
        .with_children(|parent| {
            parent.spawn((
                Text2d("Longword with wrap".to_string()),
                TextLayout::new(JustifyText::Center, LineBreak::WordBoundary),
                TextBounds::new_horizontal(BOUNDS_WIDTH),
                Transform::from_xyz(-(BOUNDS_WIDTH / 4.0), 0.0, 0.0),
                TextColor(Color::BLACK),
                TextFont {
                    font_size: 15.0,
                    ..default()
                },
            ));
        });

    // Bottom Right
    commands
        .spawn((
            Mesh2d(square.clone()),
            MeshMaterial2d(white.clone()),
            Transform::from_xyz(60.0, -120.0, 0.0),
        ))
        .with_children(|parent| {
            parent.spawn((
                Text2d("Longword with wrap".to_string()),
                TextLayout::new(JustifyText::Center, LineBreak::WordBoundary),
                TextBounds::new_horizontal(BOUNDS_WIDTH),
                Transform::from_xyz(0.0, 0.0, 0.0),
                TextColor(Color::BLACK),
                TextFont {
                    font_size: 15.0,
                    ..default()
                },
            ));
        });
}

[ickshonpe]

This might be fixed in 0.16? I'll try the examples later.

[keithsharp]

I can confirm this is fixed in 0.16.0-rc.5.