Text underline (#21559)

# Objective

Text Underline

## Solution

New `Underline` marker component, add to text entities to draw an
underline.
This PR is based on #21555, that should probably be reviewed and merged
first.

Author: ickshonpe

crates/bevy_sprite_render/src/text2d/mod.rs

@@ -6,7 +6,7 @@ use bevy_camera::visibility::ViewVisibility;
 use bevy_color::LinearRgba;
 use bevy_ecs::{
     entity::Entity,
-    query::With,
+    query::Has,
     system::{Commands, Query, Res, ResMut},
 };
 use bevy_image::prelude::*;
@@ -16,7 +16,7 @@ use bevy_render::Extract;
 use bevy_sprite::{Anchor, Text2dShadow};
 use bevy_text::{
     ComputedTextBlock, PositionedGlyph, Strikethrough, TextBackgroundColor, TextBounds, TextColor,
-    TextLayoutInfo,
+    TextLayoutInfo, Underline,
 };
 use bevy_transform::prelude::GlobalTransform;
 
@@ -41,7 +41,7 @@ pub fn extract_text2d_sprite(
     >,
     text_colors: Extract<Query<&TextColor>>,
     text_background_colors_query: Extract<Query<&TextBackgroundColor>>,
-    strikethrough_query: Extract<Query<&TextColor, With<Strikethrough>>>,
+    decoration_query: Extract<Query<(&TextColor, Has<Strikethrough>, Has<Underline>)>>,
 ) {
     let mut start = extracted_slices.slices.len();
     let mut end = start + 1;
@@ -71,7 +71,7 @@ pub fn extract_text2d_sprite(
 
         let top_left = (Anchor::TOP_LEFT.0 - anchor.as_vec()) * size;
 
-        for &(section_index, rect, _, _) in text_layout_info.section_geometry.iter() {
+        for &(section_index, rect, _, _, _) in text_layout_info.section_geometry.iter() {
             let section_entity = computed_block.entities()[section_index].entity;
             let Ok(text_background_color) = text_background_colors_query.get(section_entity) else {
                 continue;
@@ -149,32 +149,59 @@ pub fn extract_text2d_sprite(
                 end += 1;
             }
 
-            for &(section_index, rect, strikethrough_y, stroke) in
+            for &(section_index, rect, strikethrough_y, stroke, underline_y) in
                 text_layout_info.section_geometry.iter()
             {
                 let section_entity = computed_block.entities()[section_index].entity;
-                let Ok(_) = strikethrough_query.get(section_entity) else {
+                let Ok((_, has_strikethrough, has_underline)) =
+                    decoration_query.get(section_entity)
+                else {
                     continue;
                 };
-                let render_entity = commands.spawn(TemporaryRenderEntity).id();
-                let offset = Vec2::new(rect.center().x, -strikethrough_y - 0.5 * stroke);
-                let transform =
-                    shadow_transform * GlobalTransform::from_translation(offset.extend(0.));
-                extracted_sprites.sprites.push(ExtractedSprite {
-                    main_entity,
-                    render_entity,
-                    transform,
-                    color,
-                    image_handle_id: AssetId::default(),
-                    flip_x: false,
-                    flip_y: false,
-                    kind: ExtractedSpriteKind::Single {
-                        anchor: Vec2::ZERO,
-                        rect: None,
-                        scaling_mode: None,
-                        custom_size: Some(Vec2::new(rect.size().x, stroke)),
-                    },
-                });
+
+                if has_strikethrough {
+                    let render_entity = commands.spawn(TemporaryRenderEntity).id();
+                    let offset = Vec2::new(rect.center().x, -strikethrough_y - 0.5 * stroke);
+                    let transform =
+                        shadow_transform * GlobalTransform::from_translation(offset.extend(0.));
+                    extracted_sprites.sprites.push(ExtractedSprite {
+                        main_entity,
+                        render_entity,
+                        transform,
+                        color,
+                        image_handle_id: AssetId::default(),
+                        flip_x: false,
+                        flip_y: false,
+                        kind: ExtractedSpriteKind::Single {
+                            anchor: Vec2::ZERO,
+                            rect: None,
+                            scaling_mode: None,
+                            custom_size: Some(Vec2::new(rect.size().x, stroke)),
+                        },
+                    });
+                }
+
+                if has_underline {
+                    let render_entity = commands.spawn(TemporaryRenderEntity).id();
+                    let offset = Vec2::new(rect.center().x, -underline_y - 0.5 * stroke);
+                    let transform =
+                        shadow_transform * GlobalTransform::from_translation(offset.extend(0.));
+                    extracted_sprites.sprites.push(ExtractedSprite {
+                        main_entity,
+                        render_entity,
+                        transform,
+                        color,
+                        image_handle_id: AssetId::default(),
+                        flip_x: false,
+                        flip_y: false,
+                        kind: ExtractedSpriteKind::Single {
+                            anchor: Vec2::ZERO,
+                            rect: None,
+                            scaling_mode: None,
+                            custom_size: Some(Vec2::new(rect.size().x, stroke)),
+                        },
+                    });
+                }
             }
         }
 
@@ -239,34 +266,62 @@ pub fn extract_text2d_sprite(
             end += 1;
         }
 
-        for &(section_index, rect, strikethrough_y, stroke) in
+        for &(section_index, rect, strikethrough_y, stroke, underline_y) in
             text_layout_info.section_geometry.iter()
         {
             let section_entity = computed_block.entities()[section_index].entity;
-            let Ok(text_color) = strikethrough_query.get(section_entity) else {
+            let Ok((text_color, has_strike_through, has_underline)) =
+                decoration_query.get(section_entity)
+            else {
                 continue;
             };
-            let render_entity = commands.spawn(TemporaryRenderEntity).id();
-            let offset = Vec2::new(rect.center().x, -strikethrough_y - 0.5 * stroke);
-            let transform = *global_transform
-                * GlobalTransform::from_translation(top_left.extend(0.))
-                * scaling
-                * GlobalTransform::from_translation(offset.extend(0.));
-            extracted_sprites.sprites.push(ExtractedSprite {
-                main_entity,
-                render_entity,
-                transform,
-                color: text_color.0.into(),
-                image_handle_id: AssetId::default(),
-                flip_x: false,
-                flip_y: false,
-                kind: ExtractedSpriteKind::Single {
-                    anchor: Vec2::ZERO,
-                    rect: None,
-                    scaling_mode: None,
-                    custom_size: Some(Vec2::new(rect.size().x, stroke)),
-                },
-            });
+            if has_strike_through {
+                let render_entity = commands.spawn(TemporaryRenderEntity).id();
+                let offset = Vec2::new(rect.center().x, -strikethrough_y - 0.5 * stroke);
+                let transform = *global_transform
+                    * GlobalTransform::from_translation(top_left.extend(0.))
+                    * scaling
+                    * GlobalTransform::from_translation(offset.extend(0.));
+                extracted_sprites.sprites.push(ExtractedSprite {
+                    main_entity,
+                    render_entity,
+                    transform,
+                    color: text_color.0.into(),
+                    image_handle_id: AssetId::default(),
+                    flip_x: false,
+                    flip_y: false,
+                    kind: ExtractedSpriteKind::Single {
+                        anchor: Vec2::ZERO,
+                        rect: None,
+                        scaling_mode: None,
+                        custom_size: Some(Vec2::new(rect.size().x, stroke)),
+                    },
+                });
+            }
+
+            if has_underline {
+                let render_entity = commands.spawn(TemporaryRenderEntity).id();
+                let offset = Vec2::new(rect.center().x, -underline_y - 0.5 * stroke);
+                let transform = *global_transform
+                    * GlobalTransform::from_translation(top_left.extend(0.))
+                    * scaling
+                    * GlobalTransform::from_translation(offset.extend(0.));
+                extracted_sprites.sprites.push(ExtractedSprite {
+                    main_entity,
+                    render_entity,
+                    transform,
+                    color: text_color.0.into(),
+                    image_handle_id: AssetId::default(),
+                    flip_x: false,
+                    flip_y: false,
+                    kind: ExtractedSpriteKind::Single {
+                        anchor: Vec2::ZERO,
+                        rect: None,
+                        scaling_mode: None,
+                        custom_size: Some(Vec2::new(rect.size().x, stroke)),
+                    },
+                });
+            }
         }
     }
 }

crates/bevy_text/src/lib.rs

@@ -60,7 +60,7 @@ pub mod prelude {
     #[doc(hidden)]
     pub use crate::{
         Font, Justify, LineBreak, Strikethrough, TextColor, TextError, TextFont, TextLayout,
-        TextSpan,
+        TextSpan, Underline,
     };
 }
 

crates/bevy_text/src/pipeline.rs

@@ -77,7 +77,7 @@ pub struct TextPipeline {
     /// See [this dark magic](https://users.rust-lang.org/t/how-to-cache-a-vectors-capacity/94478/10).
     spans_buffer: Vec<(usize, &'static str, &'static TextFont, FontFaceInfo)>,
     /// Buffered vec for collecting info for glyph assembly.
-    glyph_info: Vec<(AssetId<Font>, FontSmoothing, f32, f32, f32)>,
+    glyph_info: Vec<(AssetId<Font>, FontSmoothing, f32, f32, f32, f32)>,
 }
 
 impl TextPipeline {
@@ -254,6 +254,7 @@ impl TextPipeline {
                 text_font.font_size,
                 0.,
                 0.,
+                0.,
             ));
         });
 
@@ -272,7 +273,9 @@ impl TextPipeline {
 
         update_result?;
 
-        for (font, _, size, strike_offset, stroke) in self.glyph_info.iter_mut() {
+        for (font, _, size, strikethrough_offset, stroke, underline_offset) in
+            self.glyph_info.iter_mut()
+        {
             let Some((id, _)) = self.map_handle_to_font_id.get(font) else {
                 continue;
             };
@@ -281,8 +284,9 @@ impl TextPipeline {
                 let metrics = swash.metrics(&[]);
                 let upem = metrics.units_per_em as f32;
                 let scalar = *size * scale_factor as f32 / upem;
-                *strike_offset = (metrics.strikeout_offset * scalar).round();
+                *strikethrough_offset = (metrics.strikeout_offset * scalar).round();
                 *stroke = (metrics.stroke_size * scalar).round().max(1.);
+                *underline_offset = (metrics.underline_offset * scalar).round();
             }
         }
 
@@ -311,6 +315,7 @@ impl TextPipeline {
                                     ),
                                     (run.line_y - self.glyph_info[section].3).round(),
                                     self.glyph_info[section].4,
+                                    (run.line_y - self.glyph_info[section].5).round(),
                                 ));
                                 start = end.max(layout_glyph.x);
                                 current_section = Some(layout_glyph.metadata);
@@ -401,6 +406,7 @@ impl TextPipeline {
                     Rect::new(start, run.line_top, end, run.line_top + run.line_height),
                     (run.line_y - self.glyph_info[section].3).round(),
                     self.glyph_info[section].4,
+                    (run.line_y - self.glyph_info[section].5).round(),
                 ));
             }
 
@@ -481,9 +487,9 @@ pub struct TextLayoutInfo {
     pub scale_factor: f32,
     /// Scaled and positioned glyphs in screenspace
     pub glyphs: Vec<PositionedGlyph>,
-    /// Geometry of each text segment: (section index, bounding rect, strikeout offset, strikeout stroke thickness)
+    /// Geometry of each text segment: (section index, bounding rect, strikethrough offset, stroke thickness, underline offset)
     /// A text section spanning more than one line will have multiple segments.
-    pub section_geometry: Vec<(usize, Rect, f32, f32)>,
+    pub section_geometry: Vec<(usize, Rect, f32, f32, f32)>,
     /// The glyphs resulting size
     pub size: Vec2,
 }

crates/bevy_text/src/text.rs

@@ -430,6 +430,11 @@ pub enum LineBreak {
 #[reflect(Serialize, Deserialize, Clone, Default)]
 pub struct Strikethrough;
 
+/// Add to a text entity to draw its text with underline.
+#[derive(Component, Copy, Clone, Debug, Reflect, Default, Serialize, Deserialize)]
+#[reflect(Serialize, Deserialize, Clone, Default)]
+pub struct Underline;
+
 /// Determines which antialiasing method to use when rendering text. By default, text is
 /// rendered with grayscale antialiasing, but this can be changed to achieve a pixelated look.
 ///