TextAlignment doesn't work as intended

[Cifram]

Bevy version

0.9

What you did

Attempted to center word wrapped text.

What went wrong

The text was centered in a space as wide as the longest line, rather than the width of the text node, and then moved to the left side of the text node. This resulted in it being off-center to the left.

Additional information

It appears that TextAlignment first calculates the dimensions of the text itself, ignoring the any size specified on the text node. Then it aligns the text within that box, and puts that box against the top-left of the box of the text node. This means that when there is no word wrap, TextAlignment will do nothing at all, because it will be aligning the text in a box that's exactly the same size as the text.

When there is word wrap, it'll determine the width of the box by the width of the widest line. Then all the shorter lines will be aligned correctly relative to that. However, the longest line will generally still be less wide than the width of the text node, so the extra space will be made up with padding on the right.

The vertical alignment portion effectively never works, presumably for the same reason. The vertical size of the text is calculated, and it's vertically aligned in that space, which doesn't do anything. And then if the text node is taller than that, the extra space is made up with bottom padding.

In this screenshot, the text node's dimensions are the dimensions of the gray rectangle, and it's given a TextAlignment::CENTER.

The relevant bit of my UI code that produced that screenshot is this:

parent
	.spawn(NodeBundle {
		style: Style {
			size: Size::new(Val::Percent(100.0), Val::Px(180.0)),
			padding: UiRect::all(Val::Px(4.0)),
			margin: UiRect { top: Val::Px(10.0), ..default() },
			flex_direction: FlexDirection::Column,
			..default()
		},
		background_color: BackgroundColor(Color::rgb(0.3, 0.3, 0.3)),
		..default()
	})
	.with_children(|parent| {
		parent
			.spawn(
				TextBundle::from_section(
					&scroll.description,
					TextStyle {
						font: asset_server.load("fonts/FiraSans-Bold.ttf"),
						font_size: 20.0,
						color: Color::WHITE,
					}
				)
				.with_style(Style {
					size: Size::new(Val::Px(272.0), Val::Px(172.0)),
					..default()
				})
				.with_text_alignment(TextAlignment::CENTER)
			);
	});

[Cifram]

So adding AlignItems::Center to the parent node would definitely be the wrong thing. That aligns the child nodes to the center of the parent, but TextAlignment::CENTER aligns the text in the text node within itself. These are two very different operations. And the problem is that TextAlignment::CENTER is not properly centering the text within it's own box. It's making a smaller box, in the upper-left corner of it's actual box, and aligning the text within that.

Adding an empty node in between to allow AlignItems::Center to work is ... weird? I guess that intermediate node must somehow be determining it's size based on the actual size of the text itself, instead of the specified size of the text node? Which also seems wrong.

So I can use this workaround for now, but the fact that so many things seem to be ignoring the explicitly specified size of a text node, in favor of the actual size of the text, still seems like a bug.

Edit: Fixed capitalization. Seems AlignItems::Center and TextAlignment::CENTER follow different capitalization styles!
Edit 2: Oh, I see. That's because TextAlignment is a struct with two fields, and CENTER is a constant with those fields set to certain values. Whereas AlignItems is an enum.

[Cifram]

I just tried putting the intermediate empty node in there, as you show in your code snippet, and it didn't change the outcome for me.

[Cifram]

The workaround that DID work for me is just as hacky, but more complicated. I basically abandoned the built-in word wrap entirely, and instead broke the string up by word, and made a separate text node for each word. Then used the flexbox formatting to wrap them. I wrote this function to make this trick easy to utilize (and so it'll be easy to just replace this function when this bug is fixed):

pub fn wrapped_text(parent: &mut ChildBuilder, text: &str, text_style: TextStyle, align: TextAlignment, size: Size) {
	let words = text.split(" ").filter(|word| word != &"");
	parent
		.spawn(NodeBundle {
			style: Style {
				size,
				flex_direction: FlexDirection::Row,
				flex_wrap: FlexWrap::Wrap,
				align_items: match align.horizontal {
					HorizontalAlign::Left => AlignItems::FlexStart,
					HorizontalAlign::Right => AlignItems::FlexEnd,
					HorizontalAlign::Center => AlignItems::Center,
				},
				justify_content: match align.horizontal {
					HorizontalAlign::Left => JustifyContent::FlexStart,
					HorizontalAlign::Right => JustifyContent::FlexEnd,
					HorizontalAlign::Center => JustifyContent::Center,
				},
				align_content: match align.vertical {
					VerticalAlign::Top => AlignContent::FlexStart,
					VerticalAlign::Bottom => AlignContent::FlexEnd,
					VerticalAlign::Center => AlignContent::Center,
				},
				..default()
			},
			..default()
		})
		.with_children(|parent| {
			for word in words {
				parent.spawn(
					TextBundle::from_section(word, text_style.clone())
						.with_text_alignment(align)
						.with_style(Style {
							max_size: Size::new(Val::Undefined, Val::Px(text_style.font_size)),
							margin: UiRect { right: Val::Px(text_style.font_size / 4.0), ..default() },
							..default()
						})
				);
			}
		});
}

Credit for this idea to @jkb0o's comment in #1490.

[ickshonpe]

I deleted my reply when I realised what I posted didn't work before I saw that Cifram had already replied, if anybody is confused.