arithmetic and a few other symbol emoji are nearly invisible (depending on background color)

[foresto]

Description

A few symbol emoji, notably the plus, minus, multiplication, division, dollar sign, check mark and a few others, are only offered in their dark grey forms by the emoji picker. This makes them difficult to see in the dark theme.

Perhaps it would be better to use the colorless unicode equivalents for these symbols, for visibility in both light and dark themes?

Steps to reproduce

• Activate the dark theme.
• Browse to the mathematical symbol section of the emoji picker. (This section is near the end on the desktop app.)
• Notice that several symbols are so close to the background color that they are difficult to see.

Version information

• Platform: desktop
• OS: ubuntu linux
• Version: 1.7.1

[ara4n]

This has been bugging me literally for years. Particularly when highlighted, the emoji is completely invisible:

I guess options are either:

• generate two different versions of twemoji; one for light and one for dark theme (this might be easiest, ironically)
• mark the glyph in twemoji as monochrome (and so pick up the actual font colour, and so respect theme)
• or remove the glyph entirely from the font and hope that the fallback font is better
• override these particular codepoints with a non-colour emoji font in the CSS

[ara4n]

from a quick eyeball of twemoji:

for i ingrep -ril 'fill="#31373D"' . ; do echo $i; egrep -io '#[0-9a-f]{6}' $i; done

the glyphs which only refer to grey are:

1f41c 1f4de 1f519 1f51a 1f51b 1f51c 1f51d 1f576 1f577 1f5a4 1f7f0 2122 25aa 25fc 25fe 2660 2663 26ab 2714 2716 2734 2795 2796 2797 27b0 2b1b a9 ae

[ara4n]

override these particular codepoints with a non-colour emoji font in the CSS

so i did this using Noto Emoji, and it looks like this:

code (which obviously shouldn't call out to google fonts, but doing so for expedience here):

diff --git a/res/themes/light/css/_fonts.pcss b/res/themes/light/css/_fonts.pcss
index 62613fcee5..0f796f8fbc 100644
--- a/res/themes/light/css/_fonts.pcss
+++ b/res/themes/light/css/_fonts.pcss
@@ -10,6 +10,25 @@
 $inter-unicode-range: U+0000-20e2, U+20e4-23ce, U+23d0-24c1, U+24c3-259f, U+25c2-2664, U+2666-2763, U+2765-2b05,
     U+2b07-2b1b, U+2b1d-10FFFF;

+// overrides from Noto for emoji which are grey in twemoji and so don't theme well.
+// see https://github.com/element-hq/element-web/issues/14695
+// Doesn't include the following 5 which come from 0.3.woff2 and 0.7.woff2 respectively
+//   1f4de - 3 - checkerboard book
+//   1f576 - 3 - sunglasses
+//   1f41c - 7 - ant
+//   1f577 - 7 - spider
+//   2b1b - 7  - grey block
+
+@font-face {
+    font-family: "Noto Emoji";
+    font-style: normal;
+    font-weight: 400;
+    font-display: swap;
+    unicode-range: U+1f4b2, U+1f519-1f51d, U+1f5a4, U+1f7f0, U+2122, U+25aa, U+25fc, U+25fe, U+2660, U+2663, U+26ab, U+2714, U+2716, U+2734, U+2795, U+2796, U+2797, U+27b0, U+a9, U+ae;
+    src:
+        url(https://fonts.gstatic.com/s/notoemoji/v51/bMrnmSyK7YY-MEu6aWjPDs-ar6uWaGWuob-r0jwqS-FGJSsYRxHOpTV331nyNs0.2.woff2) format('woff2');
+}
+
 @font-face {
     font-family: "Inter";
     font-style: normal;
diff --git a/res/themes/light/css/_light.pcss b/res/themes/light/css/_light.pcss
index d649b6b38d..5f5ce3fa9f 100644
--- a/res/themes/light/css/_light.pcss
+++ b/res/themes/light/css/_light.pcss
@@ -10,7 +10,7 @@
 /* Noto Color Emoji contains digits, in fixed-width, therefore causing
    digits in flowed text to stand out.
    TODO: Consider putting all emoji fonts to the end rather than the front. */
-$font-family: "Inter", var(--emoji-font-family), "Apple Color Emoji", "Segoe UI Emoji", "Arial", "Helvetica", sans-serif,
+$font-family: "Inter", "Noto Emoji", var(--emoji-font-family), "Apple Color Emoji", "Segoe UI Emoji", "Arial", "Helvetica", sans-serif,
     "Noto Color Emoji";

 $monospace-font-family: "Inconsolata", var(--emoji-font-family), "Apple Color Emoji", "Segoe UI Emoji", "Courier",
diff --git a/src/vector/index.html b/src/vector/index.html
index 0c21a0791b..f097b6343d 100644
--- a/src/vector/index.html
+++ b/src/vector/index.html
@@ -29,7 +29,7 @@
         script-src 'self' 'wasm-unsafe-eval' https://www.recaptcha.net/recaptcha/ https://www.gstatic.com/recaptcha/ <%= csp_extra_source %>;
         img-src * blob: data:;
         connect-src * blob:;
-        font-src 'self' data: <%= csp_extra_source %>;
+        font-src 'self' data: https://fonts.gstatic.com <%= csp_extra_source %>;
         media-src * blob: data:;
         child-src * blob: data:;
         worker-src 'self' blob: <%= csp_extra_source %>;

thoughts?

[ara4n]

my main concern is that Noto is just rather ugly and inconsistent with Twemoji - i suspect it'd be better to split out the themable emoji into a separate monochrome Twemoji variant and use them as overrides as needed. but this might be better than nothing?