Set text baseline conditionally by browser.

src/browser/renderer/atlas/Constants.ts

@@ -3,7 +3,13 @@
  * @license MIT
  */
 
+import { isFirefox } from 'common/Platform';
+
 export const INVERTED_DEFAULT_COLOR = 257;
 export const DIM_OPACITY = 0.5;
+// The text baseline is set conditionally by browser. Using 'ideographic' for Firefox would
+// result in truncated text (Issue 3353). Using 'bottom' for Chrome would result in slightly
+// unaligned Powerline fonts (PR 3356#issuecomment-850928179).
+export const TEXT_BASELINE: CanvasTextBaseline = isFirefox ? 'bottom' : 'ideographic';
 
 export const CHAR_ATLAS_CELL_SPACING = 1;

src/browser/renderer/atlas/DynamicCharAtlas.ts

@@ -3,7 +3,7 @@
  * @license MIT
  */
 
-import { DIM_OPACITY, INVERTED_DEFAULT_COLOR } from 'browser/renderer/atlas/Constants';
+import { DIM_OPACITY, INVERTED_DEFAULT_COLOR, TEXT_BASELINE } from 'browser/renderer/atlas/Constants';
 import { IGlyphIdentifier, ICharAtlasConfig } from 'browser/renderer/atlas/Types';
 import { BaseCharAtlas } from 'browser/renderer/atlas/BaseCharAtlas';
 import { DEFAULT_ANSI_COLORS } from 'browser/ColorManager';
@@ -266,7 +266,7 @@ export 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 = 'ideographic';
+    this._tmpCtx.textBaseline = TEXT_BASELINE;
 
     this._tmpCtx.fillStyle = this._getForegroundColor(glyph).css;