38

There is em dash and en dash. Is there an "en" equivalent to   ? Is there an en equivalent to pure Ascii 32?

I want a better way to write this:

123<span class="spanen">&nbsp;</span>456<span class="spanen">&nbsp;</span>789

or this:

123<span class="spanen"> </span>456<span class="spanen"> </span>789
user89021
  • 14,784
  • 16
  • 53
  • 65
  • 6
    ` ` for en-space, ` ` for em-space, and `&puncsp;` for punctuation-space. See http://stackoverflow.com/q/8515365/632951 for more info. Btw, what do you mean by *"en equivalent to pure Ascii 32"*? – Pacerier May 17 '15 at 08:09

5 Answers5

59

&thinsp; (thin space) should do

Note that &nbsp; does not have the same width as an &mdash; (—); to separate numbers you should use a narrow no-break space (U+202F).

As others have mentioned, you are better off using the CSS property word-spacing to define the width of your spaces. It is probably a good idea to combine it with white-space:nowrap; to avoid breaking lines between groups of numbers and keep the full number on a single line.

knittl
  • 246,190
  • 53
  • 318
  • 364
  • this was exactly what i was looking for in the first place. but i accepted the css answer, because it is even better and is also answering the question how i wrote it. – user89021 Apr 27 '10 at 12:05
  • as i said in my answer: go with word-spacing and white-space properties – knittl Apr 27 '10 at 12:17
  • If you use _white-space_ property, remember the value is "_nowrap_" instead of the suggested "_no-break_" – Daniel Abril Feb 28 '20 at 08:38
  • You also have even narrower `&hairsp;` and many other choices: https://stackoverflow.com/a/8515417/1327983 – dolphin Mar 15 '20 at 11:40
23

Don't use hacks that make no sense. If you wish to separate some words, I suggest you use the CSS property word-spacing:

.strangeNumbers {
  word-spacing: 0.5em;
}
<span class="strangeNumbers">123 456</span>
Gleb Kemarsky
  • 10,160
  • 7
  • 43
  • 68
ANeves
  • 6,219
  • 3
  • 39
  • 63
  • do you know if all modern browsers do this? – user89021 Apr 27 '10 at 12:04
  • 1
    Of course you have to use `white-space: nowrap;` to make sure this number will not split into two lines. – Maciej Sep 29 '11 at 13:11
  • 1
    Nice, but better to use ` ` instead of space. – Aleksei Zabrodskii Apr 25 '12 at 20:09
  • @elmigranto why? I now think there must be a Unicode non-breaking-space character to separate numbers, like OP wanted, and that it would be the best pick. But if not using that exact character then I would prefer to use css's `word-spacing` and `white-space:nowrap;`, instead of a wrong character. – ANeves Apr 26 '12 at 08:50
  • @ANeves, I just wanted to point out that breaking a line in the middle of some cash amount (for example) would look ugly. Never heard about Unicode nbsp, not so advanced in css either. My bad :) – Aleksei Zabrodskii Apr 26 '12 at 09:45
  • (@elmigranto Ah, you're right that it is better to use html entities to represent the characters, rather than writing the character. [Either in Unicode or another character encoding.]) – ANeves Apr 26 '12 at 12:16
  • .. and use negative word-spacing for a smaller-than-normal space – commonpike Feb 13 '18 at 14:41
  • 1
    Spacing features are built into (good) modern fonts, and aren't "hacks". See a much better answer with examples of many different kinds of spaces here: https://stackoverflow.com/a/8515417/1327983 – alttag Mar 17 '19 at 18:45
14

The Unicode character U+2002 EN SPACE (&#x2002;, &#8194; or as entity reference &ensp;) is a space with en width.

Gumbo
  • 643,351
  • 109
  • 780
  • 844
  • same here: this is exactly what i was looking for in the first place. but i accepted the css answer, because it is even better and is also answering the question how i wrote it. – user89021 Apr 27 '10 at 12:06
  • 1
    This is, however, not exactly a small space after all. – Michael Piefel May 14 '14 at 08:58
6
&thinsp;

... and various other non-standard space characters are not properly implemented in some fixed fonts.

This will will foul up your rendering on the web browser end in an uncontrollable manner, and you can't fix it by being specific about the font, because you can't control what actual font is being used by the web browser — even if you specify the font-name or font-family, that doesn't mean the font they have is the same as the font you have.

But you can build a 100%-compatible space of any size you want, though, and it's very easy. The em value is the current font-size. It's the height, but whatever the width of the font is, it's always a constant relative to the height in a fixed-width font. So you can take advantage of that.

Here's how to make a 1/2 width, non-breaking space within the context of a fixed-width font that works with everything. I show it implemented in a span's style="" option, but of course you can make a CSS class instead to make its use less clumsy:

<span style="font-size: .5em;">&nbsp;</span>

Here's how to make a 1/4 width, non-breaking space:

<span style="font-size: .25em;">&nbsp;</span>

...and so on.

This always works with space sizes smaller than the current full-width space because the character is shorter than the other characters on the line, so they control the line spacing, not the shorter character.

If you want a space that is wider than one space, use a combination of full spaces and shorter spaces. While you will get a wider space if you use something like 1.5em, you will also get a taller space, and so that will affect the line spacing.

While this solution is annoyingly cumbersome, it has the desirable attribute of always working — which none of the others do.

fyngyrz
  • 2,458
  • 2
  • 36
  • 43
1

You could alter your CSS in such:

.spanen{word-spacing:.6em;}
  • austin, thank you. this is quite the same as the accepted answer. the other was earlier, so what can i do – user89021 Apr 27 '10 at 12:08
  • +1: pardon, but mine wasn't earlier. When I posted my answer I saw austin's, and the only reason I didn't delete mine was that I felt mine was a bit more complete. – ANeves Apr 27 '10 at 13:14