Emoji break the column alignment

[spencercook]

NOT A HUGE ISSUE but... Emoji break the column alignment in edit mode. In preview the tables look perfect.

To Reproduce

1. Insert an emoji in any column
2. Hit tab or enter
3. Observe the misaligned columns

Desktop:

• OS: Mac OS
• Obsidian Version: 0.10.3
• Advanced Tables Version: 1.4.11

[tgrosinger]

Can you please provide a screenshot?

This might be similar to #33.

[spencercook]

It seems the rendering issue is theme independent. I am using the Minimal theme and it's settings plugin but after disabling it and restoring the default theme the issue remained. I tried specifying Inconsolata at the monospace font in the advanced tables plugin as suggested but that didn't work either.

Thanks for checking this out!

[tgrosinger]

Hmm, I this one is getting outside my understanding of unicode. I'm not sure if it has to do with the emoji containing multiple code points or if it is because of varying widths of the emoji themselves.

[krausekai]

Same issue occurs when using Japanese characters, without emojis.

For example:

| Name    | Name2   |
| ------- | ------- |
| testing | Column2 |
| 漢字    | Column2 |
| テスト  | Column2 |

A few monospace fonts (Consolas, Courier, Roboto Mono) do not seem to fix the issue. I don't think this could be perfectly aligned, but could be better aligned with space adjustments. How, I am not sure.

[zephraph]

Yep, here's another example:

Here's a really good blog post that discusses emoji length issues and how to address them. It won't be perfect, but a step in the right direction.

https://blog.jonnew.com/posts/poo-dot-length-equals-two

[2045ga]

Same issue occurs when using Chinese characters

[Sicalxy]

@krausekai

Same issue occurs when using Japanese characters, without emojis.

For example:

| Name    | Name2   |
| ------- | ------- |
| testing | Column2 |
| 漢字    | Column2 |
| テスト  | Column2 |

A few monospace fonts (Consolas, Courier, Roboto Mono) do not seem to fix the issue. I don't think this could be perfectly aligned, but could be better aligned with space adjustments. How, I am not sure.

I'm not sure how did you change monospace fonts, I got similar problem but I solved it.

If you just edit .markdown-source-view in snippet, then you didn't change table's font. You can try to set monospace global wide or specific your table's font:

.cm-s-obsidian .HyperMD-table-row {
  font-family: 'your font';
}

---

Similar for @zephraph, the biggest problem is font. Try some different fonts (Source Code Pro + Noto Color Emoji). Still not perfect, but better:

[robertandrews]

Same here.

Any thoughts on a fix?

[zephraph]

I think we could likely use string-length to fix this.

[zephraph]

After digging into this a bit more I think the issue is in @tgrosinger/md-advanced-tables, not this repo. My suspicion is that you'd need to update https://github.com/tgrosinger/md-advanced-tables/blob/37dd2c5a81faa3eb35d99683e11f3addac4017bd/src/table-cell.ts to use something like string-length (mentioned above) instead of calling .length. Essentially .length is going to lie to you if you're using it to measure position.

[robertandrews]

After digging into this a bit more I think the issue is in @tgrosinger/md-advanced-tables, not this repo. My suspicion is that you'd need to update https://github.com/tgrosinger/md-advanced-tables/blob/37dd2c5a81faa3eb35d99683e11f3addac4017bd/src/table-cell.ts to use something like string-length (mentioned above) instead of calling .length. Essentially .length is going to lie to you if you're using it to measure position.

Good work, that's encouraging. Crossing fingers for a fix. Don't think it's in my wheelhouse.

[tgrosinger]

Thank you very much @zephraph for digging into this. Unfortunately, I think it's a little more nuanced, which is why I haven't quite figured out how to solve it.

The md-advanced-tables library actually does put some work into determining the width of a character. Take a look here.

But emoji are particularly tricky. For example:

Or this might show it even better:

It's not 1 or 2 characters wide, it's like 2.2 characters wide. You can't align that using normal spaces... Currently md-advanced-tables is smart enough to call 👍 two characters wide, but it can't do 2.2 spaces of padding.

I'm definitely open to suggestions if anyone knows how to solve this one!

[tgrosinger]

And that's not even taking into consideration that some monospace fonts might render emoji differently. Or are emoji even in fonts? Are emoji different widths on different operating systems? I have no idea 🤷‍♂️

[KucharczykL]

Not an expert, but it seems that in JavaScript, the Intl.Segmenter allows you to split strings by grapheme clusters, which are what people think of as actual "characters"[^1]. The above-linked library https://github.com/sindresorhus/string-length uses it under the hood so it should fix the issues.

[^1]: https://tonsky.me/blog/unicode/, section How do I detect extended grapheme clusters then?