How to prevent a line break between text elements where there is no whitespace

Question

I'm trying to keep two text elements from being split apart by line breaks in an epub file (xhtml and css).

Example:

This is a line of text that reaches the end of the display and ^[12]what I don't want is for that superscripted part to be separated from the next word.

Which ends up looking like this:

This is a line of text that reaches the end of the display and ^[12]
what I don't want is for that superscripted part to be separated
from the next word.

I would like it to look like this:

This is a line of text that reaches the end of the display and
^[12]what I don't want is for that superscripted part to be
separated from the next word.

Some software on my pc keeps the superscripted <sup>[12]</sup> and the what together, but my Sony ebook reader doesn't. Other e-readers may do the same. I'd like it to consistently keep the superscripted part together with the next word and avoid a line break between them.

I've looked at quite a few similar questions, but can't find anything that matches this problem.

I'd prefer to deal with this problem via css, rather than editing a huuuuuge bunch of files by adding tags throughout it, which would be further complicated by the fact that the word after each superscripted part can be any word, ruling out a simple search and replace.

In a similar vein, I'd also like to extend the "keeping things together" bit when the next word is "I" or "A" or "a" or any short 2-letter word, so a sentence like

bla bla bla bla bla bla bla bla bla bla ^[35]in the simplest way imaginable.

would line break in either of these ways:

bla bla bla bla bla bla bla bla bla bla ^[35]in the
simplest way imaginable.

bla bla bla bla bla bla bla bla bla bla
^[35]in the simplest way imaginable.

but NOT break like:

bla bla bla bla bla bla bla bla bla bla ^[35]
in the simplest way imaginable.

bla bla bla bla bla bla bla bla bla bla ^[35]in
the simplest way imaginable.

Is there perhaps a way to set some margin property or whatever so that any superscript tag must be a minimum distance removed from the right hand margin, or else it will be moved to the next line? I could then set that minimum distance to encompass the tagged part plus an additional 2 or 3 character widths.

Something like the page break after : avoid; property but working at the line (not page) level would be great. Or even an orphan: 5; type property for lines might do the trick.

I'm thinking (and hoping) that both the problems I've outlined above can have one and the same solution.

Answer 1

There is no CSS solution that does not require changes to the markup or content. The reason is that there is no element to attach CSS styles to. CSS has no properties that would control line breaking behavior depending on the characters in content (like “don’t break after ‘]’ characters”); maybe it will some day.

There are several ways to prevent line breaks, such as the nonstandard but well-supported nobr element, the CSS setting white-space: nowrap (set on an element inside which automatic line wrapping is to be disabled), and the special character zero-width no-break space (ZWNBSP). While all of these work generally well in modern web browsers, they have problems in ebook readers. You need to analyze which user agents are important and test the various approaches on them. Note that ZWNSP is unsafe in the sense that when not supported (in some ebook readers and in very old web browsers), it creates a problem that is more serious than the one being solved (an odd-looking symbol is shown). The other approaches may fail, but just in the sense of not having any effect.

After choosing the approach, consider whether it can be implemented using client-side JavaScript, i.e. code that runs after the page has loaded and may modify the document tree e.g. by inserting new elements. For example, if the issue is with bracketed expressions and brackets are not used otherwise, the code could just insert a special character after the closing bracket or recognize the next word and wrap the bracket and the word in an element.

Answer 2

For the benefit of others trying to solve similar sticky problems, have a look at the available "special" space characters. These are the pages on wikipedia I checked out: https://en.wikipedia.org/wiki/Space_%28punctuation%29 and https://en.wikipedia.org/wiki/Zero-width_joiner There's also the "thinspace" and the "hairspace", in case you're looking for a "space" that is narrower in size than the regular space.