From 43cb4f471fb69ec1bd7d5f0bf99fe867c8056d56 Mon Sep 17 00:00:00 2001 From: yutaka Date: Fri, 3 Mar 2017 07:57:05 +0000 Subject: [PATCH 1/5] Set charMeasure.height values to each row height --- src/xterm.js | 23 +++++++++++++++++------ 1 file changed, 17 insertions(+), 6 deletions(-) diff --git a/src/xterm.js b/src/xterm.js index a08e9dd1..8385b601 100644 --- a/src/xterm.js +++ b/src/xterm.js @@ -562,6 +562,7 @@ Terminal.bindKeys = function(term) { Terminal.prototype.insertRow = function (row) { if (typeof row != 'object') { row = document.createElement('div'); + row.style.height = this.charMeasure.height + 'px'; } this.rowContainer.appendChild(row); @@ -642,17 +643,18 @@ Terminal.prototype.open = function(parent) { this.charSizeStyleElement = document.createElement('style'); this.helperContainer.appendChild(this.charSizeStyleElement); + this.charMeasure = new CharMeasure(document, this.helperContainer); + this.charMeasure.on('charsizechanged', function () { + self.updateCharSizeCSS(); + self.updateRowHeight(); + }); + this.charMeasure.measure(); + for (; i < this.rows; i++) { this.insertRow(); } this.parent.appendChild(this.element); - this.charMeasure = new CharMeasure(document, this.helperContainer); - this.charMeasure.on('charsizechanged', function () { - self.updateCharSizeCSS(); - }); - this.charMeasure.measure(); - this.viewport = new Viewport(this, this.viewportElement, this.viewportScrollArea, this.charMeasure); this.renderer = new Renderer(this); @@ -714,6 +716,15 @@ Terminal.prototype.updateCharSizeCSS = function() { this.charSizeStyleElement.textContent = '.xterm-wide-char{width:' + (this.charMeasure.width * 2) + 'px;}'; } +/** + * Updates the height for each rows + */ +Terminal.prototype.updateRowHeight = function() { + for (var i = 0; i < this.children.length; ++i) { + this.children[i].style.height = this.charMeasure.height + 'px'; + } +} + /** * XTerm mouse events * http://invisible-island.net/xterm/ctlseqs/ctlseqs.html#Mouse%20Tracking From 31a0996b2f6084621bb18dbd836dbadad91433ea Mon Sep 17 00:00:00 2001 From: yutaka Date: Wed, 8 Mar 2017 00:27:22 +0000 Subject: [PATCH 2/5] Revert "Set charMeasure.height values to each row height" This reverts commit 43cb4f471fb69ec1bd7d5f0bf99fe867c8056d56. --- src/xterm.js | 23 ++++++----------------- 1 file changed, 6 insertions(+), 17 deletions(-) diff --git a/src/xterm.js b/src/xterm.js index 8385b601..a08e9dd1 100644 --- a/src/xterm.js +++ b/src/xterm.js @@ -562,7 +562,6 @@ Terminal.bindKeys = function(term) { Terminal.prototype.insertRow = function (row) { if (typeof row != 'object') { row = document.createElement('div'); - row.style.height = this.charMeasure.height + 'px'; } this.rowContainer.appendChild(row); @@ -643,18 +642,17 @@ Terminal.prototype.open = function(parent) { this.charSizeStyleElement = document.createElement('style'); this.helperContainer.appendChild(this.charSizeStyleElement); - this.charMeasure = new CharMeasure(document, this.helperContainer); - this.charMeasure.on('charsizechanged', function () { - self.updateCharSizeCSS(); - self.updateRowHeight(); - }); - this.charMeasure.measure(); - for (; i < this.rows; i++) { this.insertRow(); } this.parent.appendChild(this.element); + this.charMeasure = new CharMeasure(document, this.helperContainer); + this.charMeasure.on('charsizechanged', function () { + self.updateCharSizeCSS(); + }); + this.charMeasure.measure(); + this.viewport = new Viewport(this, this.viewportElement, this.viewportScrollArea, this.charMeasure); this.renderer = new Renderer(this); @@ -716,15 +714,6 @@ Terminal.prototype.updateCharSizeCSS = function() { this.charSizeStyleElement.textContent = '.xterm-wide-char{width:' + (this.charMeasure.width * 2) + 'px;}'; } -/** - * Updates the height for each rows - */ -Terminal.prototype.updateRowHeight = function() { - for (var i = 0; i < this.children.length; ++i) { - this.children[i].style.height = this.charMeasure.height + 'px'; - } -} - /** * XTerm mouse events * http://invisible-island.net/xterm/ctlseqs/ctlseqs.html#Mouse%20Tracking From f0d5b4012134a617408c38eb98382c1ef36ebe17 Mon Sep 17 00:00:00 2001 From: yutaka Date: Wed, 8 Mar 2017 01:03:18 +0000 Subject: [PATCH 3/5] Detect bold font was broken correctly. --- src/Renderer.ts | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/src/Renderer.ts b/src/Renderer.ts index 9b6234ca..e1ebbe8f 100644 --- a/src/Renderer.ts +++ b/src/Renderer.ts @@ -34,7 +34,7 @@ export class Renderer { // Figure out whether boldness affects // the character width of monospace fonts. if (brokenBold === null) { - brokenBold = checkBoldBroken((this._terminal).document); + brokenBold = checkBoldBroken((this._terminal).element); } // TODO: Pull more DOM interactions into Renderer.constructor, element for @@ -291,14 +291,14 @@ export class Renderer { // if bold is broken, we can't // use it in the terminal. -function checkBoldBroken(document) { - const body = document.getElementsByTagName('body')[0]; +function checkBoldBroken(terminal) { + const document = terminal.ownerDocument; const el = document.createElement('span'); el.innerHTML = 'hello world'; - body.appendChild(el); + terminal.appendChild(el); const w1 = el.scrollWidth; el.style.fontWeight = 'bold'; const w2 = el.scrollWidth; - body.removeChild(el); + terminal.removeChild(el); return w1 !== w2; } From 2ec756fd6bfadf2689d1c243960efaa01a7f93a4 Mon Sep 17 00:00:00 2001 From: yutaka Date: Wed, 8 Mar 2017 00:44:57 +0000 Subject: [PATCH 4/5] Use offsetWidth instead of scrollWidth scrollWidth does not work on Chrome with `display: inline` element. --- src/Renderer.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/Renderer.ts b/src/Renderer.ts index e1ebbe8f..a839e7d9 100644 --- a/src/Renderer.ts +++ b/src/Renderer.ts @@ -296,9 +296,9 @@ function checkBoldBroken(terminal) { const el = document.createElement('span'); el.innerHTML = 'hello world'; terminal.appendChild(el); - const w1 = el.scrollWidth; + const w1 = el.offsetWidth; el.style.fontWeight = 'bold'; - const w2 = el.scrollWidth; + const w2 = el.offsetWidth; terminal.removeChild(el); return w1 !== w2; } From 4b2ae6a79fb0f899e895093ef440ac9977210d8f Mon Sep 17 00:00:00 2001 From: yutaka Date: Wed, 8 Mar 2017 05:12:25 +0000 Subject: [PATCH 5/5] Use rendered height for detect broken bold font. --- src/Renderer.ts | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/src/Renderer.ts b/src/Renderer.ts index a839e7d9..4131abc4 100644 --- a/src/Renderer.ts +++ b/src/Renderer.ts @@ -297,8 +297,10 @@ function checkBoldBroken(terminal) { el.innerHTML = 'hello world'; terminal.appendChild(el); const w1 = el.offsetWidth; + const h1 = el.offsetHeight; el.style.fontWeight = 'bold'; const w2 = el.offsetWidth; + const h2 = el.offsetHeight; terminal.removeChild(el); - return w1 !== w2; + return w1 !== w2 || h1 !== h2; }