bevyengine / bevyengine/bevy

Rotation-aware text layout

Open
#8,998 6 comments 1 reaction 0 assignees View on GitHub
A-Text A-UI C-Feature
Dominant language
Rust
Stars
48.2k
Forks
4.8k
Avg merge
3d 16h
Merged PRs (30d)
171

Description

## What problem does this solve or what need does it fill?

Bevy UI can only draw text horizontally except if you apply rotation to the `TextBundle` entities transform which breaks the layout.

## What solution would you like?

Maybe add a `TextWritingMode` enum (The relevant property in CSS is called writing-mode) with `Horizontal` and `Vertical` variants initially. This isn't a feature that would make sense for `Text2dBundle`, so it shouldn't be a field that is added to the `Text` struct (unless we split up `Text` into `Text` and `Text2d` types, which might make sense as their behaviour is very different now).

The `Horizontal` variant would be what we have now, and the `Vertical` variant would match the behaviour of `writing-mode: vertical-rl` in CSS (example: [https://www.w3docs.com/tools/editor/9992](https://www.w3docs.com/tools/editor/9992)).

The implementation shouldn't be too tricky. It might be a little challenging if you aren't familiar with the bevy ui internals but still doable.

For rendering, in `extract_text_uinodes` if `TextWritingMode::Vertical` is set the transform needs to be rotated by `Quat::from_rotation_z(std::f32::consts::FRAC_PI_2)`. The translation might need adjustment too.

`measure_text_system` and `text_system` would also need changes and you'd need a new measure func. It should be enough I think to just wrap the existing `TextMeasure` in a new `Measure` type and swap the width and height:

```rust
pub struct VerticalTextMeasure {
pub text_measure: TextMeasure,
}

impl Measure for VerticalTextMeasure {
fn measure(
&self,
width: Option,
height: Option,
available_width: AvailableSpace,
_available_height: AvailableSpace,
) -> Vec2 {
self.text_measure.measure(height, width, available_height, available_width)
}
}
```

## Additional context

https://developer.mozilla.org/en-US/docs/Web/CSS/text-orientation
https://developer.mozilla.org/en-US/docs/Web/CSS/writing-mode
https://www.w3docs.com/learn-css/writing-mode.html

Contributor guide

Open the contributing guide

Research direction

Start by reading the UI text paths named in the issue: extract_text_uinodes, measure_text_system, and text_system, along with TextMeasure and the Measure trait. Trace how horizontal text is measured, laid out, and transformed, then verify vertical writing-mode behavior with a UI example or relevant tests. Done means vertical UI text lays out and renders without relying on Text2dBundle rotation that breaks layout.

Written by the indexing model from the issue text.

Assessment

Tech stack
rust
Domain
game-dev
Issue type
Feature
Difficulty
4/5
Estimated time
3-5 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
38/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.