The fonts look different, is this just a font issue?
In both cases the base theme is used with no custom font applied. But even when I set the text font explicitly to Arial on both systems, the problem is the same.
I think @Halderen is right, it has something to do with this Chromium bug. It has been claimed that it is fixed in Chrome 102, but I could not test it, since the current Obsidian installer comes with Chrome 100 only.
I could reproduce the problem on a Mac with no Retina display in Obsidian 0.15.2 (Electron 17.1.1 with Chrome 98.0.4758, and also after re-installing with the latest installer in Electron 18.3.0 with Chrome 100.0.4896).
Maybe it will be solved automatically when Obsidian updates to Electron 19.0.0 which comes with Chrome 102.0.5005?
ok, thanks.
@Cito how are you determining which Chrome build comes bundled with each Obsidian installer version?
@luckman212 you can see this in the developer console which you can open with option-cmd-i, by entering navigator.userAgent.
Note: Obsidian 1.0 still comes with Chrome 100.0 on the Mac.
For anyone looking for a workaround
You can use the Dynamic Highlights plugin to markup emojis in a span that we can then target with CSS.
Regex that selects all Emojis for Dynamic Highlights:
(?:[\uD83C\uDF00-\uD83D\uDDFF]|[\uD83E\uDD00-\uD83E\uDDFF]|[\uD83D\uDE00-\uD83D\uDE4F]|[\uD83D\uDE80-\uD83D\uDEFF]|[\u2600-\u26FF]\uFE0F?|[\u2700-\u27BF]\uFE0F?|\u24C2\uFE0F?|[\uD83C\uDDE6-\uD83C\uDDFF]{1,2}|[\uD83C\uDD70\uD83C\uDD71\uD83C\uDD7E\uD83C\uDD7F\uD83C\uDD8E\uD83C\uDD91-\uD83C\uDD9A]\uFE0F?|[\u0023\u002A\u0030-\u0039]\uFE0F?\u20E3|[\u2194-\u2199\u21A9-\u21AA]\uFE0F?|[\u2B05-\u2B07\u2B1B\u2B1C\u2B50\u2B55]\uFE0F?|[\u2934\u2935]\uFE0F?|[\u3030\u303D]\uFE0F?|[\u3297\u3299]\uFE0F?|[\uD83C\uDE01\uD83C\uDE02\uD83C\uDE1A\uD83C\uDE2F\uD83C\uDE32-\uD83C\uDE3A\uD83C\uDE50\uD83C\uDE51]\uFE0F?|[\u203C\u2049]\uFE0F?|[\u25AA\u25AB\u25B6\u25C0\u25FB-\u25FE]\uFE0F?|[\u00A9\u00AE]\uFE0F?|[\u2122\u2139]\uFE0F?|\uD83C\uDC04\uFE0F?|\uD83C\uDCCF\uFE0F?|[\u231A\u231B\u2328\u23CF\u23E9-\u23F3\u23F8-\u23FA]\uFE0F?)
CSS snippet (for highlight name ‘emoji’):
@media
not screen and (min-device-pixel-ratio: 2),
not screen and (min-resolution: 192dpi) {
span.emoji {
margin-right: 5px;
}
}
Credit to @pseudometa for the Dynamic Highlights tip.
1 Like
Note: The above only fixes the Preview/Editor panes, not search etc.
I thought this had been resolved months ago, but it turns out I’ve just been using Obsidian primarily on my MacBook’s built-in (Retina) display. I recently rearranged things, and Obsidian now lives on my non-Retina external display, and the crowding is back.
So, it looks like the answer is that, someday, Obsidian will update to a new version of Electron/Chromium, and that will fix it?
1 Like
when Obsidian 1.0.4 is released. Download and reinstall it from the website. Let me know if the situation improves.
1 Like
Obsidian 1.1.8 was released today, so I reinstalled and checked again. The problem on the Mac still exists. Which does not surprise me, since the new installer still uses Electron 18.3 with Chrome 100.0.
it’s gonna be for the next public release then.
it’s in 1.1.9
This topic was automatically closed 7 days after the last reply. New replies are no longer allowed.
There was already a thread with the same title, but unfortunately it was closed even though the problem still exists, and nobody reacted to my bid to reopen the old thread, so I have to create a new one.
Steps to reproduce
Enter any emoji followed by some text as file name and/or heading of a Markdown document in Obsidian Mac and Windows.
Expected result
Should look similar on Mac and Windows.
Actual result
The are margins after emojis on Windows, clearly separating the Emoji from the text, while on the Mac, the Emojis directly border to the text without margin.
Windows 11:
MacOs 13:
Note that these screenshots were taken after updating to Obsidian 1.1.9 with the new installer which comes with Electron 21.3 / Chrome 106 instead of Electron 19.0 / Chrome 100. I checked this using the Dev Tools Console - Chrome 106 was used when these Screenshots were made. It may have to do with this Chromium Bug, which still seems to not be fixed even though one commenter had claimed it was fixed in Chrome 102, so I had hoped this would be fixed in Obsidian 1.1.9 as well.
Note that for the screenshots, the default fonts and themes were used.
Currently I tend to put a blank after emojis so that it looks ok on the Mac, but then it looks strange on Windows, where this is not necessary.
I don’t know what “bid” you mean. The topic was auto-closed because someone marked it as “Solution”. Thanks for linking back to the thread. I’ve reopened and merged your reply here.
I see the same behaviour. 1.1.12, installer 1.1.9, MacOS.
@Cito you’re showing no space. The original bug report seems to be about the text overlapping?
Well, I see no space, like you said. I don’t see any overlapping problem like in the original bug report. For the record, in Things and Notion, I also have to put a space in MacOS, because the emoji is right up against the text.
I asked WhiteNoise, since he was marked as moderator and the last one who replied, but he probably overlooked my message. Are there other options to request re-opening a thread?
Yes, you’re right. The original bug report actually showed a negative margin. I thought it was the same problem, but actually it seems to be a different one, since I can’t reproduce such a negative margin, although I tried using the same “office building” emoji and different fonts and resolutions. The only issue I see is that there is no or a very small margin, contrary to Windows.
That also hints to a generally different behavior of Chrome on Windows and MacOs, not something that could easily be fixed in Obsidian.
Here are some links that discuss the issue in Chrome:
- Emoji rendered in Chrome have different widths than in other browsers
- Issue 1083965: Regression: Emoji spacing too narrow in Mac OS 10.15 layout tests
- Issue 596223: M49 Regression: Emoji layout width too small (or character too large) on non-2x
What is a bit confusing is that some people report that they are seing it only on non-retina-displays, while others say it appears only on retina displays. In my case I do have a retina display, and I see the “zero margin” effect.
The StackOverflow article also mentions some workarounds that could be used in Obsidian to fix the problem until there is a proper fix in Chrome.
1 Like