Merge branch 'master' into webgl2

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();
   }
 

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();
     }
   }

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

src/renderer/dom/DomRenderer.ts

@@ -364,9 +364,11 @@ export class DomRenderer extends EventEmitter implements IRenderer {
         return;
       }
       const span = <HTMLElement>row.children[x];
-      span.style.textDecoration = enabled ? 'underline' : 'none';
-      x = (x + 1) % cols;
-      if (x === 0) {
+      if (span) {
+        span.style.textDecoration = enabled ? 'underline' : 'none';
+      }
+      if (++x >= cols) {
+        x = 0;
         y++;
       }
     }