Some unicode characters rendered not correctly in canvas mode

[robinhuy]

I display text in Terminal and some unicode characters rendered not correctly in canvas mode (default). In dom mode (using option rendererType) it display normal.

Details

• Browser and browser version: Google Chrome 68.0.3440.106, Safari 11.1.1 & Firefox Quantum 61.0.2
• OS version: macOS 10.13.6
• xterm.js version: 3.6.0

Steps to reproduce

Server return unicode string to Terminal or User manually input to Terminal.

• Canvas mode:
  

• Dom mode:
  

[Tyriar]

@robinhuy did you add in those underlines or is that from the renderer? Is the problem the lines or the boldness (or lack thereof) in the canvas?

Can you provide that string so I can play around with it?

[robinhuy]

@Tyriar I add the underlines to highlight the difference. Characters with green underline is nice but characters with red underline is thinner than the others.

I using this string to test: xin chào các bạn.
Character ạ (unicode hex value U+1EA1) is thinner than à or á.

[Tyriar]

I think this is probably related to your font settings and those characters don't have bold variants or something, here's what I see using the Hack font:

Also in my screenshot the ạ is cut off at the bottom, this is due to #1138

[robinhuy]

I try with this font https://github.com/source-foundry/Hack instead the default and using this option to change font fontFamily: 'Hack, monospace'. But it's not work.

• Canvas mode:
  

• Dom mode:
  

I also tried fontWeight and fontWeightBold in canvas mode too:

• Default font, canvas mode, font weight 300:
  

• Default font, canvas mode, font weight 700:
  

[Tyriar]

Could you try downloading Noto Sans Mono from https://www.google.com/get/noto/ and trying it with that:

Run echo -e '\x1b[1mxin chào các bạn' to get the bold chars, just to make sure your program is not unbolding them.

[robinhuy]

It's not work. I think the problem is not by the font because in dom mode the string display nice.

using option: rendererType: 'dom' and override this css (change normal to bold):

.xterm-dom-renderer-owner-1 span:not(.xterm-bold) {
    font-weight: normal;
}

P/S: I'm using xtermjs on the browser and get values from backend server (use method .write() to display data).

[Tyriar]

I can't seem to reproduce it, let me know if you get any more information but I'm closing this off for housekeeping purposes.