How can I best display a blank space character?

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

    @AndrewLeach I hadn't considered using the `·` character for this. Unfortunately I'm using this on the app to separate certain strings (e.g. Example 1 · Hello, world!), and I guess I'd consider this more of a separator than anything else (I may be completely wrong there though of course).

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

    There are two Unicode chars meant for that purpose: one looks like a sideways '[' and the other is a slashed 'b'.

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

    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.

    "singles out individual characters" as to show individual keys of keyboard pressed, or its visual effects on text? See may reply for examples.

    I think it would help to clarify exactly what this text does for the user. You say they don't have to interact with it and they only need to "acknowledge" it's there, but what does it tell them? Is it help text for input somewhere else, just presentation of information about spaces (like a Wikipedia article or something)? This might matter.

    I think it's worth pointing out that these non-literal representations of string characters such as whitespace should be presented *as representations* (eg. faded/coloured/highlighted, and semantically marked with some kind of "alternate voice" for machine-reading). You should expect that these "unusual" characters *can also appear literally in the source text*, so it's important to disambiguate.

    The most literal equivalent for "tab" characters is ⭾ `U+2B7E Horizontal Tab Key`, although it's quite visually dense. You could visually render it using an icon instead of a Unicode text character. If that's too much work, there's lots of good horizontal arrows which can function well visually (the typeface will be important here): ⬌ `U+2B0C`, `U+1F846`, ⭲ `U+2B72`, ↦ `U+21A6`, `U+1F782`. I use for Vim; it looks clear with multiple consecutive tabs. Remember to flip directional arrows for RTL languages.

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

    a lot of programming-centric text editors use this for trailing whitespace as well, albeit in a faded color.

    This is what Notepad++ uses when you ask it to make invisible characters visible (the pilcrow button).

    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.

    I tried to use another color but couldn't. Is there an option here to add inline CSS style or text color?

    @IAmJulianAcosta - no, workaround is to supply an image with rendered sample

    Within text, this works very well, but in a standalone key I’m not sure it’s so clear.

    Not only um programming editors, but is a real, historical punctuation entity: https://en.wikipedia.org/wiki/Interpunct

    Adding to @agweber poing. Fading colour is also important, because some languages use this symbol as part of their grammar (eg, catalan; il·lusió).

    That awkward moment when Microsoft Word has a shining moment in UX...

    _In classical Latin, a center dot was used to demarcate word boundaries (before the space was "invented")._ from https://www.quora.com/Whats-this-punctuation-%C2%B7-How-can-I-type-it-on-my-computer-What-is-it-used-to-do

  • 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

    I think the underbracket does a good job of being distinguishable from an underscore.

    These█do█not█do█a█pretty█good█job█of█conveying█a█space. http://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 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 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?)

    You bet. I think serving a font that has those glyphs is definitely the way to go.

    RedGrittyBrick answer notes that this has a html entity `&blank`

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

    Also worth saying that these aren't showing up on the SE android app.

    My experience is that is very rare to find systems with a complete Unicode font installed. Even just trying to find such a font to download is difficult.

    I disagree. Unicode is the current standard and all modern operating systems support it. There will of course be unfortunate people who are stuck on older systems, so being nice to them is good — but this is not a reason not to use the proper character "␣" and AFAIK it is in the default Unicode fallback font on all platforms.

    If a font/typeface fails to include a certain unicode character we know we'll need, that's a font problem, not really relevant to this discussion. It *should* goes without saying that part of building a user interface is providing the fonts necessary to render that user interface. That doesn't mean "shy away from perfect Unicode characters because they're uncommon". Tyzoid's screenshot is a symptom of a bug in StackOverflow, Tyzoid's browser, or their machine. In this specific case, a UX/programming website should be covering every single Unicode point (and not relying on any OS fonts).

  • 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!

    There’s `␢` U+2422 Blank Symbol, as seen in several other answers.

    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.

    I assume Lucida Sans Unicode (of the fonts listed at fileformat.info) matches your expectations the best.

    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.

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

    Not sure this is a good idea.

    @PierreArlaud I didn't even mention that shit.

    @PierreArlaud Your idea is full of crap! We laughed our producers off, when we've read it.

    with color you can't easily show how many spaces between the words when there are multiple consecutive ones

  • ␣ ␣

    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.

    So if there are symbols for displaying space, are there symbols for displaying space symbols?

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

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

    Trouble is, the `-` will look just like a `-`!

    Those are hyphens `‑` (U+2011) . Dashes are `–` (en dash, U+2013) and `—` (em dash U+2014). Also, some URLs use a plus symbol, `+` (U+002B), while others plainly write `%20` (U+0020 is the Unicode character for space). This is called Percent-encoding, a part of the URI set.

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

    The middle dot is the best solution for space, but for tab it takes more than one column on most monospaced fonts. I prefer the black right-pointing small triangle (U+25B8) which can be combined with the middle dot on vim to show tabs.

  • 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
    

    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, so do I. I guess it depends on the typeface chosen.

    I’ve seen that being used to display a column separator (or tabulator), but not for normal inter-word spaces.

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

License under CC-BY-SA with attribution


Content dated before 7/24/2021 11:53 AM