Merge pull request xtermjs#4074 from Tyriar/4059

Only draw character outline if it has a descent
Tyriar · Aug 26, 2022 · 2526409 · 2526409
2 parents 8bbbc98 + 7ffd9e1
commit 2526409
Show file tree

Hide file tree

Showing 2 changed files with 35 additions and 16 deletions.
diff --git a/addons/xterm-addon-webgl/src/atlas/WebglCharAtlas.ts b/addons/xterm-addon-webgl/src/atlas/WebglCharAtlas.ts
@@ -534,18 +534,26 @@ export class WebglCharAtlas implements IDisposable {
         // This only works when transparency is disabled because it's not clear how to clear stroked
         // text
         if (!this._config.allowTransparency && chars !== ' ') {
-          // This translates to 1/2 the line width in either direction
+          // Measure the text, only draw the stroke if there is a descent beyond an alphabetic text
+          // baseline
           this._tmpCtx.save();
-          // Clip the region to only draw in valid pixels near the underline to avoid a slight
-          // outline around the whole glyph, as well as additional pixels in the glyph at the top
-          // which would increase GPU memory demands
-          const clipRegion = new Path2D();
-          clipRegion.rect(xLeft, yTop - Math.ceil(lineWidth / 2), this._config.scaledCellWidth, yBot - yTop + Math.ceil(lineWidth / 2));
-          this._tmpCtx.clip(clipRegion);
-          this._tmpCtx.lineWidth = window.devicePixelRatio * 3;
-          this._tmpCtx.strokeStyle = backgroundColor.css;
-          this._tmpCtx.strokeText(chars, padding, padding + this._config.scaledCharHeight);
+          this._tmpCtx.textBaseline = 'alphabetic';
+          const metrics = this._tmpCtx.measureText(chars);
           this._tmpCtx.restore();
+          if ('actualBoundingBoxDescent' in metrics && metrics.actualBoundingBoxDescent > 0) {
+            // This translates to 1/2 the line width in either direction
+            this._tmpCtx.save();
+            // Clip the region to only draw in valid pixels near the underline to avoid a slight
+            // outline around the whole glyph, as well as additional pixels in the glyph at the top
+            // which would increase GPU memory demands
+            const clipRegion = new Path2D();
+            clipRegion.rect(xLeft, yTop - Math.ceil(lineWidth / 2), this._config.scaledCellWidth, yBot - yTop + Math.ceil(lineWidth / 2));
+            this._tmpCtx.clip(clipRegion);
+            this._tmpCtx.lineWidth = window.devicePixelRatio * 3;
+            this._tmpCtx.strokeStyle = backgroundColor.css;
+            this._tmpCtx.strokeText(chars, padding, padding + this._config.scaledCharHeight);
+            this._tmpCtx.restore();
+          }
         }
       }
     }

diff --git a/demo/client.ts b/demo/client.ts
@@ -766,12 +766,23 @@ function underlineTest() {
   term.write('\n\n\r');
   term.writeln('Underline styles:');
   term.writeln('');
-  term.writeln(`${u(0)}4:0m - No underline`);
-  term.writeln(`${u(1)}4:1m - Straight`);
-  term.writeln(`${u(2)}4:2m - Double`);
-  term.writeln(`${u(3)}4:3m - Curly`);
-  term.writeln(`${u(4)}4:4m - Dotted`);
-  term.writeln(`${u(5)}4:5m - Dashed\x1b[0m`);
+  function showSequence(id: number, name: string) {
+    let alphabet = '';
+    for (let i = 97; i < 123; i++) {
+      alphabet += String.fromCharCode(i);
+    }
+    let numbers = '';
+    for (let i = 0; i < 10; i++) {
+      numbers += i.toString();
+    }
+    return `${u(id)}4:${id}m - ${name}\x1b[4:0m`.padEnd(33, ' ') + `${u(id)}${alphabet} ${numbers}\x1b[4:0m`;
+  }
+  term.writeln(showSequence(0, 'No underline'));
+  term.writeln(showSequence(1, 'Straight'));
+  term.writeln(showSequence(2, 'Double'));
+  term.writeln(showSequence(3, 'Curly'));
+  term.writeln(showSequence(4, 'Dotted'));
+  term.writeln(showSequence(5, 'Dashed'));
   term.writeln('');
   term.writeln(`Underline colors (256 color mode):`);
   term.writeln('');