Text section background color

[lkurcak]

I am trying for different text sections to have different backgrouhd colors, to achieve an effect similar to this:

(image from https://www.codeproject.com/Articles/24896/JLib-A-Windows-Console-Library)

I have looked into the docs and there is a background color option for the entire text for TextBundle but not Text2dBundle. The TextStyle which sets the foreground color of TextSections does not contain an option for background color:

pub struct TextStyle {
    pub font: Handle<Font>,
    pub font_size: f32,
    pub color: Color,
}

My question is whether there is a workaround to achieve this effect. I would also like to propose TextStyle to include an option for background color. The renderer could just draw a rectangle for the section's bounding box which it already has to calculate:

pub struct TextStyle {
    pub font: Handle<Font>,
    pub font_size: f32,
    pub color: Color,
+   pub background_color: Option<Color>,
}

[nicopap]

I was experimenting with this just yesterday.

You can add a Sprite and Handle<Image> components to the entity with a Text2dBundle. It will act as if it had a background. Although the background will span the whole text box and not just a single section

pub(super) fn overlay_dark_background(
    mut cmds: Commands,
    mut query: Query<
        (Entity, &TextLayoutInfo, Option<&mut Sprite>),
        (Added<OverlayText>, Changed<TextLayoutInfo>),
    >,
    cam: CameraQuery,
    window: Query<&Window, With<PrimaryWindow>>,
) {
    let scale_factor = Window::scale_factor;
    let window_scale = window.get_single().map_or(1., scale_factor) as f32;
    for (entity, new_layout, sprite) in &mut query {
        if let Some(mut sprite) = sprite {
            sprite.anchor = get_anchor(&cam);
            sprite.custom_size = Some(new_layout.size / window_scale);
        } else {
            let anchor = get_anchor(&cam);
            let custom_size = Some(new_layout.size / window_scale);
            cmds.entity(entity).insert((
                Sprite {
                    color: TEXT_BG,
                    custom_size,
                    anchor,
                    ..Default::default()
                },
                DEFAULT_IMAGE_HANDLE.typed::<Image>(),
            ));
        }
    }
}