diff --git a/app/config/config-default.js b/app/config/config-default.js index 02c17d46..7d3ce319 100644 --- a/app/config/config-default.js +++ b/app/config/config-default.js @@ -23,6 +23,9 @@ module.exports = { // line height as a relative unit lineHeight: 1, + // letter spacing as a relative unit + letterSpacing: 0, + // terminal cursor background color and opacity (hex, rgb, hsl, hsv, hwb or cmyk) cursorColor: 'rgba(248,28,229,0.8)', diff --git a/lib/components/term-group.js b/lib/components/term-group.js index f4b10b51..38f67c8d 100644 --- a/lib/components/term-group.js +++ b/lib/components/term-group.js @@ -72,6 +72,7 @@ class TermGroup_ extends React.PureComponent { fontWeight: this.props.fontWeight, fontWeightBold: this.props.fontWeightBold, lineHeight: this.props.lineHeight, + letterSpacing: this.props.letterSpacing, modifierKeys: this.props.modifierKeys, padding: this.props.padding, url: session.url, diff --git a/lib/components/term.js b/lib/components/term.js index 4064960e..1bed36b5 100644 --- a/lib/components/term.js +++ b/lib/components/term.js @@ -33,6 +33,7 @@ const getTermOptions = props => { fontWeight: props.fontWeight, fontWeightBold: props.fontWeightBold, lineHeight: props.lineHeight, + letterSpacing: props.letterSpacing, allowTransparency: needTransparency, experimentalCharAtlas: 'dynamic', theme: { @@ -267,7 +268,8 @@ export default class Term extends React.PureComponent { if ( this.props.fontSize !== nextProps.fontSize || this.props.fontFamily !== nextProps.fontFamily || - this.props.lineHeight !== nextProps.lineHeight + this.props.lineHeight !== nextProps.lineHeight || + this.props.letterSpacing !== nextProps.letterSpacing ) { // invalidate xterm cache about how wide each // character is diff --git a/lib/components/terms.js b/lib/components/terms.js index 65620b21..66bd8361 100644 --- a/lib/components/terms.js +++ b/lib/components/terms.js @@ -102,6 +102,7 @@ export default class Terms extends React.Component { fontWeight: this.props.fontWeight, fontWeightBold: this.props.fontWeightBold, lineHeight: this.props.lineHeight, + letterSpacing: this.props.letterSpacing, padding: this.props.padding, bell: this.props.bell, bellSoundURL: this.props.bellSoundURL, diff --git a/lib/containers/terms.js b/lib/containers/terms.js index bc1677ab..ffe49f52 100644 --- a/lib/containers/terms.js +++ b/lib/containers/terms.js @@ -27,6 +27,7 @@ const TermsContainer = connect( fontWeight: state.ui.fontWeight, fontWeightBold: state.ui.fontWeightBold, lineHeight: state.ui.lineHeight, + letterSpacing: state.ui.letterSpacing, uiFontFamily: state.ui.uiFontFamily, fontSmoothing: state.ui.fontSmoothingOverride, padding: state.ui.padding, diff --git a/lib/reducers/ui.js b/lib/reducers/ui.js index b0a68fa6..7560bc8d 100644 --- a/lib/reducers/ui.js +++ b/lib/reducers/ui.js @@ -48,6 +48,7 @@ const initial = Immutable({ fontWeight: 'normal', fontWeightBold: 'bold', lineHeight: 1, + letterSpacing: 0, css: '', termCSS: '', openAt: {}, @@ -143,6 +144,10 @@ const reducer = (state = initial, action) => { ret.lineHeight = config.lineHeight; } + if (Number.isFinite(config.letterSpacing)) { + ret.letterSpacing = config.letterSpacing; + } + if (config.uiFontFamily) { ret.uiFontFamily = config.uiFontFamily; }