Widows and orphans. These might sound like strange names for CSS properties, and they kind of are. They’re named as such because they come from old-school typography terms referring to, if you can believe it, lines of a paragraph. A widow refers to the last line of a paragraph that didn’t fit on the same page as the rest of the paragraph, so it’s forced out onto a new page or column. Somewhat similarly, an orphan is the first line of the paragraph that is left behind on a page, while the rest of the paragraph scoots over to the new page.
These concepts are relevant to CSS in terms of how CSS can be used to format pages for printing. These two CSS properties can be used only within paged media queries, like print. So for example, you’d use them within the following media snippet:
@media print{
//insert widow or orphan properties here
}
These properties are super helpful if you’re using CSS to format pages that might be printed, and you want to achieve a clean look with your paragraphs.
Both the widow and the orphan properties take numerical values. The values that you’re defining are basically the number of lines that you’d allow to spill over onto the next page or leave behind on the previous page. So if you’re using the widow property and you give it a value of 2, that is the minimum amount of lines that you’d allow a paragraph to spill over onto a new page. Any more than that, and the whole paragraph will appear on the next page.
If you’re using the orphan property and you give it a value of 2, the concept is similar. 2 is the minimum amount of lines that the paragraph can use on the old page before spilling over onto the next page. Any more, and the whole paragraph appears on the next page.
For examples of how you’d use the properties in context, see the snippets below:
@media print{
widows{
p: 3;
}
orphans{
p: 3;
}
}