Orphans and Widows in CSS
What are orphans and widows in CSS and how can we use them the best?
When you are writing HTML content that may split over a column or a page you
should consider the orphan and widow CSS properties.
Both properties deal with the number of lines left at the beginning or at the end of a page. In this article I will dig into when and how to use them.
By the end of the article you should have a great understanding of these properties.
What is Orphans CSS?
Orphans are the lines of text that get left behind on an old page should a paragraph of text get split onto a new page.
In CSS when we talk about the orphans property then we are talking about the
minimum amount of lines that we should consider ok to be orphaned in a document.
It used to be that the orphans property was used exclusively for paged media.
This meant it would come into play when printing a page but not viewing a page.
This makes some level of sense, when you’re reading an article online you don’t
consider how many physical pages the content would occupy.
Then we got the column property and things changed. Suddenly having orphans
was a concern for both paged and screen media.
How to use CSS Orphans?
The orphans property looks like this;
p {
orphans: 5;
}This code is saying we want a minimum of 5 lines left on a page if a paragraph is going to get split.
It acts as a guide to say to the browser, if you can’t give me at least 5 lines, then put all of the text onto the new page.
The main reason you would want to set this is for layout. Starting a new paragraph on a printed page that runs for one or two lines can look untidy.
It is important to note these properties are taken as preferences and not rules to live and die by. If the browser can’t work out a way to make the text work whilst keeping to your rules, it will ignore them in favour for something it deems to work.
I’ve created a working demo that you can play about with different values for
orphans and see the result.
What is the default value for CSS Orphans?
The default value for orphans is inherit, which of course is a bit of a cop
out, this means if you don’t set a value it will take it from a parent element,
if it doesn’t have a value it will keep going up the stack.
On the latest version of Chrome on the Mac (56 at the time of writing) the computed value by default is 2. This is the value that the browser sets if you haven’t specified something yourself.
What is Widows CSS?
Widows are the lines of text that come over onto a new page should a paragraph of text get split between multiple pages, or indeed multiple columns.
Just like the orphan property it was used exclusively for paged media until
we got the column property and things changed.
How to use CSS Widows?
The widow property looks like this;
p {
widows: 5;
}What this code is doing is saying we want a minimum of 5 lines at the start of a page if a paragraph is going to get split.
It acts as a guide to say to the browser, if you’re going to start the next page with less than 5 lines, that isn’t good enough, give me the lot.
As with the orphans property, the main reason you would want to set this is for
layout. Ending a paragraph on a new printed page that runs for one or two lines
can look untidy.
It is important to note these properties are preferences and not rules. If your paragraph has one line in it and you’ve specified 3 lines in your widow, there isn’t much the browser can do to help you.
I’ve created a working demo that you can play about with different values for
widows and see the result.
What is the default value for CSS Widows?
Like orphans, the default value for widows is inherit.
And again, on the latest version of Chrome on the Mac (56 at the time of writing) the computed value by default is 2.
How to remember the difference between Widows and Orphans
Jeremy Keith has a melancholic, useful way to remember the difference, which he shared in an article about print styles
I always get widows and orphans confused so I remind myself that orphans are left alone at the start; widows are left alone at the end.
Another way is to remember that alphabetically the word “orphans” comes before “widows”.
Browser support for Orphans
Support for orphans is almost perfect, with the most recent versions of every browser supporting them bar one, Firefox.
I will try and keep the following lists updated, I would always recommend checking out caniuse.com for the most up to date information.
Browsers that do support CSS Orphans
- IE 11
- Edge 14
- Chrome 56
- Safari 10
- Opera 43
- iOS Safari
- Opera Mini
- Android Browser
- Chrome for Android
Browsers that do not support CSS Orphans
- Firefox 51
Browser support for Widows
Support for widows follows what support for Orphans is like, with Firefox lagging behind.
As with widows, I will try and keep the following lists updated, do check out caniuse.com for the most up to date information.
Browsers that do support CSS Widows
- IE 11
- Edge 14
- Chrome 56
- Safari 10
- Opera 43
- iOS Safari
- Opera Mini
- Android Browser
- Chrome for Android
Browsers that do not support CSS Widows
- Firefox 51
Testing Orphans and Widows
Something I’ve frequently had bite me is that working out how something should act with orphans and widows happens on page load, this means that if you adjust the value programatically or in Chrome Dev Tools you will not see the end result until you refresh.
In my both my widow and orphan demo I’ve had to do a dirty hack to make the browser redraw.