Developer's Blog

[Web designing tips] – &nbsp is not a half-width space?

[In HTML, a half-width space is &nbsp:]

This is something I hear from time to time.
I also thought this a long time ago, but when I checked out [What does nbsp really mean?], I learnt a lot.
I just remembered about this again, so I would like to talk a little bit about it.

So first of all, what exactly is the [nbsp] of  ?
It is the abbreviation of [Non-Breaking Space]. In general terms this means that lines should not be broken in this space.

In addition to the same special [Space], there are also [ (Space of the same width as n)], [ (Space of the same size as m)], and others.
I have compared below just how they differ to the naked eye:

HTML code UTF8 Sample Explanation
Character/Character experimental reference Value character reference (Unicode)
Base 10 Base 16 Base 16
        || No white space(Comparitive)
      0×20 | | Standard half-width space
      0xC2A0 | | Non-Breaking space
      0xE28082 | | Space with width of “n”
      0xE28083 | | Space with width of “m”
      0xE28089 | | Narrow white space
n/a ​ ​ 0xE2808B |​| Space with 0 width
      0xE28080 | | ideographic white space(So called full-width space)

What do you reckon? They do differ slightly from browser to browser, but how ever you view these characters, they do look quite different to each other.

Going back to the initial [Half-width space and  ] issue, if you are not aware there may be times when you think [Wait a second?].
There are some programs that [replace   with half-width spaces(0x20)] and some programs that [instead of replacing 6nbsp; with half-width spaces, uses nbsp (0xC2A0]).
It doesn’t matter if like a browser it can display 0xC2A0, but it is a real problem if the program can not display them.
I have created a sample shown at the top of the page using my favourite text editor – Emacs.

As an extra, please check out the examples of replacing   with 0xC2A0 below.


1. use HTML::Entities;
2. use Encode;
3. use Data::Dumper;
4. my $text = Encode::decode('utf8', '| | | |');
5. HTML::Entities::decode_entities($text);
6. my $encoded = Encode::encode('utf8', $text);
7. print $text,"\n";
8. print Dumper $text;
9. print $encoded,"\n";
10. exit;

Reference URL:

http://en.wikipedia.org/wiki/Character_entity_reference
http://www.w3.org/TR/html401/sgml/entities.html
http://www.w3.org/TR/xhtml1/dtds.html#h-A2
http://www.w3.org/TR/html5/named-character-references.html

Please join us on Facebook for Sleipnir for Windows!


Please follow us on Twitter!

Facebook Comments