Emojis in links not behaving when using a particular theme

[Spidrax]

I’m experiencing some unexpected behavior with the theme I’m using (Nord) and I’m not sure where to look for the cause.

I have some notes that start with an emoji. When I put the title of that note in a link, the emoji either disappears, or gets centered on its own line with the rest of the title left-justified on a new line. See the screenshot below for details.

Changing the theme to (none) makes things display as expected (each linkleft-justified on its own line)

Where should I look for the bit of CSS that’s making this happen?

[Maned]

You can start by checking the dev tools.

[ryanjamurphy]

@Maned is right: the dev tools inspector will be your best friend in these scenarios.

See https://developers.google.com/web/tools/chrome-devtools on how to access devtools and step 2 here https://developers.google.com/web/tools/chrome-devtools/dom on using the Inspect tool.

[Spidrax]

Thanks for the advice. Unfortunately that’s like telling me to look under the hood when my car won’t start, but I’m not a mechanic

The links you posted are for Chrome dev tools, so that’s already confusing. I managed to open the inspector panel in Obsidian and drill down to the relevant HTML elements, but the Styles window below isn’t helping me isolate the problem because I don’t know what I’m looking for.

—Edit

I figured it out! It’s cool that I can toggle items off and see what works.

It was this:

img {
    display: block !important;
}

[ryanjamurphy]

Fortunately it’s a bit easier to take the parts out of an app (vs. a car) to see what they do!

Adding a snippet in your Appearance settings can change how that bit of CSS works. Copy and paste the following into a text file, save it as “inline emoji.css” (or whatever), save that file in the vault’s Snippets folder (see the little folder icon on that section in Appearance), then toggle the snippet on.

img {
    display: inline-block !important;
} 

The above might not work right away, but I’m sure a bit of experimentation will lead to what you’re hoping for.

[Spidrax]

I might be wrong, but I don’t think I can override it with a snippet because of the !important bit. Have to actually edit the theme.

Is there a way to just target emojis and not all images?

[ryanjamurphy]

Oh, good point. You just have to then add the !important on any overrides. Edited the CSS above to reflect that.

Re: emoji vs images. You’re asking about selector specificity. Mind taking a screenshot of what you see in the devtools after you’ve inspected the emoji?

[Spidrax]

Took a guess and tried this, didn’t work.

img class="emoji" {
    display: inline-block !important;
} 

—Edit

Google is my friend. Thanks for all the help!

.emoji {
    display: inline-block !important;
}