| 1 |
--- |
| 2 |
title: "Val::Em and Val::Rem" |
| 3 |
authors: ["@gagnus"] |
| 4 |
pull_requests: [25231] |
| 5 |
--- |
| 6 |
|
| 7 |
Bevy UI now supports `em` and `rem` as sizing units. `em` is the current font size (represented by an `EmSize` component), `rem` is a |
| 8 |
global "root" font size (represented by the existing `RemSize` resource). |
| 9 |
|
| 10 |
`EmSize` is derived from `TextFont` when one is on the same entity; propagating it down the hierarchy is left to your app. |
| 11 |
|
| 12 |
This is especially useful if you might want to vary your text size after authoring your UIs, for example as an accessibility feature or |
| 13 |
just to improve your UI on different devices. |
| 14 |
|
| 15 |
```rust |
| 16 |
bsn! { |
| 17 |
Node { width: em(10) } |
| 18 |
Text("Hello") |
| 19 |
TextFont { font_size: FontSize::Rem(1.5) } |
| 20 |
} |
| 21 |
``` |
| 22 |
|
| 23 |
The default font-size is now `rem(1)` rather than `px(20)`. This is a no-op if you're not changing `RemSize` but it means your |
| 24 |
text will scale by default when you do. |