gpui: Fix `line_through`, `underline` position when used text center or right (#24721)

Jason Lee created 9 months ago

Release Notes:

- N/A

---

| Before | After |
| --- | --- |
| <img width="912" alt="image"
src="https://github.com/user-attachments/assets/0640ac85-ee5d-4707-b866-997e36608c18"
/> | <img width="912" alt="image"
src="https://github.com/user-attachments/assets/caf84477-a7bc-4c22-a9e6-f44c3b6f86ef"
/> |
 
And fix the `line_through` doc link.

Change summary

crates/gpui/examples/text_layout.rs | 28 +++++++++++++++++++++++++++-
crates/gpui/src/styled.rs           |  4 ++--
crates/gpui/src/text_system/line.rs |  2 +-
3 files changed, 30 insertions(+), 4 deletions(-)

Detailed changes

crates/gpui/examples/text_layout.rs

@@ -11,12 +11,38 @@ impl Render for HelloWorld {
             .bg(gpui::white())
             .flex()
             .flex_col()
-            .gap_3()
+            .gap_2()
             .p_4()
             .size_full()
             .child(div().child("Text left"))
             .child(div().text_center().child("Text center"))
             .child(div().text_right().child("Text right"))
+            .child(div().text_decoration_1().child("Text left (underline)"))
+            .child(
+                div()
+                    .text_center()
+                    .text_decoration_1()
+                    .child("Text center (underline)"),
+            )
+            .child(
+                div()
+                    .text_right()
+                    .text_decoration_1()
+                    .child("Text right (underline)"),
+            )
+            .child(div().line_through().child("Text left (line_through)"))
+            .child(
+                div()
+                    .text_center()
+                    .line_through()
+                    .child("Text center (line_through)"),
+            )
+            .child(
+                div()
+                    .text_right()
+                    .line_through()
+                    .child("Text right (line_through)"),
+            )
             .child(
                 div()
                     .flex()

crates/gpui/src/styled.rs

@@ -478,7 +478,7 @@ pub trait Styled: Sized {
     }
 
     /// Sets the font style of the element to normal (not italic).
-    /// [Docs](https://tailwindcss.com/docs/font-style#italicizing-text)
+    /// [Docs](https://tailwindcss.com/docs/font-style#displaying-text-normally)
     fn not_italic(mut self) -> Self {
         self.text_style()
             .get_or_insert_with(Default::default)
@@ -498,7 +498,7 @@ pub trait Styled: Sized {
     }
 
     /// Sets the decoration of the text to have a line through it.
-    /// [Docs](https://tailwindcss.com/docs/text-decoration#setting-the-text-decoration)
+    /// [Docs](https://tailwindcss.com/docs/text-decoration-line#adding-a-line-through-text)
     fn line_through(mut self) -> Self {
         let style = self.text_style().get_or_insert_with(Default::default);
         style.strikethrough = Some(StrikethroughStyle {

crates/gpui/src/text_system/line.rs

@@ -355,7 +355,7 @@ fn paint_line(
             }
         }
 
-        let mut last_line_end_x = origin.x + layout.width;
+        let mut last_line_end_x = glyph_origin.x;
         if let Some(boundary) = wrap_boundaries.last() {
             let run = &layout.runs[boundary.run_ix];
             let glyph = &run.glyphs[boundary.glyph_ix];