Skip to content
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

Emojis are displayed with ugly fallbacks in the classic theme (probably others too) #7024

Open
webknjaz opened this issue Jan 14, 2020 · 3 comments

Comments

@webknjaz
Copy link
Contributor

Describe the bug
$subj. I usually add "apple color emoji", "segoe ui emoji", "android emoji", "emojisymbols", "emojione mozilla", "twemoji mozilla", "segoe ui symbol", "noto color emoji" in the end of the font lists and it works perfectly.
Current CSS only list fonts that don't implement emojis at all.

To Reproduce
N/A

Expected behavior
There's different emoji fonts that could be used if they were mentioned in CSS.

Your project
https://packaging.python.org/

Screenshots
no fallback fonts:
packaging_dumb_emoji

with fallback fonts:
packaging_good_emoji

Environment info

  • OS: Linux
  • Python version: N/A
  • Sphinx version: N/A
  • Sphinx extensions: N/A
  • Extra tools: N/A

Additional context
N/A

@tk0miya
Copy link
Member

tk0miya commented Jan 16, 2020

+1; Reasonable. But I don't know what font is better for emojis. Is your list of CSS also good for Sphinx?

@tk0miya tk0miya added this to the 2.4.0 milestone Jan 16, 2020
@tk0miya
Copy link
Member

tk0miya commented Jan 16, 2020

Hmm... it seems there are no default font settings in basic theme. So adding fallback fonts affects to default font...

@webknjaz
Copy link
Contributor Author

webknjaz commented Jan 16, 2020

We could prepend the list of emoji fonts with a list of system fallbacks from here https://devhints.io/css-system-font-stack.
Also, there's a font-family value system-ui which is supported in modern browsers: https://caniuse.com/#feat=font-family-system-ui.

The trick is to have emoji fallbacks last in the list and having system fallbacks before should be fine.

Is your list of CSS also good for Sphinx?

I suppose so. I've tested it on Alabaster (sanitizers/octomachinery@787226b / https://docs.octomachinery.dev/) and also I used DevTools on packaging.python.org to inject these fonts at the end of the existing list.
It all worked well. I also use this fallback in Reveal.js slides.

N.B. Some emoji fonts (if they contain only emojis) are okay to bring to the front row but there's others that have emoji-like numbers that appear in place of legitimate digits that are expected to appear in the same style as the surrounding text. For texting, I just edited CSS rules via DevTools by removing fonts from the list one by one to see what happens...

Some refs:

@tk0miya tk0miya modified the milestones: 2.4.0, 3.0.0 Feb 7, 2020
@tk0miya tk0miya modified the milestones: 3.0.0, 3.1.0 Mar 14, 2020
@tk0miya tk0miya modified the milestones: 3.1.0, 3.2.0 Jun 6, 2020
@tk0miya tk0miya modified the milestones: 3.2.0, 3.3.0 Aug 2, 2020
@tk0miya tk0miya modified the milestones: 3.3.0, 3.4.0 Nov 1, 2020
@tk0miya tk0miya modified the milestones: 3.4.0, 3.5.0 Dec 19, 2020
@tk0miya tk0miya modified the milestones: 3.5.0, 4.0.0 Feb 14, 2021
@tk0miya tk0miya modified the milestones: 4.0.0, 4.1.0 Apr 19, 2021
@tk0miya tk0miya modified the milestones: 4.1.0, 4.2.0 Jul 10, 2021
@tk0miya tk0miya modified the milestones: 4.2.0, 4.3.0 Sep 12, 2021
@tk0miya tk0miya modified the milestones: 4.3.0, 4.4.0 Nov 8, 2021
@tk0miya tk0miya modified the milestones: 4.4.0, 5.0.0 Jan 12, 2022
@tk0miya tk0miya modified the milestones: 5.0.0, 5.x May 2, 2022
@AA-Turner AA-Turner modified the milestones: 5.x, some future version May 23, 2022
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

3 participants