Positioning or Transforming Text within a Node doesn't work

[chrisburnor]

This may be as much an issue of documentation as of code, but I'm trying to center a single character within a square node with the following code:

commands
        .spawn(
            NodeComponents {
                style: Style {
                    size: Size::new(Val::Px(64.0), Val::Px(64.0)),
                    border: Rect::all(Val::Px(2.0)),
                    position_type: PositionType::Absolute,
                    position: Rect {
                        left: Val::Px(64.0),
                        right: Val::Px(64.0),
                        top: Val::Px(64.0),
                        bottom: Val::Px(64.0),
                    },

                    // I expect one of these to center the text in the node
                    align_content: AlignContent::Center,
                    align_items: AlignItems::Center,
                    align_self: AlignSelf::Center,

                    ..Default::default()
                },
                material: materials.add(Color::rgb(0.4, 0.4, 0.4).into()),
                ..Default::default()
            }
        )
        .with_children(|parent| {
            parent
                .spawn(TextComponents {
                    text: Text {
                        value: "0".to_string(),
                        font: font_handle,
                        style: TextStyle {
                            font_size: 64.0,
                            color: Color::WHITE,
                        }
                    },
                    
                    // I would expect this to horizontally stretch the text within the node
                    transform: Transform::from_non_uniform_scale(Vec3::new(2.0, 1.0, 1.0)),
                    ..Default::default()
                });
        })
    ;

However, what I get is just this:

The stretch transform seems to do nothing and neither do any of the align attributes.

[YohDeadfall]

Hello, here's an updated runnable example, but with one line which fixes a problem. Since bevy relies on strectch and just translates its own types, there's nothing we can currently do. I think that the issue should be covered by one of UI RFCs and make composition much easier and more obvious, perhaps should be covered by bevyengine/rfcs#22. @alice-i-cecile, correct me if I'm wrong.

To align the text use justify_content: JustifyContent::Center.

use bevy::prelude::*;

fn main() {
    App::build()
        .add_plugins(DefaultPlugins)
        .add_startup_system(setup.system())
        .run();
}

fn setup(
    mut commands: Commands,
    asset_server: Res<AssetServer>,
    mut materials: ResMut<Assets<ColorMaterial>>,
) {
    // ui camera
    commands.spawn_bundle(UiCameraBundle::default());
    commands
        .spawn_bundle(NodeBundle {
            style: Style {
                size: Size::new(Val::Px(64.0), Val::Px(64.0)),
                border: Rect::all(Val::Px(2.0)),
                position_type: PositionType::Absolute,
                position: Rect {
                    left: Val::Px(64.0),
                    right: Val::Px(64.0),
                    top: Val::Px(64.0),
                    bottom: Val::Px(64.0),
                },

                // I expect one of these to center the text in the node
                align_content: AlignContent::Center,
                align_items: AlignItems::Center,
                align_self: AlignSelf::Center,

                // this line aligns the content
                justify_content: JustifyContent::Center,

                ..Default::default()
            },
            material: materials.add(Color::rgb(0.15, 0.15, 0.15).into()),
            ..Default::default()
        })
        .with_children(|parent| {
            parent.spawn_bundle(TextBundle {
                text: Text::with_section(
                    "0",
                    TextStyle {
                        font: asset_server.load("fonts/FiraSans-Bold.ttf"),
                        font_size: 64.0,
                        color: Color::WHITE,
                    },
                    // Note: You can use `Default::default()` in place of the `TextAlignment`
                    TextAlignment {
                        horizontal: HorizontalAlign::Center,
                        ..Default::default()
                    },
                ),

                // I would expect this to horizontally stretch the text within the node
                //transform: Transform::from_scale(Vec3::new(2.0, 1.0, 1.0)),
                ..Default::default()
            });
        });
}

[alice-i-cecile]

I agree with @YohDeadfall's assessment here: this is basically impossible to fix directly :(

I'm going to close this for now; making sure we have a better UI solution to avoid awful edge cases like this is a high priority to me but is going to require a full, thoughtful solution.