From c6e6c519291be333792f0469b205f4522abd1814 Mon Sep 17 00:00:00 2001
From: Daniel Imms <daimms@microsoft.com>
Date: Sun, 23 Dec 2018 10:51:41 -0800
Subject: [PATCH] Use textBaseline middle to draw instead of top

Chrome and Firefox behavior differs, see:
- https://bugzilla.mozilla.org/show_bug.cgi?id=737852
- https://bugs.chromium.org/p/chromium/issues/detail?id=607053

Fixes #1858
---
 src/renderer/BaseRenderLayer.ts          |  8 ++++----
 src/renderer/atlas/CharAtlasGenerator.ts | 10 +++++-----
 src/renderer/atlas/DynamicCharAtlas.ts   |  4 ++--
 3 files changed, 11 insertions(+), 11 deletions(-)

diff --git a/src/renderer/BaseRenderLayer.ts b/src/renderer/BaseRenderLayer.ts
index 2afdebb54e..3e0b864307 100644
--- 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
index e40215cfe8..cadcce2ec1 100644
--- a/src/renderer/atlas/CharAtlasGenerator.ts
+++ b/src/renderer/atlas/CharAtlasGenerator.ts
@@ -29,7 +29,7 @@ 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++) {
@@ -37,7 +37,7 @@ export function generateStaticCharAtlasTexture(context: Window, canvasFactory: (
     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
index 72010768a3..e311c369a3 100644
--- 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