Wrong letter-spacing when rendering emot icons

[luca-saggese]

When rendering the emoticons the terminal render it with negative letter-spacing, for example:

<div style="width: 2089px; height: 14px; line-height: 14px; overflow: hidden;">
<span style="letter-spacing: -7.775591px;">🎉</span>
<span style="letter-spacing: 1.005659px;"> </span>
<span style="background-color: rgb(77, 77, 77); letter-spacing: 1.005659px;" class="xterm-decoration-top">Welcome</span>
<span style="letter-spacing: 1.005659px;">, admin!</span>
</div>

I've fixed it with a work around css style

/* reset negative letter-spacing in  xterm */
.xterm .xterm-rows span[style*="letter-spacing:-"] {
  letter-spacing: 0 !important;
}

.xterm .xterm-rows span[style*="letter-spacing: -"] {
  letter-spacing: 0 !important;
}

[jerch]

@luca-saggese That is not a good suggestion to work around the issue. Better is to understand, where the issue comes from and address it on that level:

• use the unicode version, where your used emoijs are properly defined (e.g. use the newer unicode-grapheme addon based on unicode v15)
• make sure, that also the app using those emojis uses the correct unicode version, otherwise its assumption about screen state will be wrong (here your workaround will screw up the screen state further)

Omit very recently added emojis, as systems typically lack behind and wont support them until the next major system upgrade (or in other words - for those you will not find working unicode versions on system and xterm.js side).

[luca-saggese]

thanks fr the comment Jerch i will follow your advice