Skip to content

Emoji not rendering as expected #8910

Closed
@fenilgmehta

Description

@fenilgmehta

Is there an existing issue for this?

  • I have searched the existing issues

Can the issue be reproduced with the default theme (daylight/midnight)?

  • I was able to reproduce the issue with the default theme

Could the issue be due to extensions?

  • I've ruled out the possibility that the extension is causing the problem.

Describe the problem

Emoji not showing rightly:

  1. 😅 does not work normally, but works fine in inline code block
  2. ⚠ / / ⚠️ / ⚠️ does not work in both regular form and in inline code block too
    image

Expected result

The colorful form should be rendered

Screenshot or screen recording presentation

No response

Version environment

- Version: 2.9.8
- Operating System: Linux

Log file

-

More information

No response

Activity

88250

88250 commented on Aug 6, 2023

@88250
Member

Hello, this depends on system fonts, please install fonts with Emoji and try again.

fenilgmehta

fenilgmehta commented on Jan 1, 2024

@fenilgmehta
Author

Hi @88250, just got to know that this colorful emoji rendering is not much dependent on the system fonts. Instead it is more about the unicode character being inserted.

is the character which SiYuan's emoji picker inserts. But, if we see SiYuan User Guide > Please Start Here > Custom Appearance > Theme > INSIDE_FILE > Development > Encoding ⚠️ is being used.

For these characters ( and ⚠️) I ran below Python code:

for char in ['⚠', '⚠️']:
    print(len(char))
    for ch in char:
        print(f'\t{ord(ch)}')

this is the output it gives

1
	9888
2
	9888
	65039

When I asked ChatGPT about this, following is the result it gave:

...there is a subtle difference in their appearances.

  1. ⚠ (U+26A0):
    • This is the Unicode character for the warning sign, and it does not include an emoji modifier.
    • It is a black triangle with a black exclamation mark inside it.
  2. ⚠️ (U+26A0 U+FE0F):
    • This is the Unicode character for the warning sign with an emoji modifier (variant selector-16).
    • The inclusion of the emoji modifier may result in the symbol being displayed as a color emoji, especially on systems that support emoji rendering.

...
In terms of semantics, both symbols are used interchangeably to convey a warning or alert. The choice between them often depends on the visual style or context of the message where they are being used.

So, I believe if we could modify SiYuan's emoji picker to insert Unicode character for emojis with an emoji modifier (variant selector-16) then this issue will get fixed.

88250

88250 commented on Jan 1, 2024

@88250
Member

Hello, I'm not sure how you inserted the Emoji characters. My test here doesn't seem to find any problems:

issue.webm
fenilgmehta

fenilgmehta commented on Jan 1, 2024

@fenilgmehta
Author

I am doing the same as you and still facing the issue.

SiYuan.Emoji.Issue.mp4

What is the language set in SiYuan for you?

88250

88250 commented on Jan 1, 2024

@88250
Member

My operating system is Win11 Chinese version.

Please check whether the characters in the exported markdown are correct, or use developer tools to check the characters.

fenilgmehta

fenilgmehta commented on Jan 1, 2024

@fenilgmehta
Author

Here is the text in .sy file

{
	"ID": "20231116143129-vx7mzu9",
	"Type": "NodeParagraph",
	"Properties": {
		"id": "20231116143129-vx7mzu9",
		"updated": "20240101181902"
	},
	"Children": [
		{
			"Type": "NodeText",
			"Data": ""
		}
	]
}

Developer tools

Screenshot from 2024-01-01 18-33-49

Markdown file content

fenilgmehta

fenilgmehta commented on Jan 1, 2024

@fenilgmehta
Author

When I add the character with the emoji variant, the .sy file looks like this:

{
	"ID": "20240101183456-m3qzscy",
	"Type": "NodeParagraph",
	"Properties": {
		"id": "20240101183456-m3qzscy",
		"updated": "20240101183505"
	},
	"Children": [
		{
			"Type": "NodeText",
			"Data": "⚠⚠️"
		}
	]
}
88250

88250 commented on Jan 1, 2024

@88250
Member

It seems that there are indeed bugs somewhere, but they cannot be located at the moment. If it is convenient, you are welcome to help us find the bug from the source code. Thank you.

fenilgmehta

fenilgmehta commented on Jan 1, 2024

@fenilgmehta
Author

If I find it I will surely let you know.
Can we reopen this issue then.

Can you share a screenshot of what you see in Developer Tools in the below case.
Screenshot from 2024-01-01 18-42-48

Thank you🙏

88250

88250 commented on Jan 1, 2024

@88250
Member

image

image

image

Thank you.

reopened this on Jan 1, 2024
fenilgmehta

fenilgmehta commented on Jan 1, 2024

@fenilgmehta
Author

If I understand the situation correctly, the character getting inserted by SiYuan's emoji picker is the same for both of us. However, the font which you are using renders that emoji character colorfully even in the absence of the emoji modifier. But, for me the default font (Arial) does not do so. Arial requires the emoji modifier to display it colorfully. If I change my font to some selected other fonts (I do not recall the names as I had done testing long time back) then the emoji renders correctly.

The question is how did the emoji character with emoji modifier got used in SiYuan User Guide > Please Start Here > Custom Appearance > Theme > INSIDE_FILE > Development > Encoding (link)

We can say that it is not a bug. But, it would be really nice to have SiYuan's emoji picker add the emoji modifier (variant selector-16) wherever needed.

I hope this helps.

Thanks

self-assigned this
on Jan 2, 2024

7 remaining items

Loading
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

Labels

Type

No type

Projects

No projects

Relationships

None yet

    Development

    No branches or pull requests

      Participants

      @88250@fenilgmehta

      Issue actions

        Emoji not rendering as expected · Issue #8910 · siyuan-note/siyuan