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.