Skip to content

Emoji not rendering as expected #8910

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
3 tasks done
fenilgmehta opened this issue Aug 6, 2023 · 11 comments
Closed
3 tasks done

Emoji not rendering as expected #8910

fenilgmehta opened this issue Aug 6, 2023 · 11 comments
Assignees
Labels
Milestone

Comments

@fenilgmehta
Copy link

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

@88250
Copy link
Member

88250 commented Aug 6, 2023

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

@88250 88250 closed this as completed Aug 6, 2023
@fenilgmehta
Copy link
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
Copy link
Member

88250 commented Jan 1, 2024

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

issue.webm

@fenilgmehta
Copy link
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
Copy link
Member

88250 commented Jan 1, 2024

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
Copy link
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
Copy link
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
Copy link
Member

88250 commented Jan 1, 2024

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
Copy link
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
Copy link
Member

88250 commented Jan 1, 2024

image

image

image

Thank you.

@88250 88250 reopened this Jan 1, 2024
@fenilgmehta
Copy link
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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Development

No branches or pull requests

2 participants