search

GuangluWu / obsidian-pisum

This is an obsidian theme with clean line-drawing appearance. Only dark mode available.
33 stars 12 forks source link

new: odd emoji rendering #4

Open lwb52 opened 3 years ago

lwb52 commented 3 years ago

emojis that appeared in one line in edit mode also used to render on one line in preview mode, but in 0.10.11/12/13 now render on a new, separate line, which is /not/ wanted:

example edit— ”work⏬test”

example preview— ”work :arrow_double_down: test"

lwb52 commented 3 years ago

a couple of days ago the creator of theme ”Blue Topaz” fixed this issue for his theme—I’ve asked what he did…

jebeaudoin commented 3 years ago

Any way of using a CSS snippet to fix this. Feels like I am going to have to change my theme -- and I love Pisum!

Trinsec commented 3 years ago

I've just encountered this oddity as well. The solution was to add:

img.emoji { display: inline }

and that solved it. It is because the img tag itself contains display: block. My added img.emoji's overrides it.

lwb52 commented 3 years ago

Thanks!! Did you install that as a separate CSS snippet, or inside the main Obsidian CSS?

On May 29, 2021, at 1:14 PM, Trinsec @.***> wrote:

I've just encountered this oddity as well. The solution was to add:

img.emoji { display: inline } and that solved it. It is because the img tag itself contains display: block. My added img.emoji's overrides it.

Trinsec commented 3 years ago

I messed with the actual theme itself while examining it because of this. But I suppose it could be a CSS snippet as easily. Probably a better idea to have it as CSS snippet.

lwb52 commented 3 years ago

Thanks again!

On May 30, 2021, at 1:07 AM, Trinsec @.***> wrote: I messed with the actual theme itself while examining it because of this. But I suppose it could be a CSS snippet as easily. Probably a better idea to have it as CSS snippet.

lwb52 commented 3 years ago

Tried several different ways, but emojis still show correctly in edit mode, but incorrectly in preview (now: centered on separate line). Tried changing to different ”display” options as separate css snippet; tried editing main css at ”tags,” & at ”basic format” (changing the ”{}” to ”()”)… No impact at all. Thanks—clearly i’m not yet understanding enough about css…

On May 30, 2021, at 1:07 AM, Trinsec @. @.>> wrote: I messed with the actual theme itself while examining it because of this. But I suppose it could be a CSS snippet as easily. Probably a better idea to have it as CSS snippet.

Trinsec commented 3 years ago

Mmm, specially for you I shoved mine from the actual theme to a CSS snippet to check.

That's all you need to do.

lwb52 commented 3 years ago

left out that last one many thanks Sent from PadPro

On May 31, 2021, at 1:51 AM, Trinsec @.***> wrote:

Reload the CSS snippets section in Obsidian so you can see the emoji snippet.

lwb52 commented 3 years ago

Thanks—I’d not done those last 2 steps. But having done them now, the problem still remains—only changing themes to ”Cybertron" corrected it. I’ll see if comparing this theme with the others can reveal something useful… Appreciate you putting me onto a better track!

On May 31, 2021, at 1:51 AM, Trinsec @.***> wrote:

Reload the CSS snippets section in Obsidian so you can see the emoji snippet. And then go enable the emoji snippet.

Trinsec commented 3 years ago

It kind of sounds like you might have something else in there overriding it. Maybe because of another plugin, or you've messed with that theme in the past.

You can try to troubleshoot it like this:

Hope this puts you more on track.

lwb52 commented 3 years ago

wow 😮 thanks! very thoughtful to be so helpful… i do have way too many plugins—not even close to exploring them all for usability! will try your suggestions later today…

Sent from PadPro

On May 31, 2021, at 11:36 AM, Trinsec @.***> wrote:

 It kind of sounds like you might have something else in there overriding it. Maybe because of another plugin, or you've messed with that theme in the past.

You can try to troubleshoot it like this:

Go to your Obsidian, go to a note which has this problematic issue. Go to preview mode, so you'll see that emoji on that seperate line. Do ctrl-shift-i to open the console. Copy the emoji to the clipboard. In the console, search for said emoji. (Click in the Elements area and ctrl-f) You'll probably encounter a line like ✅ Click on that line. Below you should see the relevant CSS snippets appearing in the Styles area for that line (in this case img.emoji line that I mentioned earlier should be present and not crossed out). If that line is crossed out, see where else the display value is being used and which selector is using it. Possibly just fix it by using the following line in the snippet instead to override by force: img.emoji { display: inline !important; } Hope this puts you more on track.

— You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub, or unsubscribe.

lwb52 commented 3 years ago

Sorry to take longer on this than I’d said.

^-shift-i idid not open any window, and cmmd-p did not reveal a ”console” item—even removing almost all hotkeys using ”i” did not help.

I tried the ”!important” flag on the separate css snippet, and it put the icons at the left margin of separate lines, instead of centered on separate lines.

Then I opened a test vault with no plugins at all and still could not access the console, but using Pisum theme to open a copy of an affected note showed no icon problem whatsoever. Thus, I conclude some plugin is overriding the generic ”display” command.

I truly appreciate all your help, and can now focus on seeing which plugin might be the offender… blessings.

On May 31, 2021, at 11:36 AM, Trinsec @.***> wrote:

It kind of sounds like you might have something else in there overriding it. Maybe because of another plugin, or you've messed with that theme in the past.

You can try to troubleshoot it like this:

Go to your Obsidian, go to a note which has this problematic issue. Go to preview mode, so you'll see that emoji on that seperate line. Do ctrl-shift-i to open the console. Copy the emoji to the clipboard. In the console, search for said emoji. (Click in the Elements area and ctrl-f) You'll probably encounter a line like ✅ Click on that line. Below you should see the relevant CSS snippets appearing in the Styles area for that line (in this case img.emoji line that I mentioned earlier should be present and not crossed out). If that line is crossed out, see where else the display value is being used and which selector is using it. Possibly just fix it by using the following line in the snippet instead to override by force: img.emoji { display: inline !important; } Hope this puts you more on track.

— You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub https://github.com/GuangluWu/obsidian-pisum/issues/4#issuecomment-851630895, or unsubscribe https://github.com/notifications/unsubscribe-auth/AFNM5M7ATYGYQFJTYK734CLTQPJMNANCNFSM4XANFPNQ.

lwb52 commented 3 years ago

There was a Forum discussion of the Console that helped me access it…

Sorry to take longer on this than I’d said.

^-shift-i idid not open any window, and cmmd-p did not reveal a ”console” item—even removing almost all hotkeys using ”i” did not help.

I tried the ”!important” flag on the separate css snippet, and it put the icons at the left margin of separate lines, instead of centered on separate lines.

Then I opened a test vault with no plugins at all and still could not access the console, but using Pisum theme to open a copy of an affected note showed no icon problem whatsoever. Thus, I conclude some plugin is overriding the generic ”display” command.

I truly appreciate all your help, and can now focus on seeing which plugin might be the offender… blessings.

On May 31, 2021, at 11:36 AM, Trinsec @. @.>> wrote:

It kind of sounds like you might have something else in there overriding it. Maybe because of another plugin, or you've messed with that theme in the past.

You can try to troubleshoot it like this:

Go to your Obsidian, go to a note which has this problematic issue. Go to preview mode, so you'll see that emoji on that seperate line. Do ctrl-shift-i to open the console. Copy the emoji to the clipboard. In the console, search for said emoji. (Click in the Elements area and ctrl-f) You'll probably encounter a line like ✅ Click on that line. Below you should see the relevant CSS snippets appearing in the Styles area for that line (in this case img.emoji line that I mentioned earlier should be present and not crossed out). If that line is crossed out, see where else the display value is being used and which selector is using it. Possibly just fix it by using the following line in the snippet instead to override by force: img.emoji { display: inline !important; } Hope this puts you more on track.

— You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub https://github.com/GuangluWu/obsidian-pisum/issues/4#issuecomment-851630895, or unsubscribe https://github.com/notifications/unsubscribe-auth/AFNM5M7ATYGYQFJTYK734CLTQPJMNANCNFSM4XANFPNQ.

jebeaudoin commented 3 years ago

I had installed the emoji toolbar plugin a while back. According to @pjeby over in Discord, “It’s emoji toolbar, yeah? If Twitter Emoji is turned on, it replaces emojis with HTML.” To fix the issue, they suggest: “You might not need to disable it entirely, just turning off its Twitter Emoji feature.”

This solved my issue.

lwb52 commented 3 years ago

I’d not seen this email until today: your suggestion seems to have done the trick for me—THANKS!!

On Jun 4, 2021, at 6:07 AM, jebeaudoin @.***> wrote: I had installed the emoji toolbar plugin a while back. According to @pjeby https://github.com/pjeby over in Discord, “It’s emoji toolbar, yeah? If Twitter Emoji is turned on, it replaces emojis with HTML.” To fix the issue, they suggest: “You might not need to disable it entirely, just turning off its Twitter Emoji feature.”

This solved my issue.