//! 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::::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, _: Proxy) -> 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()); // Each one takes the whole width, because `text_align` puts the // glyphs somewhere in the box the text is given and a text that // reports the width of its own glyphs is given exactly that. let label = |text: &str, align| wtext(text).size(24).text_align(align).width(rel(1.0)); let aligned = ( label("left", Align::LEFT), label("centred", Align::H_CENTER), label("right", 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 } } }