Skip to content

Underline and Strikethrough are not visible for small text sizes #24733

Description

@robojeb

Bevy version and features

Version 0.19.0

What you did

Added the Underline component to some 12px sized text.

What went wrong

I expected underlined text, instead the underline was not visible.

Additional information

This occurs because the derived underline_size() returned by parley is less than 1px in height.

Adding a .max(Vec::new(0.0, 1.0)) to the ExtractedUINode created in extract_text_decorations for underlines resolves this issue, though I don't know enough to know if that will interact poorly with window and ui-scaling.
The alternative to allow customized underline thickness is mentioned in #21676 but doesn't yet have a tracking issue.

This issue also affects the Strikethrough component, but due to the different position of the strike-through element it only affects some small font sizes but not all.

Image

Reproduction Example

use bevy::prelude::*;

fn main() {
    App::new()
        .add_plugins(DefaultPlugins)
        .add_systems(Startup, scene.spawn())
        .run();
}

fn scene() -> impl SceneList {
    bsn_list!(Camera2d, ex())
}

fn ex() -> impl Scene {
    let text = [8, 10, 12, 14, 16, 20, 24, 32, 48]
        .iter()
        .map(|size| {
            bsn! {
                    TextFont {
                        font_size: FontSize::Px({*size as f32})
                    }
                    Text::new("Underlined")
                    Underline
                    Strikethrough
            }
        })
        .collect::<Vec<_>>();

    bsn! {
        Node {
            width: percent(100),
            height: percent(100),
            flex_direction: FlexDirection::Column,
            justify_content: JustifyContent::Center,
            align_items: AlignItems::Center,
        }
        Children [{text}]
    }
}

Metadata

Metadata

Assignees

No one assigned

    Labels

    A-RenderingDrawing game state to the screenA-TextRendering and layout for charactersC-BugAn unexpected or incorrect behaviorD-ComplexQuite challenging from either a design or technical perspective. Ask for help!S-Needs-DesignThis issue requires design work to think about how it would best be accomplished

    Type

    No type
    No fields configured for issues without a type.

    Projects

    Status
    Needs SME Triage

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions