Merge pull request #1874 from pointlessone/text-decoration-fix

Drawn underline and overline behind text
Kozea · May 11, 2023 · 9b4af6e · 9b4af6e
2 parents 4fc576b + 94714f4
commit 9b4af6e
Show file tree

Hide file tree

Showing 2 changed files with 34 additions and 31 deletions.
diff --git a/tests/draw/test_text.py b/tests/draw/test_text.py
@@ -520,9 +520,9 @@ def test_text_underline(assert_pixels):
     assert_pixels('''
         _____________
         _zzzzzzzzzzz_
-        _zRRRRRRRRRz_
-        _zRRRRRRRRRz_
-        _zBBBBBBBBBz_
+        _zsssssssssz_
+        _zsssssssssz_
+        _zuuuuuuuuuz_
         _zzzzzzzzzzz_
         _____________
     ''', '''
@@ -533,7 +533,7 @@ def test_text_underline(assert_pixels):
           margin: 2px;
         }
         body {
-          color: red;
+          color: rgba(255, 0, 0, 0.5);
           font-family: weasyprint;
           font-size: 3px;
           text-decoration: underline blue;
@@ -601,9 +601,9 @@ def test_text_multiple_text_decoration(assert_pixels):
     assert_pixels('''
         _____________
         _zzzzzzzzzzz_
-        _zRRRRRRRRRz_
-        _zBBBBBBBBBz_
+        _zsssssssssz_
         _zBBBBBBBBBz_
+        _zuuuuuuuuuz_
         _zzzzzzzzzzz_
         _____________
     ''', '''
@@ -614,7 +614,7 @@ def test_text_multiple_text_decoration(assert_pixels):
           margin: 2px;
         }
         body {
-          color: red;
+          color: rgba(255, 0, 0, 0.5);
           font-family: weasyprint;
           font-size: 3px;
           text-decoration: underline line-through blue;
@@ -628,9 +628,9 @@ def test_text_nested_text_decoration(assert_pixels):
     assert_pixels('''
         _____________
         _zzzzzzzzzzz_
-        _zRRRRRRRRRz_
-        _zRRRBBBRRRz_
-        _zBBBBBBBBBz_
+        _zsssssssssz_
+        _zsssBBBsssz_
+        _zuuuuuuuuuz_
         _zzzzzzzzzzz_
         _____________
     ''', '''
@@ -641,7 +641,7 @@ def test_text_nested_text_decoration(assert_pixels):
           margin: 2px;
         }
         body {
-          color: red;
+          color: rgba(255, 0, 0, 0.5);
           font-family: weasyprint;
           font-size: 3px;
           text-decoration: underline blue;

diff --git a/weasyprint/draw.py b/weasyprint/draw.py
@@ -1001,6 +1001,26 @@ def draw_text(stream, textbox, offset_x, text_overflow, block_ellipsis):
     if textbox.style['visibility'] != 'visible':
         return
 
+    text_decoration_values = textbox.style['text_decoration_line']
+    text_decoration_color = textbox.style['text_decoration_color']
+    if text_decoration_color == 'currentColor':
+        text_decoration_color = textbox.style['color']
+    if 'overline' in text_decoration_values:
+        thickness = textbox.pango_layout.underline_thickness
+        offset_y = (
+            textbox.baseline - textbox.pango_layout.ascent + thickness / 2)
+        draw_text_decoration(
+            stream, textbox, offset_x, offset_y, thickness,
+            text_decoration_color)
+    if 'underline' in text_decoration_values:
+        thickness = textbox.pango_layout.underline_thickness
+        offset_y = (
+            textbox.baseline - textbox.pango_layout.underline_position +
+            thickness / 2)
+        draw_text_decoration(
+            stream, textbox, offset_x, offset_y, thickness,
+            text_decoration_color)
+
     x, y = textbox.position_x, textbox.position_y + textbox.baseline
     stream.set_color_rgb(*textbox.style['color'][:3])
     stream.set_alpha(textbox.style['color'][3])
@@ -1013,30 +1033,13 @@ def draw_text(stream, textbox, offset_x, text_overflow, block_ellipsis):
 
     draw_emojis(stream, textbox.style['font_size'], x, y, emojis)
 
-    # Draw text decoration
-    values = textbox.style['text_decoration_line']
-    color = textbox.style['text_decoration_color']
-    if color == 'currentColor':
-        color = textbox.style['color']
-    if 'overline' in values:
-        thickness = textbox.pango_layout.underline_thickness
-        offset_y = (
-            textbox.baseline - textbox.pango_layout.ascent + thickness / 2)
-        draw_text_decoration(
-            stream, textbox, offset_x, offset_y, thickness, color)
-    if 'underline' in values:
-        thickness = textbox.pango_layout.underline_thickness
-        offset_y = (
-            textbox.baseline - textbox.pango_layout.underline_position +
-            thickness / 2)
-        draw_text_decoration(
-            stream, textbox, offset_x, offset_y, thickness, color)
-    if 'line-through' in values:
+    if 'line-through' in text_decoration_values:
         thickness = textbox.pango_layout.strikethrough_thickness
         offset_y = (
             textbox.baseline - textbox.pango_layout.strikethrough_position)
         draw_text_decoration(
-            stream, textbox, offset_x, offset_y, thickness, color)
+            stream, textbox, offset_x, offset_y, thickness,
+            text_decoration_color)
 
     textbox.pango_layout.deactivate()