Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Style wide characters at charWidth*2 in DOM #440

Merged
merged 6 commits into from
Jan 9, 2017

Conversation

Tyriar
Copy link
Member

@Tyriar Tyriar commented Dec 31, 2016

Fixes #439


Adds a new util class that encapsulates measuring of characters and restricts it to only be performed during at start up and after a resize (which I think should also be called when char size is changed).

Before:

image

After:

image

It appears to work when resizing using crazy sizes too:

image

@Tyriar Tyriar requested a review from parisk December 31, 2016 23:22
@Tyriar Tyriar changed the title Wrap wide chars in a span/class Style wide characters at charWidth*2 in DOM Dec 31, 2016
@Tyriar Tyriar self-assigned this Jan 1, 2017
@jerch
Copy link
Member

jerch commented Jan 1, 2017

Note that some half width chars are rendered to wide with some fonts. Also fonts may differ in the wcwidth calculation for some glyphs. Thats the reason why I ended up with a precalculated dictionary of glyph widths for a critial subset of characters.

@Tyriar
Copy link
Member Author

Tyriar commented Jan 4, 2017

Viewport's usage of CharMeasure in this PR should actually make a significant performance impact as long running commands seem to spend ~20% time in getBoundingClientRect 😮

@Tyriar Tyriar added this to the 2.3.0 milestone Jan 4, 2017
Copy link
Contributor

@parisk parisk left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Looks great, works great.

LGTM 👍 .

this.charMeasureElement.classList.add('xterm-char-measure-element');
this.charMeasureElement.innerHTML = 'W';
this.helperContainer.appendChild(this.charMeasureElement);
this.charSizeStyleElement = document.createElement('style');
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Nice idea 👍 .

@Tyriar
Copy link
Member Author

Tyriar commented Jan 9, 2017

Tested after merge 👍

@Tyriar Tyriar merged commit e9da2a6 into xtermjs:master Jan 9, 2017
@Tyriar Tyriar deleted the 439_wide_char_class branch January 9, 2017 01:00
@Tyriar Tyriar modified the milestone: 2.3.0 Feb 2, 2017
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants