iris-ai
c8beca5753
All three sat in the middle of a box the width of the widest of them, so left, centred and right were the same picture. `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 -- there is nowhere for it to sit. Declaring `rel(1.0)` on each hands it the row instead. (Bryan, 2026-09-17.)
68 lines
2.2 KiB
Rust
68 lines
2.2 KiB
Rust
//! 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());
|
|
|
|
// 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 }
|
|
}
|
|
}
|