Skip to content

Commit

Permalink
Fixes monospace font overlapping in terminal+linux
Browse files Browse the repository at this point in the history
- Also fixes actually using Roboto-Mono, xterm.js now only accepts
  fontFamily customization via the JS api. (uses `<canvas`).
- There is an issue (xtermjs/xterm.js#1170)
  if linux has to fall back to 'monospace' where things fail to render
  correctly, so provide a couple of common options so this rarely
  happens.
- If we distribute robo-mono in the webpack bundle that might also work.
  • Loading branch information
foot committed Jul 2, 2018
1 parent 70d4d3f commit 7a04740
Showing 1 changed file with 9 additions and 0 deletions.
9 changes: 9 additions & 0 deletions client/app/scripts/components/terminal.js
Original file line number Diff line number Diff line change
Expand Up @@ -146,6 +146,15 @@ class Terminal extends React.Component {
mountTerminal() {
Term.applyAddon(fit);
this.term = new Term({
//
// Some linux systems fail to render 'monospace' on `<canvas>` correctly:
// https://github.com/xtermjs/xterm.js/issues/1170
// `theme.fontFamilies.monospace` doesn't provide many options so we add
// some here that are very common. The alternative _might_ be to bundle Roboto-Mono
//
fontFamily: '"Roboto Mono", "Courier New", "Courier", monospace',
// `theme.fontSizes.tiny` (`"12px"`) is a string and we need an int here.
fontSize: 12,
convertEol: !this.props.pipe.get('raw'),
cursorBlink: true,
scrollback: 10000,
Expand Down

0 comments on commit 7a04740

Please sign in to comment.