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

About

Asked 19/12, 2018 at 13:0 Answered 23/12, 2018 at 23:51

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?

Efren answered 19/12, 2018 at 13:0 Comment(9)

Not with CSS I suspect. Possibly javascript. – Simplicity 19/12, 2018 at 13:5

Hmmm...HTML solution? - #15637845 – Simplicity 19/12, 2018 at 13:7

Is the page (or element) language set with a lang atttibute, e.g. <html lang="fr">? That would give the browser a hint - whether or not it uses the hint is a different matter. – Anorthic 19/12, 2018 at 13:8

‘wrap the punctuation and the word in a non-breaking span’ Or just use any non-breaking space, e.g. U+202F. – Dillion 19/12, 2018 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. – Hectogram 19/12, 2018 at 17:19

@Ali Sheikhpour: Are you seriously trying to correct a French speaker on proper punctuation in French? – Cloudy 19/12, 2018 at 18:42

@Efren 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. – Halfdan 19/12, 2018 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. – Efren 20/12, 2018 at 17:26

@Efren I will leave it you to do this, but I would recommend then adding the javascript tag to your question. That way many more users will see this, and you are likely to get several implementations. – Halfdan 20/12, 2018 at 17:29

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>

Lumpen answered 23/12, 2018 at 23:51 Comment(0)

Hot tags

Godot Unity Godot Help Programming Godot 4.X GUI GDScript 3D 2D Physics CSharp Godot 3.X VR XR Projects C++

Recommended topics

Hot tags