Prevent widows

[benoitchantre]

A good practice of typography is to avoid widows and orphans in a text.

On small screens, this becomes more important because we have more widows.

Would it be possible to automatically insert a non-breaking space before the last word of any text (title, paragraph, list item, etc.).

[dcondrey]

patch

[SergeyBiryukov]

This should probably be added as a filter rather than hardcoded into the_content().

[ericlewis]

This is a problem that should be solved. I've implemented JS libraries like ​balance text to avoid orphans.

Having said that, I think it's intrusive for a CMS to try to fix this problem. Browsers should figure out a native solution, and ​I've tried to push a proposal in the CSSWG to accomplish this.

[dcondrey]

28449-the_content-orphans-v2.patch : Filter

[dcondrey]

Replying to SergeyBiryukov:

This should probably be added as a filter rather than hardcoded into the_content().

Hi,
I adjusted my patch, as per your suggestion, making it a filter. I also enhanced it further to avoid relying on regex and incorporated a couple of parameters to manipulate the number of words which should wrap and the characters that should be filtered for.

[ericlewis]

I'm going to suggest we close this as wontfix, and follow-up with the CSS Working Group about pushing this forward in the spec.

[dcondrey]

Replying to ericlewis:

I'm going to suggest we close this as wontfix, and follow-up with the CSS Working Group about pushing this forward in the spec.

Appears to already be in the works.. CSS Fragmentation Module Level 3 ​https://drafts.csswg.org/css-break/#breaking-controls

[benoitchantre]

Replying to dcondrey:

Replying to ericlewis:

I'm going to suggest we close this as wontfix, and follow-up with the CSS Working Group about pushing this forward in the spec.

Appears to already be in the works.. CSS Fragmentation Module Level 3 ​https://drafts.csswg.org/css-break/#breaking-controls

I haven't tested it, but it should work in many browsers : ​http://caniuse.com/#search=widows.

I think we can close this issue ; it's better to use CSS to solve that.

--

Update

Tested with Chrome : it only works for print media, not screen

[ericlewis]

​text-wrap: balanced will be in CSS4 as well. Closing this out, apologies for the wait @benoitchantre :)