iris/examples/text.rs

//! Text sizing: wrapped text reads the width it is offered, fixed text does
//! not, and both report a height their container lays out around.

use iris::prelude::*;

fn main() {
    DefaultApp::<State>::run();
}

#[derive(DefaultUiState)]
struct State {
    ui_state: DefaultUiState,
}

const SAMPLE: &str = "Wrapping shapes one source into as many lines as its container \
    leaves room for, so the height of a paragraph is an answer rather than a setting, and \
    the same words in a narrower box come back taller. Resize the window and watch the \
    text below reflow into a different number of lines while nothing about it changes.";

impl DefaultAppState for State {
    fn new(mut ui_state: DefaultUiState, rsc: &mut DefaultRsc<Self>, _: Proxy<Self>) -> Self {
        let panel = || rect(Color::WHITE.darker(0.85));

        let wrapped = wtext(SAMPLE)
            .size(28)
            .wrap(true)
            .text_align(Align::LEFT)
            .pad(16)
            .background(panel());

        let aligned = (
            wtext("left").size(24).text_align(Align::LEFT),
            wtext("centred").size(24).text_align(Align::CENTER),
            wtext("right").size(24).text_align(Align::RIGHT),
        )
            .span(Dir::DOWN)
            .gap(8)
            .pad(16)
            .background(panel());

        // The same words in half the width, which is a different number of
        // lines and so a different height. A declared width only holds along
        // a span's own axis, hence the row.
        let narrow = (
            wtext(SAMPLE)
                .size(20)
                .wrap(true)
                .pad(16)
                .background(panel())
                .align(Align::TOP)
                .width(rel(0.5)),
            rect(Color::WHITE.darker(0.95)),
        )
            .span(Dir::RIGHT);

        (wrapped, aligned, narrow)
            .span(Dir::DOWN)
            .gap(12)
            .pad(12)
            .set_root(rsc, &mut ui_state);
        Self { ui_state }
    }
}