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.

Sign up for GitHub

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

Jump to bottom

Heavy check mark (✔) hard to see on black background #283

Closed
leoj3n opened this issue Jan 30, 2016 · 21 comments
Closed

Heavy check mark (✔) hard to see on black background #283

leoj3n opened this issue Jan 30, 2016 · 21 comments

Comments

@leoj3n
Copy link

leoj3n commented Jan 30, 2016

The check mark "✔" is nearly invisible. Is this to be expected or something to be fixed?

Any other unicode characters that need to be considered?

http://graphemica.com/%E2%9C%94
@silverwind
Copy link
Member

Not sure we can do anything about colored unicode, unless there's a way for CSS to select single letters. Even then, I'm not sure you can filter: invert text like that.

GitHub's image emoji are already handled by the way: ✔️

@silverwind
Copy link
Member

We might be able to use unicode-range to override the affected codepoints. Anyone care to compile a list of dark unicode characters?

@Mottie
Copy link
Member

Mottie commented Jan 30, 2016

Do you have an example of where the checkmark is being used? The network graph is the only place we use #000 as a background color.

@leoj3n
Copy link
Author

leoj3n commented Jan 30, 2016

@Mottie https://github.com/mauricecruz/zero-base-themes#notice

@Mottie
Copy link
Member

Mottie commented Jan 30, 2016

This is what I see on that page (110% zoom)
2016-01-30 10_13_42-mauricecruz_zero-base-themes_ chrome devtools extension that loads themes using
Are you seeing something different?

@leoj3n
Copy link
Author

leoj3n commented Jan 30, 2016

image

Google Chrome Canary on OS X

@Mottie
Copy link
Member

Mottie commented Jan 30, 2016

Ahh, so the text is being replaced. Would you copy/paste the image element here.

@Mottie
Copy link
Member

Mottie commented Jan 30, 2016

Hmm, @silverwind can you see what you can do... I don't own an Appl€ device, so...

@leoj3n
Copy link
Author

leoj3n commented Jan 30, 2016

image

Doesn't look like an image from Developer Tools inspector (above). Setting an inline text color of the <p> with !important doesn't affect the check mark on GitHub. If I do so on, say google.com, the check mark does respect the style and inherits the color. Strange.

@silverwind
Copy link
Member

Well, these are unicode glyphs. Github uses system fonts so the rendered glyph will be dependant on the OS. I'd say this is more of a design issue of Apple's glyphs than an issue specific to this style.

I assume Google uses a Webfont that has the color-respecting property of the glyph set.

@leoj3n
Copy link
Author

leoj3n commented Jan 30, 2016

Looks like this is the culprit:

.markdown-body {
  font-family: "Helvetica Neue", Helvetica, "Segoe UI", Arial, freesans, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
}

If I change that to just:

.markdown-body {
  font-family: "Helvetica Neue";
}

the heavy check mark is rendered like normal.

@silverwind
Copy link
Member

Should be fixed, thanks!

silverwind added a commit that referenced this issue Jan 30, 2016
@silverwind
Global: Exclude more hard-to-read unicode codepoints - #283
8cf62f0
@silverwind
Copy link
Member

Apple

©®™▪◼◾♠♣✔✖➕➖➗➰⬛〰

Segeo and Apple

🎶🎼💱💲🔃🔙🔚🔛🔜🔝

Non-Emoji

©®™▪◼♠♣✔✖〰

Emoji

➕➖➗➰◾⬛🎶🎼💱💲🔃🔙🔚🔛🔜🔝

silverwind added a commit that referenced this issue Jan 30, 2016
@silverwind
Global: Fix all remaining unicode isses, add generator script - #283
a51a7ff
silverwind added a commit that referenced this issue Jan 30, 2016
@silverwind
Global: Fix all remaining unicode isses, add generator script - #283
9d32cce
@silverwind
Copy link
Member

Really fixed all of them now. Turns out Github does add a g-emoji element for code points it considers to be Emojis, the checkmark isn't one of them, so I was able to cleanly invert those. Also created a script to generate the rules because I'm bad at math.

The Segeo UI Emoji font isn't handled yet, I think it's a icon font exclusive to Windows 10 which I can't test.

silverwind added a commit that referenced this issue Jan 30, 2016
@silverwind
Global: Yet more unicode fixes, handle image fallbacks - #283
f587158
@Mottie
Copy link
Member

Mottie commented Jan 31, 2016

Hmm, none of the emoji you posted in this thread are being automatically replaced for me, and I'm using Windows 10.

2016-01-30 18_23_24-heavy check mark hard to see on black background issue 283 stylishtheme

Interestingly, some do get replaced in my gmail.

2016-01-30 18_28_37- github-dark heavy check mark hard to see on black background 283 - wowm

@silverwind
Copy link
Member

Firefox on OS X:
screen shot 2016-01-31 at 10 27 21 am
Not sure why your emoji have such a dark shade on Windows.

@Mottie
Copy link
Member

Mottie commented Jan 31, 2016

The darker ones are being replaced:

<g-emoji alias="black_medium_small_square" fallback-src="https://assets-cdn.github.com/images/icons/emoji/unicode/25fe.png">◾</g-emoji>

and an invert(70%) is applied on it. If I disable that definition in the dev panel, a body { color: #c0c0c0 !important; } is applied and all the colors match. So, it looks like the unicode character isn't being replaced by the image.

Maybe we can use the body.windows selector to fix this?

<body class="logged_in   env-production windows vis-public zhio" style="overflow: auto;">

silverwind added a commit that referenced this issue Jan 31, 2016
@silverwind
Global: Apply invert only to unicode fallback images - #283
248c496
@silverwind
Copy link
Member

Try my latest change! I changed the invert so the outcome should be closer to #c0c0c0 and made it apply only to fallback images (which I see here on Firefox/Windows 7).

@Mottie
Copy link
Member

Mottie commented Jan 31, 2016

Looks good! Thanks!!

silverwind added a commit that referenced this issue Jan 31, 2016
@silverwind
Global: Fix OS X emoji invert - #283
7cc5883
@silverwind
Copy link
Member

Argh, turns out this broke OS X pure unicode characters again, had to remove > img.

@leoj3n
Copy link
Author

leoj3n commented Feb 2, 2016

👍 Thanks for all your hard work on this @Mottie and (especially) @silverwind ‼️

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
3 participants
@silverwind @Mottie @leoj3n