User Experience Stack Exchange is a question and answer site for user experience researchers and experts. Join them; it only takes a minute:

Sign up
Here's how it works:
  1. Anybody can ask a question
  2. Anybody can answer
  3. The best answers are voted up and rise to the top

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:

  • Example 1 Using underline. This looks a bit too similar to the underscore character.
  • Example 2 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.
  • Example 2 A faint bottom border in a different colour.
  • Example 3 A block character (█ (█)) like those used in a terminal to represent the cursor.
  • Example 4 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?).

share|improve this question
11  
Strongly related question: Is the middle dot the best way to signify a space? – Andrew Leach Mar 10 at 16:45
1  
Are all of the characters going to be separated visually? That is, are they all separate boxes that the character lies in? If so, I'd just use no style, unless you have some reason that a single box being empty means something else (like no input). – agweber Mar 10 at 22:23
1  
@JamesDonnelly Actually, I wasn't suggesting the middle dot. Perhaps I should have linked directly to my answer, where I say that middot is not the best character and suggest an "underbracket" or blank-indicator bracket as Ben has below. – Andrew Leach Mar 11 at 8:09
3  
Possible duplicate of What character can I use to represent the space bar? – RedGrittyBrick Mar 11 at 11:24
1  
I do not see this as a duplicate. The proposed duplicate is asking how to represent the use of the physical space bar. This question is asking how to visually represent a blank/space character. – Evil Closet Monkey Mar 11 at 23:06

Interpunct

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

share|improve this answer
26  
a lot of programming-centric text editors use this for trailing whitespace as well, albeit in a faded color. – Woodrow Barlow Mar 10 at 21:24
8  
This is what Notepad++ uses when you ask it to make invisible characters visible (the pilcrow button). – Pharap Mar 10 at 22:23
9  
I too enjoy the interpunct, but as Woodrow points out, a faded color really helps it be less noticeable. I think in your example of black text on white they are quite obtrusive. – agweber Mar 10 at 22:25
3  
Within text, this works very well, but in a standalone key I’m not sure it’s so clear. – PLL Mar 12 at 21:17
2  
Adding to @agweber poing. Fading colour is also important, because some languages use this symbol as part of their grammar (eg, catalan; il·lusió). – igor milla Mar 14 at 8:56

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:

example with blank

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:

Example with font not containing the glyphs]2

share|improve this answer
41  
These█do█not█do█a█pretty█good█job█of█conveying█a█space. imgur.com/Uj8fZeKl.png . Please be wary of not using characters that may not exist on the user's system, as this is, in fact, a web app. If you go this route, please please please include the font with the app. – Tyzoid Mar 10 at 22:13
6  
@Tyzoid For sure! If you're going to use unicode make sure the font you're using implements those glyphs. That being said I'm not sure it's unreasonable to expect user's systems to have a font that implements all unicode symbols. For example my system is serving those glyphs from the STIX General. – Ben Mar 10 at 22:18
2  
@Ben It may be the case for most cases, but I think it is unreasonable to assume users' systems have all unicode symbols available. Mine doesn't, as evidenced by the screenshot of your answer. (Also, for the benefit of people like me, can you include a screenshot of what the text should look like?) – Tyzoid Mar 10 at 22:22
6  
The other advantage of this is you can see where you have multiple space characters in a row. Ie you you tell there are 4 characters here: ⎵⎵⎵⎵ and three here: ⎵⎵⎵, much easier than here: ____ vs. ___ – sixtyfootersdude Mar 11 at 16:45
2  
Also worth saying that these aren't showing up on the SE android app. – SuperBiasedMan Mar 11 at 18:32

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 .

  • Aprettygoodjobofdisplayingkeys.

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 .

  • Aprettygoodjobofdisplayingkeys.


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

share|improve this answer
    
There’s U+2422 Blank Symbol, as seen in several other answers. – Crissov Mar 12 at 6:56
    
Thanks, I edited to mention that. I cannot found this before because the new rendering of "b slash" (or "b solidus") is not like the like in the days of typewriters. Gosh, I feel old now. – André LFS Bacci Mar 12 at 15:05
    
I assume Lucida Sans Unicode (of the fonts listed at fileformat.info) matches your expectations the best. – Crissov Mar 12 at 15:43
    
PS: U+2E31 is semantically fine, but badly supported and (if it is) usually looks just like U+00B7, which may have less desirable line breaking behavior but is available universally. U+2027 also looks the same (maybe positioned a bit higher) but is the wrong character for the job, because it joins the words around it – it’s for dictionaries. U+2024/5 are one and two dots on the baseline, which may be better than broad U+2026 or standard period U+002E. – Crissov Mar 12 at 16:07

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

enter image description here

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.
share|improve this answer
35  
Not💩 sure💩 this💩 is💩 a💩 good💩 idea. – Pierre Arlaud Mar 11 at 9:11
8  
@PierreArlaud I didn't even mention that shit. – PixelSnader Mar 12 at 13:21
    
@PierreArlaud Your idea is full of crap! We laughed our 💩 producers off, when we've read it. – Konrad Viltersten Mar 13 at 8:52

␣   ␣

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.

share|improve this answer
    
So if there are symbols for displaying space, are there symbols for displaying space symbols? – shelvacu Mar 15 at 2:56

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
share|improve this answer
11  
uhh... I have a really hard time to find the space in there. It looks too much like a character, so I have to read the word twice to even split the words at the right place... – Falco Mar 11 at 10:47
    
@Falco, so do I. I guess it depends on the typeface chosen. – Greenstone Walker Mar 11 at 20:20
2  
I’ve seen that being used to display a column separator (or tabulator), but not for normal inter-word spaces. – Crissov Mar 12 at 12:32

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.

share|improve this answer
4  
Trouble is, the - will look just like a -! – wizzwizz4 Mar 13 at 12:31

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.

share|improve this answer

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.

share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.