Merge pull request #1859 from Tyriar/baseline

Fix text being top aligned in latest Chrome and Firefox
xtermjs · Jan 2, 2019 · 29ff74e · 29ff74e
2 parents 7a579a3 + c66a24f
commit 29ff74e
Show file tree

Hide file tree

Showing 3 changed files with 11 additions and 11 deletions.
diff --git a/src/renderer/BaseRenderLayer.ts b/src/renderer/BaseRenderLayer.ts
@@ -236,12 +236,12 @@ export abstract class BaseRenderLayer implements IRenderLayer {
    */
   protected fillCharTrueColor(terminal: ITerminal, charData: CharData, x: number, y: number): void {
     this._ctx.font = this._getFont(terminal, false, false);
-    this._ctx.textBaseline = 'top';
+    this._ctx.textBaseline = 'middle';
     this._clipRow(terminal, y);
     this._ctx.fillText(
         charData[CHAR_DATA_CHAR_INDEX],
         x * this._scaledCellWidth + this._scaledCharLeft,
-        y * this._scaledCellHeight + this._scaledCharTop);
+        (y + 0.5) * this._scaledCellHeight + this._scaledCharTop);
   }
 
   /**
@@ -295,7 +295,7 @@ export abstract class BaseRenderLayer implements IRenderLayer {
   private _drawUncachedChars(terminal: ITerminal, chars: string, width: number, fg: number, x: number, y: number, bold: boolean, dim: boolean, italic: boolean): void {
     this._ctx.save();
     this._ctx.font = this._getFont(terminal, bold, italic);
-    this._ctx.textBaseline = 'top';
+    this._ctx.textBaseline = 'middle';
 
     if (fg === INVERTED_DEFAULT_COLOR) {
       this._ctx.fillStyle = this._colors.background.css;
@@ -316,7 +316,7 @@ export abstract class BaseRenderLayer implements IRenderLayer {
     this._ctx.fillText(
         chars,
         x * this._scaledCellWidth + this._scaledCharLeft,
-        y * this._scaledCellHeight + this._scaledCharTop);
+        (y + 0.5) * this._scaledCellHeight + this._scaledCharTop);
     this._ctx.restore();
   }
 

diff --git a/src/renderer/atlas/CharAtlasGenerator.ts b/src/renderer/atlas/CharAtlasGenerator.ts
@@ -29,15 +29,15 @@ export function generateStaticCharAtlasTexture(context: Window, canvasFactory: (
   ctx.save();
   ctx.fillStyle = config.colors.foreground.css;
   ctx.font = getFont(config.fontWeight, config);
-  ctx.textBaseline = 'top';
+  ctx.textBaseline = 'middle';
 
   // Default color
   for (let i = 0; i < 256; i++) {
     ctx.save();
     ctx.beginPath();
     ctx.rect(i * cellWidth, 0, cellWidth, cellHeight);
     ctx.clip();
-    ctx.fillText(String.fromCharCode(i), i * cellWidth, 0);
+    ctx.fillText(String.fromCharCode(i), i * cellWidth, cellHeight / 2);
     ctx.restore();
   }
   // Default color bold
@@ -48,7 +48,7 @@ export function generateStaticCharAtlasTexture(context: Window, canvasFactory: (
     ctx.beginPath();
     ctx.rect(i * cellWidth, cellHeight, cellWidth, cellHeight);
     ctx.clip();
-    ctx.fillText(String.fromCharCode(i), i * cellWidth, cellHeight);
+    ctx.fillText(String.fromCharCode(i), i * cellWidth, cellHeight * 1.5);
     ctx.restore();
   }
   ctx.restore();
@@ -64,7 +64,7 @@ export function generateStaticCharAtlasTexture(context: Window, canvasFactory: (
       ctx.rect(i * cellWidth, y, cellWidth, cellHeight);
       ctx.clip();
       ctx.fillStyle = config.colors.ansi[colorIndex].css;
-      ctx.fillText(String.fromCharCode(i), i * cellWidth, y);
+      ctx.fillText(String.fromCharCode(i), i * cellWidth, y + cellHeight / 2);
       ctx.restore();
     }
   }
@@ -80,7 +80,7 @@ export function generateStaticCharAtlasTexture(context: Window, canvasFactory: (
       ctx.rect(i * cellWidth, y, cellWidth, cellHeight);
       ctx.clip();
       ctx.fillStyle = config.colors.ansi[colorIndex].css;
-      ctx.fillText(String.fromCharCode(i), i * cellWidth, y);
+      ctx.fillText(String.fromCharCode(i), i * cellWidth, y + cellHeight / 2);
       ctx.restore();
     }
   }

diff --git a/src/renderer/atlas/DynamicCharAtlas.ts b/src/renderer/atlas/DynamicCharAtlas.ts
@@ -250,7 +250,7 @@ export default class DynamicCharAtlas extends BaseCharAtlas {
     const fontStyle = glyph.italic ? 'italic' : '';
     this._tmpCtx.font =
       `${fontStyle} ${fontWeight} ${this._config.fontSize * this._config.devicePixelRatio}px ${this._config.fontFamily}`;
-    this._tmpCtx.textBaseline = 'top';
+    this._tmpCtx.textBaseline = 'middle';
 
     this._tmpCtx.fillStyle = this._getForegroundColor(glyph).css;
 
@@ -259,7 +259,7 @@ export default class DynamicCharAtlas extends BaseCharAtlas {
       this._tmpCtx.globalAlpha = DIM_OPACITY;
     }
     // Draw the character
-    this._tmpCtx.fillText(glyph.chars, 0, 0);
+    this._tmpCtx.fillText(glyph.chars, 0, this._config.scaledCharHeight / 2);
     this._tmpCtx.restore();
 
     // clear the background from the character to avoid issues with drawing over the previous