Use a geometric shape for the menu symbol (rather than the Taoist Bagua trigram for Heaven)

[gibson042]

I'm a little on the fence about this one, but it seems wrong to use U+2630 TRIGRAM FOR HEAVEN for representing a menu because the glyph happens to look approximately as desired. This geometric symbol (U+25A4 SQUARE WITH HORIZONTAL FILL) is the best substitute I could find in Unicode, but alternatively we could just use an SVG.

Before	After

[ljharb]

Why does it seem wrong? The ☰ icon is a very widely used icon to indicate a menu, and the origin of a glyph is only relevant if people think of that when they see it, and are confused or offended. Is either of those a concrete complaint here?

[gibson042]

It's at least poor form to (ab)use a code point because the associated glyph has convenient characteristics, and generally troublesome for people using a screen reader (although I do not know for certain that such is the case here). Unicode is clear about "character" corresponding with abstract meaning rather than shape.

[bakkot]

I agree the current thing is an abuse of Unicode, though I think it's kind of a shame they haven't officially blessed this usage (or given "hamburger menu" its own code point).

Concretely, I'd be happier with an SVG or faking it with CSS rather than ▤. Here's a dead simple SVG I just wrote by hand (I am not an expert):

<svg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'><path stroke='rgba(0, 0, 0, 1)' stroke-width='3' stroke-linecap='round' d='M4 7H26M4 15H26M4 23H26'/></svg>

or as a data URI:

data:image/svg+xml;charset=utf8,<svg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'><path stroke='rgba(0, 0, 0, 1)' stroke-width='3' stroke-linecap='round' d='M4 7H26M4 15H26M4 23H26'/></svg>

[gibson042]

I was reminded of this by the ecmarkup preview in Matrix. Should it land using U+25A4 SQUARE WITH HORIZONTAL FILL, or switch to SVG? And either way, I'm now also thinking about a followup that leverages ARIA like https://www.w3.org/TR/wai-aria-practices/#menu and/or https://til.simonwillison.net/javascript/dropdown-menu-with-details-summary .

[bakkot]

Let's use an SVG. I'm fine with the one I suggested above if you don't want to come up with a new one, but I'm not attached to it if you have something you'd prefer.

Re: ARAI, there's definitely room for improvement, and I'd be happy to review such a PR (though I currently lack the knowledge to write one).

[gibson042]

Let's use an SVG.

Done.

[bakkot]

LGTM other than the stroke thing. Thanks for following up, and sorry for letting this sit so long.

[gibson042]

Thanks for following up, and sorry for letting this sit so long.

Not at all, the fault was mine.