gui design – How can I best display a blank space character?


To represent a space bar of a keyboard, U+23B5 Bottom Square Bracket (normal ⎵ bold monospace ). As alternative, U+2423 Open Box (␣). In HTML parlace, ⎵ and &blank, respectively. To represent spaces in text use the interpunct, U+2E31 Word Separator Middle Dot (⸱) or U+00B7 Middle dot (·) as alternative.

Mind repetition and other punctuation:

  • U+2E31: ⸱⸱⸱⸱Four⸱spaces⸱before,⸱now⸱⸱two,⸱one⸱at⸱end.⸱
  • U+00B7: ····Four·spaces·before,·now··two,·one·at·end.·
  • U+23B5: ⎵⎵⎵⎵Four⎵spaces⎵before,⎵now⎵⎵two,⎵one⎵at⎵end.⎵
  • U+2423: ␣␣␣␣Four␣spaces␣before,␣now␣␣two,␣one␣at␣end.␣

Monoespaced works better:

  • U+2E31: ⸱⸱⸱⸱Four⸱spaces⸱before,⸱now⸱⸱two,⸱one⸱at⸱end.⸱
  • U+00B7: ····Four·spaces·before,·now··two,·one·at·end.·
  • U+23B5: ⎵⎵⎵⎵Four⎵spaces⎵before,⎵now⎵⎵two,⎵one⎵at⎵end.⎵
  • U+2423: ␣␣␣␣Four␣spaces␣before,␣now␣␣two,␣one␣at␣end.␣

For space bar, U+23B5 Bottom Square Bracket, HTML ⎵ ( ) is way to go. It’s a symbol utilized in keyboards and virtual keyboards of cell phones, but has low font coverage. U+2423 Open Box, HTML &blank (␣) was better supported, looks better with other punctuation but is ugly in isolation: vs .

Visual representation of spaces in text are more diverse beast. In the old days of console, manuals represented spaces as a combination of b and a slash (/). There is a Unicode for that, U+2422 Blank Symbol (␢), but without the same impact of the former representation in most fonts. But the old look or new not help much. Using overlays to simulate the old ways and U+2422 directly:

A modern solution is to use the U+2E31 Word Separator Middle Dot (⸱) or U+00B7 Middle dot (·). The first is advisable, the second has broad font support.

Examples:

  • A⸱pretty⸱good⸱job⸱of⸱displaying⸱spaces. (U+2E31)
  • A·pretty·good·job·of·displaying·spaces. (U+00B7)
  • A⸱pretty⸱good⸱job⸱of⸱displaying⸱a⸱space. (U+2E31 mono spaced)note
  • A·pretty·good·job·of·displaying·spaces. (U+00B7 mono spaced)

For historical notes, usages and more alternatives, see https://en.wikipedia.org/wiki/Interpunct and https://en.wikipedia.org/wiki/Whitespace_character (buried in Overview/Definition and ambiguity/Unicode/Substitutes).


If I understand correctly, your application is displaying text as keystrokes (or text and special keys). If so, with U-2423:

With U-23B5:


note In some mono spaced fonts, it’s a glyph of different width!