How can I best display a blank space character?

Question

A web app I'm writing singles out individual characters found on a traditional keyboard. I have a very limited area in which the character can be displayed (which is basically the width of a W character in the font I'm using) meaning I can't display the word "space" or "blank space".

How can I best display the blank space character?

I've tried a couple of options, but I'm not sure if these would just lead to confusion:

• Using underline. This looks a bit too similar to the underscore character.
• The space symbol (␠ (␠)). I didn't even know this existed until I started looking for answers to this question myself, so I'm not sure if this is widely recognised.
• A faint bottom border in a different colour.
• A block character (█ (█)) like those used in a terminal to represent the cursor.
• A blank space with no style applied.

I suppose it's worth noting that this is purely for display purposes; the user has no interaction with the character other than acknowledging it's there when reading through the page (so I'm not asking about What character can I use to represent the space bar?).

Answer 1

Is not intrusive, and is barely noticeable. And Word users that are familiar with it, will recognize it easily, so you'll have some external consistency.

Based on the comments, I edited this answer to note that is necessary to generate a difference between text and interpunct so I used a slighty bigger font size and changed the color from black to light blue, so it's less noticeable. Also there are some languages (like catalan) that uses this as a character.

Is important to note that this character is used even before the computer era (latin language used it).

Answer 2

My go to has always been an blank, ␣ (␣) or the underbracket character ⎵ (⎵), which is wider. You can see them here on w3.org. I've used the underbracket a bunch in my programming courses to show space in program output.

For example These␣do␣a␣pretty␣good␣job␣of␣conveying␣a␣space becomes:

Make sure you use a font that implements the unicode glyphs so it doesn't break if the users system doesn't have them, or it could look like:

]2

Answer 3

Short answer

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.␣

---

Long answer

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:

• U+0338: Theseb̷dob̷notb̷dob̷ab̷prettyb̷goodb̷jobb̷ofb̷conveyingb̷ab̷space.

• U+2422: These␢do␢not␢do␢a␢pretty␢good␢job␢of␢conveying␢a␢space.

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:

• A ␣ p r e t t y ␣ g o o d ␣ j o b ␣ o f ␣ d i s p l a y i n g ␣ k e y s .

• A␣pretty␣good␣job␣of␣displaying␣keys.

With U-23B5:

• A ⎵ p r e t t y ⎵ g o o d ⎵ j o b ⎵ o f ⎵ d i s p l a y i n g ⎵ k e y s .

• A⎵pretty⎵good⎵job⎵of⎵displaying⎵keys.

---

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

Answer 4

Can you use color? Wikipedia uses lightblue boxes to show the characters:

But if you're limited to two colors, I would suggest these:

• ˽ ⎵⎴ - Modifying letter shelf, underbracket or overbracket to represent the button
• ⬚ ◌ - Dotted circle or square to represent emptiness
• 👽 👾 🚀 - A comedy option.

Answer 5

␣   ␣

Wikipedia lists the following characters for this purpose:

Unicode space-illustrating characters (visible)  
 
Code    Decimal  Name                  Block             Display   Entity  
U+00B7  183      Middle dot Basic      Latin             ·         ·        
U+237D  9085     Shouldered open box   Misc Technical    ⍽         -
U+2420  9248     Symbol for space      Control Pictures  ␠        -
U+2422  9250     Blank symbol          Control Pictures  ␢        -
U+2423  9251     Open box              Control Pictures   ␣        ␣

---

Jukka Korpela (author of "Unicode Explained") has a website which has this to say:

Visible spaces

There are some graphic characters that can be used a symbols for a space. Though sometimes called visible spaces, they are not spaces at all but visible notations used to indicate the appearance of spaces in instruction manuals and descriptions of texts.

The following table lists some symbols, in decreasing order by practical usefulness. Their shapes vary by font; especially the last one varies a lot.

 ␣   U+2423  OPEN BOX
␢   U+2422  BLANK SYMBOL
␠   U+2420  SYMBOL FOR SPACE

---

The symbol ␢ has a long history of use for this purpose in early computer programming. It was handwritten on coding sheets by programmers to indicate a space character to punch-card machine operators (who were like a typing pool).

I would use ␣ ␣ particularly as there is an HTML entity with such an obviously relevant name.

Answer 6

I am used to Eclipse's whitespace characters, which are used for showing whitespace in the context of code formatting.

• Space: U+00B7 "middle dot": ·
• Tab: U+2192 "rightwards arrow": →

If you can, displaying whitespace characters in a lighter color than regular text helps emphasize that these are whitespace characters. For example, if normal text is black, use gray.

Answer 7

You could always use a monospace font, then the space would be indicated by a char-sized gap :). You could highlight every space (eg <mark>&nbsp;</mark>), and set some CSS rules to make it the appropriate colour.

Answer 8

Look at the URL of this page. The spaces in-between the title's words are replaced by a dash. Its intuitive, readable and familiar.

Answer 9

When I was learning technical writing at university here in New Zealand, we were taught to use a house (Unicode number: U+2302, HTML-code: &#8962) or an up-triangle (Unicode number: U+25B3, HTML-code: &#9651) to indicate spaces.

Set-ExecutionPolicy⌂Unrestricted

Set-ExecutionPolicy△Unrestricted

Answer 10

As mentioned above, the traditional programmer's blank is a lowercase letter b, overlayed by a forward slash. These were used on hand-written coding sheets passed from programmers to keypunch operators who were unfamiliar with the programming language being used and thus required unambiguous input.

On a web page, this can be represented by entering, in sequence: a lowercase letter b, a span tag that specifies a margin-left style of -.4em, a forward slash, an end span tag

(Using a CSS class would save typing and is usually better practice).

Using em as the measurement unit allows the character to scale if the font size is changed.

Answer 11

I'm not claiming this is superior, but it is an approach that can be used: for text that is to be displayed as characters (not an image) on a screen (not printed): just use the actual string, with spaces as required, and tell the user to position the cursor on the string and use an arrow key to move and count the spaces (I do this as a reader when checking some strings and counting lengths). This has the advantage that the string can be copied and pasted, and avoids any issues of character rendering and character set support.

E.g.:

Dates can be entered with multiple spaces, as in this example, which has 2 spaces between each element "25 Dec 2016". Put the cursor on the string and use the right and left arrow keys to explore it. You can copy this and paste it into the program.

(Note: this site replaces multiple spaces entered by a single one so, ironically, this example does not work here. I did enter 2 consecutive spaces where I said I did.)