Rotation-aware text layout
- 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
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