Whitespace before some punctuation characters in French: is there a CSS way to avoid lines breaking?

Question

For example, in this sentence, "Comment allez-vous ?", the question mark and the last word in the sentence are separated by a whitespace.

When French text is written in a column, you will often get something like this:

Elle zigzague pour empiéter sur des impostures
? Jacqueline porte chance.

The line break happens between the last word of the sentence and the question mark, which is not desirable.

Elle zigzague pour empiéter sur des
impostures ? Jacqueline porte chance.

Is there a way to solve this in pure CSS? Or do we have to manually process text and wrap the punctuation and the word in a non-breaking span?

Hmmm...HTML solution? - https://stackoverflow.com/questions/15637345/how-can-i-prevent-line-breaks-between-words-and-punctuation-in-css-or-jquery — Paulie_D, Dec 19 '18 at 13:07
Is the page (or element) language set with a [lang atttibute](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/lang), e.g. ``? That would give the browser a hint - whether or not it uses the hint is a different matter. — Andrew Morton, Dec 19 '18 at 13:08
‘*wrap the punctuation and the word in a non-breaking span*’ Or just use any non-breaking space, e.g. U+202F. — Biffen, Dec 19 '18 at 13:11
The question mark with space before is a wrong syntax however you may use ` ` instead of SPACE to simulate a connection to the last character. This is not a CSS solution. — Ali Sheikhpour, Dec 19 '18 at 17:19
@Ali Sheikhpour: Are you seriously trying to correct a French speaker on proper punctuation in French? — BoltClock, Dec 19 '18 at 18:42
@Brachamul are you open to non-CSS solutions? There is no way to do this in CSS *only*. A combination of CSS and HTML, or CSS and JavaScript, or HTML and JavaScript, or just JavaScript would do it. — TylerH, Dec 19 '18 at 19:10
@TylerH, I'll accept a good workaround or an overview of the different valid options. A true CSS solution would have been ideal, since it's definitely a presentational problem. Since there is no true CSS solution, I don't have much of a choice ! And the goal is to accept any one who'll end up here in the future looking for a good alternative. — Brachamul, Dec 20 '18 at 17:26
@Brachamul I will leave it you to do this, but I would recommend then adding the [tag:javascript] tag to your question. That way many more users will see this, and you are likely to get several implementations. — TylerH, Dec 20 '18 at 17:29

score 3 · Accepted Answer · answered Dec 23 '18 at 23:51

Use   in HTML or white-space: nowrap; in CSS.

.sentence {
  width: 314px;
  border: 1px solid #eee;
}

.nowrap {
  white-space: nowrap;
}

.sentence > span {
  border-bottom: 1px solid darkred;
}

code {
  background-color: #ddd;
  padding: 0.2em;
}

<main>

<h3>Regular space</h3>
<p class="sentence">Elle zigzague pour empiéter sur des <span>impostures ?</span> Jacqueline porte chance.</p>

<h3>Avoid new line with non-breaking space HTML entity <code>&amp;nbsp;</code></h3>
<p class="sentence">Elle zigzague pour empiéter sur des <span>impostures&nbsp;?</span> Jacqueline porte chance.</p>

<h3>Avoid new line with CSS <code>white-space: nowrap</code></h3>
<p class="sentence">Elle zigzague pour empiéter sur des <span class="nowrap">impostures ?</span> Jacqueline porte chance.</p>

</main>

Whitespace before some punctuation characters in French: is there a CSS way to avoid lines breaking?

1 Answers1

Linked