Skip to content

Emojis are too huge #12312

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
realpixelcode opened this issue Jul 24, 2020 · 7 comments Β· Fixed by #12317 or #12320
Closed

Emojis are too huge #12312

realpixelcode opened this issue Jul 24, 2020 · 7 comments Β· Fixed by #12317 or #12320
Labels
topic/ui Change the appearance of the Gitea UI
Milestone

Comments

@realpixelcode
Copy link

In the new Gitea version, many emojis are displayed too huge. For example, they don't fit in regular text. These are some examples on Github: 😎πŸ€ͺπŸ”πŸ€‘β“ They just fit. That's what they look like in Gitea:

Gitea emojis

@lunny lunny added the topic/ui Change the appearance of the Gitea UI label Jul 24, 2020
@techknowlogick
Copy link
Member

Which specific version of gitea are you using?

@jolheiser
Copy link
Member

jolheiser commented Jul 24, 2020

Reproduced on try
It also happens in the title, though it is a little less apparent.

emoji

Looks like some combination of these styles

gitea/web_src/less/_base.less

Lines 1225 to 1256 in 7744b36

.emoji,
.reaction {
font-size: 1.5em;
line-height: 1.2;
font-style: normal !important;
font-weight: normal !important;
vertical-align: middle;
}
#issue-title > .emoji {
font-size: 1em;
}
.commit-summary > .emoji {
font-size: 1em;
}
.label > .emoji {
font-size: 1em;
}
.dropdown .emoji {
font-size: 1em;
}
.emoji img,
.reaction img {
border-width: 0 !important;
margin: 0 !important;
width: 1em !important;
height: 1em !important;
vertical-align: middle !important;
}

@silverwind
Copy link
Member

silverwind commented Jul 24, 2020

Strange that some of these emojis are wrapped in <span> while others aren't. Maybe a separate issue in the detection code.

For this issue: I think Emojis should not be rendered bigger than the current line height, e.g. not increase the line spacing, like here:

image

GitHub is using 1.25em, we are using 1.5em which is certainly too much.

@mrsdizzie
Copy link
Member

Seems like one is a bug not detecting the sunglasses emoji which is strange (will look at).

The size difference of emojis in general is intentional as it is what github/gitlab do also. Gitlab is 1.5em maybe Github used to be and it is now 1.25 after their recent change? I'm fine if people want to change it to 1.25 instead of 1.5 it was initially just copied from one of those.

@silverwind
Copy link
Member

I can probably do the necessary styling tweaks. I think 1.25 is ideal and it's what I've been proposing in the original emoji PR too.

@silverwind
Copy link
Member

#12317 for the 1.25em.

@realpixelcode
Copy link
Author

realpixelcode commented Jul 24, 2020

Which specific version of gitea are you using?

I don't know, I've discovered this issue on Codeberg after their big update which was announced heavily.

mrsdizzie added a commit to mrsdizzie/gitea that referenced this issue Jul 24, 2020
Previous tests weren't complicated enough so there were some situations where emojis were't detected properly. Find the earliest occurance in addition to checking for the longest combination.

Fixes go-gitea#12312
@lafriks lafriks reopened this Jul 25, 2020
lafriks added a commit that referenced this issue Jul 25, 2020
* Fix emoji detection certain cases

Previous tests weren't complicated enough so there were some situations where emojis were't detected properly. Find the earliest occurance in addition to checking for the longest combination.

Fixes #12312

* ok spell bot

Co-authored-by: Lauris BH <[email protected]>
@lafriks lafriks added this to the 1.13.0 milestone Jul 25, 2020
silverwind pushed a commit to silverwind/gitea that referenced this issue Jul 25, 2020
* Fix emoji detection certain cases

Previous tests weren't complicated enough so there were some situations where emojis were't detected properly. Find the earliest occurance in addition to checking for the longest combination.

Fixes go-gitea#12312

* ok spell bot

Co-authored-by: Lauris BH <[email protected]>
techknowlogick pushed a commit that referenced this issue Jul 25, 2020
* Fix emoji detection in certain cases (#12320)

* Fix emoji detection certain cases

Previous tests weren't complicated enough so there were some situations where emojis were't detected properly. Find the earliest occurance in addition to checking for the longest combination.

Fixes #12312

* ok spell bot

Co-authored-by: Lauris BH <[email protected]>

* Reduce emoji size (#12317)

* Reduce emoji size

Rendering should now pretty much match GitHub with 1.25em. I verified
that emojis don't increase the line height and removed unecessary size
overrides because now all emojis should appear similar in relation to
the font size.

* fix reaction hover

Co-authored-by: mrsdizzie <[email protected]>
Co-authored-by: Lauris BH <[email protected]>
@go-gitea go-gitea locked and limited conversation to collaborators Nov 24, 2020
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
topic/ui Change the appearance of the Gitea UI
Projects
None yet
Development

Successfully merging a pull request may close this issue.

7 participants