0b0ef583b6
# Objective The quality of Bevy's text rendering can vary wildly depending on the font, font size, pixel alignment and scale factor. But this situation can be improved dramatically with some small adjustments. ## Solution * Text node positions are rounded to the nearest physical pixel before rendering. * Each glyph texture has a 1-pixel wide transparent border added along its edges. This means font atlases will use more memory because of the extra pixel of padding for each glyph but it's more than worth it I think (although glyph size is increased by 2 pixels on both axes, the net increase is 1 pixel as the font texture atlas's padding has been removed). ## Results Screenshots are from the 'ui' example with a scale factor of 1.5. Things can get much uglier with the right font and worst scale factor<sup>tm</sup>. ### before <img width="300" alt="list-bad-text" src="https://github.com/bevyengine/bevy/assets/27962798/482b384d-8743-4bae-9a65-468ff1b4c301"> ### after <img width="300" alt="good_list_text" src="https://github.com/bevyengine/bevy/assets/27962798/34323b0a-f714-47ba-9728-a59804987bc8"> --- ## Changelog * Font texture atlases are no longer padded. * Each glyph texture has a 1-pixel wide padding added along its edges. * Text node positions are rounded to the nearest physical pixel before rendering. |
||
|---|---|---|
| .. | ||
| layout | ||
| render | ||
| widget | ||
| accessibility.rs | ||
| camera_config.rs | ||
| focus.rs | ||
| geometry.rs | ||
| lib.rs | ||
| measurement.rs | ||
| node_bundles.rs | ||
| stack.rs | ||
| ui_material.rs | ||
| ui_node.rs | ||
| update.rs | ||