Comments (14)
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:
from advanced-tables-obsidian.
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 🤷♂️
from advanced-tables-obsidian.
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!
from advanced-tables-obsidian.
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.
from advanced-tables-obsidian.
Same issue occurs when using Chinese characters
from advanced-tables-obsidian.
I think we could likely use string-length to fix this.
from advanced-tables-obsidian.
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.
from advanced-tables-obsidian.
Can you please provide a screenshot?
This might be similar to #33.
from advanced-tables-obsidian.
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.
from advanced-tables-obsidian.
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
from advanced-tables-obsidian.
Same here.
Any thoughts on a fix?
from advanced-tables-obsidian.
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.
from advanced-tables-obsidian.
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!
from advanced-tables-obsidian.
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.
Footnotes
-
https://tonsky.me/blog/unicode/, section How do I detect extended grapheme clusters then? ↩
from advanced-tables-obsidian.
Related Issues (20)
- TBLFM from formulas.md not working :open_mouth: HOT 5
- Allow text wrapping during editing HOT 1
- "Tab" to new cell is inconsistent HOT 3
- Toggle Context Menu HOT 2
- in-cell multiline HOT 1
- Visual width of cells is inconsistent with Japanese text HOT 1
- Cell width fails to account for disappearing characters HOT 2
- Incorrect width of the cells when using hebrew words with vocalizations HOT 1
- Switch to Source Mode while editing the table HOT 1
- Disable automatic cell padding when detecting a LaTeX equation
- Minimum hyphens in header
- Tables not being created even though I've enabled the plugin HOT 8
- Tab and Enter do not create new columns and rows HOT 8
- Table create bug HOT 2
- I was going to report that when tabbing on the first empty column, the row is indented. HOT 13
- Feature Request - Copy contents of column without formatting
- Spreadsheet formula compatibility with <br>?
- Vertical Tables HOT 1
- Pipe used inside page link results in new column being created HOT 2
- [Sorting] "group by path + sort by path reverse" does not reverse order HOT 1
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from advanced-tables-obsidian.