mirror of
https://github.com/wavetermdev/xterm.js.git
synced 2026-08-05 13:43:48 -07:00
Merge pull request #4053 from Tyriar/underline_polish
Polish underline for more fonts to prevent odd overlap look
This commit is contained in:
@@ -439,9 +439,8 @@ export class WebglCharAtlas implements IDisposable {
|
||||
if (underline) {
|
||||
this._tmpCtx.save();
|
||||
const lineWidth = Math.max(1, Math.floor(this._config.fontSize * window.devicePixelRatio / 15));
|
||||
// When the width is odd, draw at 0.5 position. Offset by an additional 1 dpr to bring the
|
||||
// underline closer to the character
|
||||
const yOffset = (lineWidth % 2 === 1 ? 0.5 : 0) + window.devicePixelRatio;
|
||||
// When the line width is odd, draw at a 0.5 position
|
||||
const yOffset = lineWidth % 2 === 1 ? 0.5 : 0;
|
||||
this._tmpCtx.lineWidth = lineWidth;
|
||||
|
||||
// Underline color
|
||||
@@ -463,9 +462,9 @@ export class WebglCharAtlas implements IDisposable {
|
||||
this._tmpCtx.beginPath();
|
||||
const xLeft = padding;
|
||||
const xRight = padding + this._config.scaledCellWidth;
|
||||
const yTop = Math.ceil(padding + this._config.scaledCharHeight - lineWidth) - yOffset;
|
||||
const yMid = padding + this._config.scaledCharHeight - yOffset;
|
||||
const yBot = Math.ceil(padding + this._config.scaledCharHeight + lineWidth) - yOffset;
|
||||
const yTop = Math.ceil(padding + this._config.scaledCharHeight) - yOffset;
|
||||
const yMid = padding + this._config.scaledCharHeight + lineWidth - yOffset;
|
||||
const yBot = Math.ceil(padding + this._config.scaledCharHeight + lineWidth * 2) - yOffset;
|
||||
switch (this._workAttributeData.extended.underlineStyle) {
|
||||
case UnderlineStyle.DOUBLE:
|
||||
this._tmpCtx.moveTo(xLeft, yTop);
|
||||
@@ -528,8 +527,9 @@ export class WebglCharAtlas implements IDisposable {
|
||||
this._tmpCtx.restore();
|
||||
|
||||
// Draw stroke in the background color for non custom characters in order to give an outline
|
||||
// between the text and the underline
|
||||
if (!customGlyph) {
|
||||
// between the text and the underline. Only do this when font size is >= 12 as the underline
|
||||
// looks odd when the font size is too small
|
||||
if (!customGlyph && this._config.fontSize >= 12) {
|
||||
// This only works when transparency is disabled because it's not clear how to clear stroked
|
||||
// text
|
||||
if (!this._config.allowTransparency && chars !== ' ') {
|
||||
|
||||
Reference in New Issue
Block a user