No break space and alignment

[roger64]

Hi

I use a lot of them as French punctuation rules recommend to use them. One of the use case is at the beginning of a paragraph, right after a "tiret de dialogue" (see screenshot). Adding a no-break space allow a nice vertical alignment of the first letters.

However, some may argue that the no-break space is justified, and as the space it represents can - slightly - vary, the alignment cannot be perfect.

I think, there are two ways to represent a no-break space
- if this character belongs to the embedded font, it can be represented by a fixed size space and the alignment is perfect.
- if this character is created by the reading software, it may be justified, and some glitches in the vertical alignment may appear.

If the above statement right?, what's the best way to obtain a perfect alignment?

[Tex2002ans]

Originally Posted by roger64

No-break space and alignment

I use a lot of them as French punctuation rules recommend to use them.

Did you accidentally post this in the wrong thread?

Originally Posted by roger64

One of the use case is at the beginning of a paragraph, right after a "tiret de dialogue" (see screenshot).

I don't read French, but from what I gather, you use the HORIZONTAL BAR (U+2015):

―

as a "quotation dash" instead of an EM DASH (U+2014) (how well the bar character is supported on actual devices... I'm not sure).

If there is supposed to be a space after, and the bar isn't flush against the text, your best bet might be the NO-BREAK SPACE (U+00A0) since it's the most well-supported.

(See issues with more "rare spaces" below.)

* * *

Hmmm... I'm not a French reader, so I don't know.

All I've ever read about is French spacing around your typical punctuation:

!?:;«»

In that case, the proper French spacing would use a THIN SPACE (U+2009) (or technically the NARROW NO-BREAK SPACE (U+202F)).

But to be the most compatible (and won't line-break between punctuation+text), just stick with the NO-BREAK SPACE (U+00A0).

It's been discussed thoroughly in these threads:

break/no-break and other spaces
Problem with inline image (Posts #26, #30 , #35, + especially my tests in #48)

Originally Posted by roger64

However, some may argue that the no-break space is justified, and as the space it represents can - slightly - vary, the alignment cannot be perfect.

A no-break space can be justified, it's not a fixed-width space.

The only difference from a normal space is it doesn't allow line-breaks.

Originally Posted by roger64

I think, there are two ways to represent a no-break space
- if this character belongs to the embedded font, it can be represented by a fixed size space and the alignment is perfect.
- if this character is created by the reading software, it may be justified, and some glitches in the vertical alignment may appear.

If the above statement right?, what's the best way to obtain a perfect alignment?

You won't be able to get that "perfect alignment" in ebooks.

The closest you could probably get is using a fixed-width space instead (like a THIN SPACE), but those are less well supported, and could lead to more egregious issues.

So I would still just say use a NO-BREAK SPACE:

<p>―&nbsp;This is your sentence.</p>

and don't worry about the minute wiggling of first-character alignment.

[roger64]

Sorry for posting in the wrong thread and thanks for your answer.

The narrow no-break space would be perfect if it was widely recognized. It's not.
The no-break space is the second best choice and is widely recognized. It's declared winner.

[Hitch]

Originally Posted by roger64

Sorry for posting in the wrong thread and thanks for your answer.

The narrow no-break space would be perfect if it was widely recognized. It's not.
The no-break space is the second best choice and is widely recognized. It's declared winner.

Oh, hey, it's not like the forum police (mods) will come along and beat you for posting in the wrong place.

I did want to 2nd your comment about the thin-space. I really, really wish it would be widely recognized! There's a reason it exists and that's because, it's needed, dammit.

Hitch

[Tex2002ans]

Originally Posted by roger64

The narrow no-break space would be perfect if it was widely recognized. It's not.

Thin space is the next most widely supported... but even that has inconsistent line-breaking applied across programs (noted in Post #45 referenced above).

(Now, the reason why you would ever want a thin space to actually line-break baffles me...)

Originally Posted by roger64

The no-break space is the second best choice and is widely recognized. It's declared winner.

Sadly, yes.

There's also all these ugly and hackish "solutions" floating around online, like trying to do:

<p>―<small>&nbsp;</small>This is a sentence.</p>

but that would probably introduce even worse issues.

Originally Posted by Hitch

I did want to 2nd your comment about the thin-space. I really, really wish it would be widely recognized! There's a reason it exists and that's because, it's needed, dammit.

Indeed. Most common case in English is inner/outer quotes right next to each other:

“And then she said, ‘Are they supported yet?’ ”

but French... there just ain't no way around it!

Originally Posted by Hitch

Oh, hey, it's not like the forum police (mods) will come along and beat you for posting in the wrong place.

Maybe we could poke them and get these few posts split. It sure would make it easier to find if you didn't have search-engine-fu like me. :P

[pdurrant]

Originally Posted by Hitch

Oh, hey, it's not like the forum police (mods) will come along and beat you for posting in the wrong place.

Originally Posted by Tex2002ans

Maybe we could poke them and get these few posts split. It sure would make it easier to find if you didn't have search-engine-fu like me. :P

Yes, when asked, they will come along and split posts into their own thread.

[DNSB]

Originally Posted by pdurrant

Yes, when asked, they will come along and split posts into their own thread.

Thanks.

[doubleshuffle]

Would using an empty span of a fixed width be a very bad and hackish solution?

Like this:

<span class="gap"></span>

span.gap {width: 10px} or {width: 0.5%} or whatever value you'd like...

You'd have a space that would be different on different screens, but it would be the same on one page.

[pdurrant]

Can a span be set to be non-breaking?

[doubleshuffle]

I don't think so. But that wouldn't matter in this use case: it's always right after an mdash at the beginning of a line, isn't it?

[RbnJrg]

Hi Roger:

Try this:

<p>—<span class="ps">    </span>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<p>—<span class="ps">    </span>Nulla ac tellus nunc. Phasellus imperdiet leo metus, et gravida lacus.</p>
<p>—<span class="ps">    </span>Donec metus ligula, elementum at pellentesque pellentesque, suscipit ac nunc. Etiam lobortis, massa ac aliquam auctor, augue nisl sagittis urna, at dapibus tellus erat ullamcorper ligula.</p>

with

p {
  text-align: justify;
}

.ps {
  white-space: pre;
}

Of course, you can set as your wish the amount of the spaces contained between the span tags (I used four, you can use whatever).

VERY IMPORTANT: BEFORE AND AFTER the span block (<span class="ps"> </span>), there should be NO SPACE.

[jhowell]

Originally Posted by doubleshuffle

Would using an empty span of a fixed width be a very bad and hackish solution?

Yes, it would, but it might work.

Sizing in em would make the most sense because it would scale with the font size. I think that you would also need to use display:inline-block to allow the width to be effective. (I have not tested any of this.)

[roger64]

Originally Posted by RbnJrg

Hi Roger:

Try this:

<p>—<span class="ps">    </span>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<p>—<span class="ps">    </span>Nulla ac tellus nunc. Phasellus imperdiet leo metus, et gravida lacus.</p>
<p>—<span class="ps">    </span>Donec metus ligula, elementum at pellentesque pellentesque, suscipit ac nunc. Etiam lobortis, massa ac aliquam auctor, augue nisl sagittis urna, at dapibus tellus erat ullamcorper ligula.</p>

with

p {
  text-align: justify;
}

.ps {
  white-space: pre;
}

Of course, you can set as your wish the amount of the spaces contained between the span tags (I used four, you can use whatever).

VERY IMPORTANT: BEFORE AND AFTER the span block (<span class="ps"> </span>), there should be NO SPACE.

Hi Ruben

This seems to work. I'll use it for my next book on MR.

Thanks for your always creative ideas.

[Tex2002ans]

Originally Posted by roger64

This seems to work. I'll use it for my next book on MR.

... oh gods... don't do it.

Just because something could be done doesn't mean it should.

Originally Posted by jhowell

Sizing in em would make the most sense because it would scale with the font size. I think that you would also need to use display:inline-block to allow the width to be effective. (I have not tested any of this.)

I took RbnJrg's example code and ran with it.

Attached is a sample EPUB using this CSS:

p {
  text-align: justify;
}

.dialoguespace {
  display: inline-block;
  width: .25em;
}

.quotationspace {
  display: inline-block;
  width: 1.25em;
}

Using these 3 CSS-based spacing:

Spoiler:

<p>―<span class="dialoguespace"> </span>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>

[...]

<p>―<span class="dialoguespace">    </span>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>

[...]

<p><span class="quotationspace">― </span>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>

And unicode spacing:

• &nbsp;
• &thinsp;
• actual NARROW NO-BREAK SPACE character

And the HTML-based:

• <p>―<small>&nbsp;</small>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>

Testing Notes

I tested using:

• ADE 4.5 (Windows)
• Sigil 0.9.14
• Gitden Reader 4.5.3 (Android)
• PocketBook 3.21.16694 (Android)
• Kindle Previewer 3.34

Caution!!! I used the actual HORIZONTAL BAR character... it doesn't appear in ADE 4.5! So I would probably recommend using the EM DASH.

Unicode-based

Thin Space + Narrow No-Break Space don't change size in any.

Note on Stretchiness of &nbsp;: Depending on renderers, justification may change the size:

• ADE 4.5 doesn't

All others do.

Kindle Note: The &nbsp; after the HORIZONTAL BAR was very thin (looked to me like the size of an actual THIN SPACE). Perhaps a special kerning pair built-in.

CSS-based

EPUB-based readers looked to handle these okay, and the gap between didn't move.

But Kindle Previewer 3 started to break when raising the font sizes.

HTML <small>

This hack didn't work... It might help in a handful of extremely rare cases where that tiny amount of ems might tell the algorithm not to stretch the &nbsp;.

Perhaps you could also add this to your CSS:

small {
	font-size: 50%;
}

(Or whatever size you want your hacked "thin space" to be.)

... but even then... shifting the window size around in Sigil still caused issues.

Breaking Across Lines

(I only tested this in Sigil/ADE by adding a nearly-full line of text before the bar + stretching the window to perfect size.)

Sigil: All non-CSS solutions kept the bar+first-word across lines as they should.

The CSS-based ones didn't work, except for:

<p><span class="quotationspace">― </span>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>

ADE: These all broke across lines:

• CSS-based
• <small>&nbsp;</small>
• Thin Space

Final Thoughts

... so yeah, I really wish Thin Space + Narrow Non-Breaking Space were actually better well supported... that would be the best/proper solution.

[RbnJrg]

Originally Posted by Tex2002ans

... oh gods... don't do it.

Just because something could be done doesn't mean it should.

I don't understand you. Why do you say that

<p>—<span class="ps">    </span>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<p>—<span class="ps">    </span>Nulla ac tellus nunc. Phasellus imperdiet leo metus, et gravida lacus.</p>
<p>—<span class="ps">    </span>Donec metus ligula, elementum at pellentesque pellentesque, suscipit ac nunc. Etiam lobortis, massa ac aliquam auctor, augue nisl sagittis urna, at dapibus tellus erat ullamcorper ligula.</p>

with

p {
  text-align: justify;
}

.ps {
  white-space: pre;
}

doesn't work?