Vertical Text

[ickshonpe]

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).

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:

pub struct VerticalTextMeasure {
    pub text_measure: TextMeasure,
}

impl Measure for VerticalTextMeasure {
    fn measure(
        &self,
        width: Option<f32>,
        height: Option<f32>,
        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

[TimJentzsch]

Related taffy issue, to adapt the layout to the writing direction of the text:
DioxusLabs/taffy#213

[ickshonpe]

#9341 resolves this but the API is a bit mathy and might be quite counterintuitive for some users. It's also completely different to the CSS interface.

[rparrett]

Linking the cosmic-text issue: pop-os/cosmic-text#11