Emojis have no margins next to text on mac

Bug reports
, ,
1

We strongly recommend you to search the forum with possible keywords before submitting a new bug report. Please also try your repro steps with third-party plugins and custom CSS disabled and see if it’s still reproducible. If it’s an issue with third-party plugins or themes, try contacting the author for help. Once you’ve done the above, delete this line.

Steps to reproduce

  1. Create a folder
  2. Add Emoji before text

Expected result

Obsidian 2022-04-19 at 23.49.59@2x

Actual result

Obsidian 2022-04-19 at 23.50.56

Environment

  • Operating system: MacOS 12.3.1
  • Debug info:
    SYSTEM INFO:
    Obsidian version: v0.14.6
    Installer version: v0.13.23
    Operating system: Darwin Kernel Version 21.4.0: Fri Mar 18 00:45:05 PDT 2022; root:xnu-8020.101.4~15/RELEASE_X86_64 21.4.0
    Login status: logged in
    Catalyst license: none
    Insider build toggle: off
    Live preview: on
    Legacy editor: off
    Base theme: dark
    Community theme: none
    Snippets enabled: 0
    Safe mode: on

RECOMMENDATIONS:
none

Additional information

I see similar bug reports in chromium from a few years ago, not sure if its related to chromium on MacOS. It also seems to render fine on the Macbook Pro’s retina display but not my external non-retina display, not sure if its a DPI issue. None of these issues show on windows
https://bugs.chromium.org/p/chromium/issues/detail?id=596223&q=596223&can=2

This text will be hidden

2 Likes
2

Same Problem here on a MacBook Pro with Monterey 12.4 and no retina display:

This does not only happen for file and folder names, but also in the notes.

This is particularly annoying when you sync with Windows where they do have a margin, because it looks differently. On the Mac you need a space char to separate the emoji from the text, on Windows you don’t.

Mac with Monterey and no retina display:

mac
mac1150×458 34.2 KB

PC with Windows:
win

3

The fonts look different, is this just a font issue?

4

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?

5

ok, thanks.

6

@Cito how are you determining which Chrome build comes bundled with each Obsidian installer version?

7

@luckman212 you can see this in the developer console which you can open with option-cmd-i, by entering navigator.userAgent.

8

Note: Obsidian 1.0 still comes with Chrome 100.0 on the Mac.

9

CleanShot 2022-10-31 at 16.42.56

10

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
11

Note: The above only fixes the Preview/Editor panes, not search etc.

12

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
13

when Obsidian 1.0.4 is released. Download and reinstall it from the website. Let me know if the situation improves.

1 Like
14

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.

15

it’s gonna be for the next public release then.

16

it’s in 1.1.9

17

This topic was automatically closed 7 days after the last reply. New replies are no longer allowed.

19

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:

Win11

MacOs 13:

MacOs13

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.

20

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.