Emoji in indicators can misalign BenchmarkResults table

[buttercubz]

hello, I love this package I am using it in a testing framework that I am doing.
when I launch the results the table is out of alignment.

[littletof]

Hy @buttercubz! I'm glad, you like this project!

Can you provide the code for the indicator please? Do you have a space after the emoji?

🚀 works for me, but tried ⚗ and it also doesn't align for me, its shorter.

Does it align properly for you, when provide nocolor: true in the result's options?

Will work out something to fix this.

[littletof]

@buttercubz
Could you please run this snippet and share the output with me? (maybe as an image would be best)

console.log(["🧪", "🧪\uFE0F", "⚗️", "🈴","🚀", "🦕"].map(e => `|${e}|...|... (${e.length}) {${e.split("").map(s => s.codePointAt(0)).join('+')}}`).join("\n"));

I worked on this a few days ago, but my first try at making it automatically handle this wasn't successful 😕
Now I'm thinking of a way, where the user can manually add or remove some padding, so if it misaligns, its fixable.

For a hotfix, you can try to use "🧪\uFE0F". It may resolve the misalignment.

[buttercubz]

@littletof of course, sorry for not answering the previous comment I was a little busy

[buttercubz]

this is the output i get

[littletof]

@buttercubz thanks for the output!

For a hotfix, you can try to use "🧪\uFE0F". It may resolve the misalignment.

Does this resolve your specific issue?

[buttercubz]

For a hotfix, you can try to use "🧪\uFE0F". It may resolve the misalignment.

Does this resolve your specific issue?

yes

[littletof]

I will leave this open, until there is a proper universal, way to handle this.

• It needs to handle single and multiple char emojis, I have already worked on this, have some progress in 0fe4c62
• this solutions needs to handle cases, where eg.: "⚗" takes up 1 character in VSCode terminal, but the "image" overflows, looking like 2 char wide, as seen in Emoji in indicators can misalign BenchmarkResults table #13 (comment). (its ⚗ with \uFE0F)

I'm thinking of a solution, where its possible to return an object in modFn (besides the current string), which contains the string for the indicator, and a buffer, which is eg. 4 spaces by default, but you can override it with less, or more, so you can correct the misalignment for your specific case.
So the goal would be to handle this automatically, but give the user the option to correct it, if the automatic way doesn't work.

Related issues:
microsoft/vscode#92409
xtermjs/xterm.js#2693

[littletof]

I narrowed down the problem to issues outside this module.

Running this script on windows:

['🚀', '🦾', '🧪','⚗️'].forEach(s => {console.log(`${s}...-|-`); console.log(`${s}...\u001b[31m-|-\u001b[0m`);})

results in this output:

When using the new (emoji 11) emojis like 🦾 or 🧪, a random space appears before the first following colored part of the text, which after closer inspection seems to happen with the original issues case.

(Also, the ⚗ emoji being counted as only 1 char wide, but rendered 2 wide seems to be a VSCode terminal issue)

Seems like its a windows only issue, but one that is present in both deno and node.
If a fix is found it needs to be ensured, that it also results in the proper output on other platforms.

[littletof]

With v0.3.0 you can now workaround this problem, when you encounter it on windows:

Use this, if the extra space appears:

modFn: () => ({indicator: `🧪${colors.reset("\u0008")}`, visibleLength: 2})

This, if emoji is rendered too thin:

modFn: () => ({indicator: `⚗ `, visibleLength: 2})