I’m starting to create a series of tutorials about different aspects of concept design. The first is about how to make software “smooth”: that is, the get rid of the irregularities that often make it hard to understand and use.
What topics would you like to see covered? And any volunteers to contribute examples or tutorials? It would be nice to have a series of them in this forum…
All the “tick” symbols in the tables in your tutorial are coloured black in my phone’s browser (Android Chrome), but on my PC (Windows Chrome) some of them are coloured as red.
The reason for the discrepancy is that on my Android device the tick symbol is being interpreted as an emoji (i.e. a picture-based glyph) and the colouring is determined by the platform (e.g. https://emojipedia.org/check-mark/ ).
Emojis (as currently implemented) break the concept of text that can have its colour styled with CSS!
It turns out the Unicode designers have developed a generic approach for dealing with the irregularity by allowing a “Variation Selector” to follow a character to choose a variation for the preceding character (such as a monochrome variant or a colour variant of an emoji).
E.g. the Unicode HTML for a tick emoji is “✔” but if you want the text variant, you would write “✔︎”.
This works on iOS but unfortunately doesn’t work on Android Chrome (a long-standing bug), so won’t actually solve the problem for your article.
You may need to solve the problem outside of the “text” concept (e.g. by embedding appropriate SVG icons in the HTML). Or you could use a workaround like using a sad face emoji next to each questionable checkmark (doing that might also make it more accessible to people who have problems seeing colours).
Ouch! Welcome to the forum, Winter, and thank you so much for pointing that out.
It’s a classic example of a concept integrity violation. The CSS styling concept is broken by the Emoji concept. I’ve updated the piece: I tried various options and ended up just putting parens around the red checkmarks and adding a note about this at the bottom.