Although the @ symbol, for instance, was repurposed for internet use, the Hamburger Button (designed by Norm Cox in 1981) is not considered to be a re-use of U+2360, the Trigram for Heaven, and is not mentioned in the Unicode Chart text description of that icon.
Does anyone include U+2360 in their fonts, for use as the Hamburger Button?
2
Comments
I use Octicons by Github indirectly (embedded in other framework libraries). This saves development time as I can develop a working web app in a few hours. No extra time for graphical design.
Octicons https://fonts.simplythebest.net/iconfont/1061/Octicons-font.font named the symbol "three-bars":
After a fast scan through the list of symbols I guess that many (more than 40%) have an assigned code point in Unicode. ~70% are shared with other icon fonts and are established as "symbol language" in applications. Unicode should include them.
There are benefits to icon fonts:
Florian makes the good point that icon fonts have design benefits. If these icons had a consistent value, it would be very easy to switch out different fonts to fit each design. Whereas, right now, designers have to scrutinise large icon libraries and/or know the right search terms for each icon collection (e.g. Google's Material Design Icons). Without standardisation, it's easier to stick to a few familiar libraries… rather than diversify.
Would a unicode value for the hamburger icon benefit or hamper accessibility?
I rarely see animated glyphs in linear typesetting, although interaction design frequently adopts animated icons (*.gif, coded *.svg, etc). Motion can act as form of subtle feedback for micro-interactions, helping users build mental models about how the system works as they interact with it. Isn't this an opportunity for variable font technology (e.g. the horse <🐎> on Axis Praxis)?
These icons can simply exist as images. They do not behave like text. You cannot type them, search for them, or copy/paste them. Their semantics are context-dependent: is 🔍 a search icon or a zoom/magnify icon? Do both uses get different codepoints? UI icons mostly appear in isolation, so shaping rules do not apply. Kerning might be useful, but you can also kern images to text:
And if you want to use fonts for icons (e.g., for wight matching), putting those glyphs into the private use area is fine already. Assistive technologies like screen readers should be served a description that is independent of the display format, be it an image resource or a font glyph.
Icons often exist as a larger character-set, that are balanced in shape and space. In this sense, they have shaping rules that reflect other mono-spaced fonts or writing systems.
The great benefit of Unicode typesetting is that we are no longer hampered by conflicting, inconsistent and incompatible encoding variations (or image-based texts). Yet, when working on reprints/custom versions of technical manuals or academic content… PUA/image-based chars are a cause for painstaking restyling. I welcome Unicode's mathematical operators (incl. alphanumeric bold and frakturs) for exactly this reason. Better to typeset everything with the right values first time around, and thus ameliorate the risk of costly retrofitting in future editions.
I appreciate there may not be a Unicode value when a glyph is incredibly rare/esoteric, yet many of these icons are in frequent use across countless apps, websites, etc.
Logos are common icons. Share on Twitter, fork on GitHub, upload to Dropbox, listen on Soundcloud, call with Zoom, connecting to Android device …, pay with Paypal, search on Amazon, … all frequent use cases where logos are aligned with the text.
How should the following be encoded in Unicode:
Two crosshair with ring and a center dot icons, but the second one is denser and also has a square inside the ring. Are these different codepoints? They would need to be for copy/paste to be lossless. Or do I have to prepare a colorfont with GSUB rules or multiple styles.
What about icons where the color has semantic meaning? Like here:
There are many icons in use that are not the result of a convention to facilitate international communication. What does the rightmost icon at the bottom indicate?
Four boxes linked by three lines. It does not make any intuitive sense to me, and I have never seed it outside this app (Xcode). What does it do? I did not know. I clicked it, and thus I learn what it was designed to do. Is that good UI design? Perhaps not, but in a densely packed UI, pro apps often have no room to label and explain everything. Read the manual or simply click it, and soon you will know what that icon means.
Also, the three colorful discs in the screenshot above, how large should they be? Should Unicode offer a variety of icon sizes? Or does the typographer need to scale icons? But then you lose text alignment. Unicode is already spotty in this regard; see the following video from 11:44:
https://youtu.be/Xw7oBf8EmoM?t=704
And should icons be defined by shape (like most combining diacritics in Unicode) or by semantic value (like most base characters in Unicode)? E.g., are there UI circles, or is there an unread icon, a modified indicator icon, a now icon, …
I should have clarified; this was in response to
I am mostly OK with Operators, arrows, etc. since most math typesetters either only use the basics or compose their own creations with TikZ, CSS, or similar. I think I would have preferred a more composable encoding on those glyphs using GPOS/GSUB or similar to create more complex forms. That would also help with input. (Currently, you either scroll through glyph tables, learn a plethora of TeX command names, or search using Detexify.)
Color, font size, font family, baseline offset, alignment, and much more can also contribute to the semantics of text. Some things are lost when crossing mediums, including the transfer from PDF/HTML/RTF/… to plain text.
No fiddling around required: all I type is “… choose the \Icon{select-all-tool} Select All tool …” with a select-all-tool.pdf file in my assets folder and the image icon is part of the text flow.
The handbook is typeset with TeX, so that is where I defined the \Icon{…} macro. Not sure about InDesign, but most other authoring tools I use also offer mixed content:
HTML:
Markdown:
Thanks! I'm familiar with mixed content, but not a way to easily extract icons from typeset content (e.g. PDF) without access to the source files. Equally, I'm not clear whether it's possible to copy/paste this kind of mixed content between common typesetting programs.
It's a shame that support for *.svg is not more widespread. I believe that many businesses/platforms consider it a "luxury" feature of content creation.
That’s why the new handbook will be available in both PDF from (great for printing) and in HTML from (great for linking, screen readers, and small screens). But that would be a separate topic.
Not everything embedded in text needs to be text, and that isn’t even true for things that you want to be reliably copied and pasted. Indeed, insofar as you need something like UI icons in a manual to look exactly like the icons as they appear in the actual UI, having them encoded as text that can be displayed in different ways depending on a change in font is exactly what you don’t want.