Draw an overline as thick as the font's underline (#741)

CHANGELOG-GRAVITYPDF.md

@@ -271,6 +271,7 @@ Bugfixes
 * `text-outline-width` with no `text-outline-color` raised an undefined-key warning (`outline-COLOR`) and drew the outline black. The warning is gone in either `cssMode`. In standard mode the outline is now drawn in the colour of the text, as `text-outline-color` is `currentColor` by default, and `text-outline` with a width alone, such as `text-outline: 0.2mm`, which was ignored, outlines the text in its colour too. A text outline in `currentColor`, written or by default, is passed on as the keyword, so a `<span>` of another colour inside the outlined text is outlined in its own colour. Set `'cssMode' => \Mpdf\CssMode::LEGACY` to keep black outlines and to ignore that shorthand. [#552] [#650] [#681]
 * A percentage `border-radius` on a block, such as `border-radius: 50%` on a box 40 mm by 12 mm, drew a pill instead of an ellipse. Both radii were taken of the width of the block around it, and then shrunk to fit. A percentage is now of the block's own border box, as in CSS: a horizontal radius of its width and a vertical one of its height, so `50%` draws an ellipse and `10%` a corner a tenth of each side. A block split across pages resolves a vertical percentage against the height of the part on each page. With `autoPadding` on, a percentage radius no longer adds padding, since the box is not known when the padding is set. In both `cssMode`s. [#552] [#586]
 * `list-style: U+2022`, the shorthand, numbered the list where `list-style-type: U+2022` drew a bullet. The shorthand dropped the `U+` from the marker it set. It now keeps it, so the shorthand draws the character as the longhand does, in either `cssMode`. [#552] [#746] [#755]
+* `text-decoration: overline` was drawn heavier than an underline on the same text, 2.4 pt against 1.76 pt at 40pt in DejaVu Serif Condensed. The overline is now as thick as the font's underline, sits at the font's cap height rather than a fixed 700/1000 em, and in a table shrunk to fit is thinned and placed with its text. In either `cssMode`. [#741]
 
 ### Images and SVG
 
@@ -971,4 +972,5 @@ These changes do not change output.
 [#746]: https://github.com/GravityPDF/mpdf/issues/746
 [#755]: https://github.com/GravityPDF/mpdf/pull/755
 [#743]: https://github.com/GravityPDF/mpdf/issues/743
+[#741]: https://github.com/GravityPDF/mpdf/issues/741
 [#748]: https://github.com/GravityPDF/mpdf/issues/748

src/Mpdf.php

@@ -6265,8 +6265,8 @@ function Cell($w, $h = 0, $txt = '', $border = 0, $ln = 0, $align = '', $fill =
 				}
 
 				// mPDF 5.7.3  inline text-decoration parameters
-				$decorationfontkey = (int) (((float) $this->textparam['o-decoration']['fontkey']) / $shrin_k);
-				$decorationfontsize = $this->textparam['o-decoration']['fontsize'];
+				$decorationfontkey = $this->textparam['o-decoration']['fontkey'];
+				$decorationfontsize = $this->textparam['o-decoration']['fontsize'] / $shrin_k;
 
 				if (isset($this->fonts[$decorationfontkey]['ut']) && $this->fonts[$decorationfontkey]['ut']) {
 					$ut = $this->fonts[$decorationfontkey]['ut'] / 1000 * $decorationfontsize;

tests/Mpdf/OverlineThicknessTest.php

@@ -0,0 +1,86 @@
+<?php
+
+namespace Mpdf;
+
+use Yoast\PHPUnitPolyfills\TestCases\TestCase;
+
+/**
+ * An overline takes the font's underline thickness, so it matches the underline on the same text, and a table shrunk
+ * to fit thins it with its text
+ */
+class OverlineThicknessTest extends TestCase
+{
+
+	use DrawnStyles;
+	use PageStreams;
+
+	/**
+	 * Each CSS mode, crossed with a TrueType font and a core font
+	 *
+	 * @return array[]
+	 */
+	public function modesAndFonts()
+	{
+		$cases = [];
+		foreach (array_keys($this->modes()) as $mode) {
+			$cases[$mode . ', DejaVu Serif Condensed'] = [$mode, ['mode' => '', 'default_font' => 'dejavuserifcondensed'], 1.76];
+			$cases[$mode . ', core Times'] = [$mode, ['mode' => 'c', 'default_font' => 'times'], 2.0];
+		}
+
+		return $cases;
+	}
+
+	/**
+	 * At 40pt an overline and an underline are both drawn at the font's underline thickness, in either CSS mode
+	 *
+	 * @dataProvider modesAndFonts
+	 *
+	 * @param string $mode
+	 * @param array $font
+	 * @param float $points The font's underline thickness at 40pt
+	 */
+	public function testAnOverlineIsAsThickAsTheFontsUnderline($mode, array $font, $points)
+	{
+		$widths = $this->lineWidths(
+			'<p style="font-size: 40pt; text-decoration: overline">Decorated</p><p style="font-size: 40pt; text-decoration: underline">Decorated</p>',
+			$font + ['cssMode' => $mode]
+		);
+
+		$this->assertSame([$points, $points], $widths);
+	}
+
+	/**
+	 * In a table shrunk to fit, the overline is thinned with the text to the width of the underline beside it
+	 *
+	 * @dataProvider modes
+	 *
+	 * @param string $mode
+	 */
+	public function testAnOverlineIsShrunkWithItsTable($mode)
+	{
+		$widths = $this->lineWidths(
+			'<table style="width: 50mm" autosize="4"><tr><td style="font-size: 40pt; text-decoration: underline overline">DecoratedDecoratedDecorated</td></tr></table>',
+			['mode' => '', 'default_font' => 'dejavuserifcondensed', 'cssMode' => $mode]
+		);
+
+		$this->assertCount(2, $widths);
+		$this->assertLessThan(1.76, $widths[0]);
+		$this->assertSame($widths[0], $widths[1]);
+	}
+
+	/**
+	 * The line widths, in points, a document sets for its text decorations, in the order they are drawn
+	 *
+	 * @param string $html
+	 * @param array $config
+	 *
+	 * @return float[]
+	 */
+	private function lineWidths($html, array $config)
+	{
+		preg_match_all('/([\d.]+) w 0 j 0 J/', implode("\n", $this->pages($this->render($html, $config))), $matches);
+
+		return array_map('floatval', $matches[1]);
+	}
+
+}

tests/Snapshots/OverlineThicknessSnapshotTest.php

@@ -0,0 +1,57 @@
+<?php
+
+namespace Snapshots;
+
+/**
+ * An overline is drawn at the thickness the font gives its underline, so the two lines over and under the same text
+ * match, and a table shrunk to fit thins its overline with its text
+ *
+ * @group snapshot
+ */
+class OverlineThicknessSnapshotTest extends Snapshot
+{
+
+	/**
+	 * The fixture's name
+	 *
+	 * @return string
+	 */
+	public function getId()
+	{
+		return 'overline-thickness';
+	}
+
+	/**
+	 * Large text in two fonts with an underline, an overline and both, each under a caption saying how thick its lines
+	 * should be, and a table shrunk to fit with both lines
+	 */
+	public function generatePdf()
+	{
+		$html = '<style>
+			body { font-size: 9pt; }
+			h1 { font-size: 13pt; margin: 0 0 2mm 0; }
+			p.caption { margin: 3mm 0 0 0; }
+			div.sample { font-size: 40pt; margin: 0; }
+		</style>
+		<h1>text-decoration: overline thickness</h1>';
+
+		foreach (['DejaVu Serif Condensed' => 'dejavuserifcondensed', 'DejaVu Sans Condensed' => 'dejavusanscondensed'] as $name => $family) {
+			$html .= '<p class="caption">' . $name . ', underline: a line under the text.</p>
+			<div class="sample" style="font-family: ' . $family . '; text-decoration: underline">Decorated</div>
+			<p class="caption">' . $name . ', overline: a line over the text, as thick as the underline above.</p>
+			<div class="sample" style="font-family: ' . $family . '; text-decoration: overline">Decorated</div>
+			<p class="caption">' . $name . ', underline overline: the two lines the same thickness.</p>
+			<div class="sample" style="font-family: ' . $family . '; text-decoration: underline overline">Decorated</div>';
+		}
+
+		$html .= '<p class="caption">A table shrunk to fit the page: the line over the text as thin as the line under it.</p>
+		<table autosize="4"><tr>
+			<td style="font-size: 40pt; text-decoration: underline overline">DecoratedDecoratedDecoratedDecorated</td>
+		</tr></table>';
+
+		$this->mpdf = $this->createMpdf();
+
+		$this->mpdf->WriteHTML($html);
+	}
+
+}