Only draw character outline if it has a descent

Fixes #4059
xtermjs · Aug 26, 2022 · 7ffd9e1 · 7ffd9e1
1 parent 4979e9d
commit 7ffd9e1
Showing 1 changed file with 18 additions and 10 deletions.
diff --git a/addons/xterm-addon-webgl/src/atlas/WebglCharAtlas.ts b/addons/xterm-addon-webgl/src/atlas/WebglCharAtlas.ts
@@ -533,18 +533,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();
+          }
         }
       }
     }