Always Include Widows and Orphans

What: Widows and orphans in CSS refer to leftover lines at the beginning or ending of a page, when you’re printing a website, or to the leftover lines at the beginning or ending of a column when you’re using multicol.

How: You suggest the number of lines left on a page if a paragraph is split across a page or column. For example:

  p,
  h2,
  h3 {
    orphans: 3;
    widows: 3;
  }

Where: The article Orphans and Widows in CSS by Toby Osbourn on tosbourn.com

Thoughts: Support is good across browsers, except, oddly, in Firefox, there is a 16 year old open bug report that got some attention two years ago and there doesn’t seem to be any reason why this hasn’t been implemented, except that it just hasn’t. I have to say I’m disappointed in my favorite browser.

On a more personal note, I came across this in one of my own stylesheets for a website I hadn’t spend any time on in the last two / three years and I have no memory of putting them in. I had to look up what it was.

Good article on multicol by Rachel Andrew can be found at Smashing Magazine.


Photo of Haystack Rock at Pacific City, Oregon by me

Leave a Comment