,  ,   alternatives in Safari browser

Question

 ,  ,   are broken in Safari browser.

These are thin space, n-size space, m-size space which works in other browsers.

thinsp : a b c d e f g

ensp : a b c d e f g

emsp : a b c d e f g

Are there alternatives for these in Safari?

Answer 1

This could be a font problem; it might help to specify a font that contains glyphs for the fixed-width spaces used. Most fonts lack them. Good browsers don’t need the glyphs but instead increase spacing between other characters.

However, a more robust approach is to use CSS techniques for adding spacing, mainly the padding properties and, for runs of text where specific spacing is desired between all letters, the letter-spacing property. Using the latter, note that it adds spacing after the last character, too. My page on Unicode spaces shows the defined or typical widths of “fixed-width spaces” like THIN SPACE (which aren’t all really fixed-width). But it is probably better to start from the amount of desired spacing, in terms of the em unit (font size), and just forget the fixed-width spaces.

Yet another possibility is to use the normal SPACE character but wrap it in a span and set its width. This requires making it an inline block. The approach is better than the above when the desired non-CSS fallback is a regular space rather than lack of any spacing. Note that search engines should be assumed CSS-ignorant, so this approach is relevant to making them “see” a word space between characters (e.g. to see “foo bar” and not “foo bar” when you want a fixed-width space between the words “foo” and “bar”). And as usual, you can use NO-BREAK SPACE instead of SPACE in order to prevent line break.

Example:

.thin {
  display: inline-block;
  width: 0.2em;
}

<div style="font-size: 200%">
<div>a b (normal space)</div>
<div>a&thinsp;b (thin space)</div>
<div><span style="padding-right: 0.2em">a</span>b (0.2em padding)</div>
<div><span style="letter-spacing: 0.2em">ab</span> (0.2em letter spacing)</div>
<div>a<span class=thin> </span>b (space set to 0.2em width)</div>
<div>a<span class=thin>&nbsp;</span>b (no-break space set to 0.2em width)</div>
</div>

Answer 2

This problem seems to be fixed. I cannot reproduce it, anyhow. I tested with four common fonts. Here's the test page:

http://burtonsys.com/test_html_spaces.html

I don't have an Apple device, but I used a couple of cross-browser testing web sites to check it with Safari. All the space characters seem to work fine, both in Safari 9.1.3, and in Safari 7.1.

Answer 3

I wanted to align boxes in a form and used &nbsp in a span using style="padding-left: 0.7em before the input element. I then adjusted each em to align the boxes using 0.4em, 0.85em, 0.95em and 1.3em which all lined up against the input box that did not require any adjustment.