Skip to content

The emoji and header in the markdown are not aligned on the same line #34019

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
hiifong opened this issue Mar 26, 2025 · 8 comments · Fixed by #34048
Closed

The emoji and header in the markdown are not aligned on the same line #34019

hiifong opened this issue Mar 26, 2025 · 8 comments · Fixed by #34048
Labels
issue/confirmed Issue has been reviewed and confirmed to be present or accepted to be implemented type/bug

Comments

@hiifong
Copy link
Member

hiifong commented Mar 26, 2025

Description

The emoji and header in the markdown are not aligned on the same line. The alignment is a bit vague, but I think it may be vertical alignment or baseline alignment. Maybe we can set vertical-align: baseline;

Image

Image

set vertical-align: baseline; after:

Image

Gitea Version

gitea.com

Can you reproduce the bug on the Gitea demo site?

Yes

Log Gist

No response

Screenshots

No response

Git Version

No response

Operating System

No response

How are you running Gitea?

gitea.com

Database

None

@silverwind
Copy link
Member

silverwind commented Mar 27, 2025

Which OS is this on? Windows? Could be related to Windows' emoji font.

@hiifong
Copy link
Member Author

hiifong commented Mar 27, 2025

Which OS is this on? Windows? Could be related to Windows' emoji font.

Windows

@silverwind
Copy link
Member

silverwind commented Mar 28, 2025

I can reproduce on MacOS as well. The emoji renders bigger on Gitea compared to GitHub:

https://gitea.com/silverwind/symlink-test#-test

Image

https://github.com./silverwind/symlink-test#-test

Image

@silverwind silverwind added the issue/confirmed Issue has been reviewed and confirmed to be present or accepted to be implemented label Mar 28, 2025
@silverwind
Copy link
Member

@hiifong Removing font-size: 1.25em; from .emoji seems to fix it. Can you post a rendering from Windows with that CSS rule disabled?

@hiifong
Copy link
Member Author

hiifong commented Mar 28, 2025

@hiifong Removing font-size: 1.25em; from .emoji seems to fix it. Can you post a rendering from Windows with that CSS rule disabled?

Image

@silverwind
Copy link
Member

Looks good. So we definitely should remove that font size. Maybe even remove the whole .emoji wrapper as I see GitHub also no longer wraps emojis.

silverwind added a commit to silverwind/gitea that referenced this issue Mar 28, 2025
It seems like most of our custom styles around the .emoji class are
useless and we can just make them render like any other text.

Fixes: go-gitea#34019
@silverwind
Copy link
Member

#34048

@hiifong
Copy link
Member Author

hiifong commented Mar 28, 2025

Looks good. So we definitely should remove that font size. Maybe even remove the whole .emoji wrapper as I see GitHub also no longer wraps emojis.

Yeah, it looks a lot better.

wxiaoguang added a commit that referenced this issue Mar 28, 2025
It seems like most of our custom styles around the .emoji class are
useless and we can just make them render like any other text. Rendering
should now match GitHub.

Fixes: #34019

Also see #11541 and
#12317 for some context. I think
browser emoji rendering has improved in recent years so these hacks are
no longer needed.

---------

Co-authored-by: wxiaoguang <[email protected]>
GiteaBot pushed a commit to GiteaBot/gitea that referenced this issue Mar 28, 2025
It seems like most of our custom styles around the .emoji class are
useless and we can just make them render like any other text. Rendering
should now match GitHub.

Fixes: go-gitea#34019

Also see go-gitea#11541 and
go-gitea#12317 for some context. I think
browser emoji rendering has improved in recent years so these hacks are
no longer needed.

---------

Co-authored-by: wxiaoguang <[email protected]>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
issue/confirmed Issue has been reviewed and confirmed to be present or accepted to be implemented type/bug
Projects
None yet
Development

Successfully merging a pull request may close this issue.

2 participants