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: https://github.com/DioxusLabs/taffy/issues/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: https://github.com/pop-os/cosmic-text/issues/11

[lomirus]

This might be slightly off-topic, but will an API similar to text-orientation in CSS be added in subsequent PRs? For CJK languages, single characters within vertical text generally do not require individual rotation. For example, in the UI of Sekiro, terms like 忍殺, 鬼仏見出 and 不死斬り appear without such rotation.

[ickshonpe]

This might be slightly off-topic, but will an API similar to text-orientation in CSS be added in subsequent PRs? For CJK languages, single characters within vertical text generally do not require individual rotation. For example, in the UI of Sekiro, terms like 忍殺, 鬼仏見出 and 不死斬り appear without such rotation.

Hopefully yes, though that's more a responsibility of text layout which is handled by cosmic-text atm, we definitely need to provide better APIs so users can access more cosmic-text features.

[ickshonpe]

Maybe this diagram can make it clearer what I wanted with this issue:

The red dashes indicate the bounds of the text node in the layout. The rectangles are other UI nodes laid out in a row along with the text.