Styling the width on non-breaking space

[inktrap]

I’d like to make my non-breaking spaces have a certain width (French punctuation), without resorting to font-size. Here’s what I tried:

span.sp-thin-fr {
    display: inline-block;
    width:   0.125em;  /* 1/8 em */
    }

…but display: inline-block; overrides the non-breaking property.

Any ideas?

[Senff]

Not sure why it’s not working for you (or maybe I misunderstand). I do see some space between the last word and the period:

http://codepen.io/senff/pen/aOZzay

[inktrap]

It’s working, but the space is treated as regular instead of non-breaking, so punctuation breaks of at the end of line.

[inktrap]

That’s right, it’s as if there’s a normal space in html.

[Paulie_D]

As I understand it. French punctuation is preceded by a space.

In this case a non-breaking space is required as there will be occasions when the very last item on the end would be the punctuation.

…and this would break.

http://codepen.io/Paulie-D/pen/xGORLa

[Senff]

Duh. I should’ve seen that.

Instead of giving it a width and display:inline-block; just give it some horizontal padding.

http://codepen.io/senff/pen/EjyNop

[inktrap]

The problem is it has to be narrower than a regular space, usually 1/8 of an em.

I could give it a negative margin, but there’s no way to calculate how much to get the exact width, since every font has a slightly different space.

The only option I see is to use the code from my original post and wrap everything in nowrap span, but that overloads the content with way too much markup.

[Paulie_D]

http://lists.w3.org/Archives/Public/public-digipub-ig/2013Oct/0033.html

[apadeloup]

It’s late to answer but the post is in good place in Google :
  does a better job than   as it is narrower no-break space.

[Author]

Posts