Now, if there’s plenty of space, everything appears normal, but if space gets too tight, both words, joined by the non-breaking space will bump down to the next line, keeping everything looking neat and tidy. To fix this, a non-breaking space character can be added between the two last words in the paragraph. When the text reflows, there are some points when the space between the last two words breaks and we end up with an orphan word.
![widows and orphans in typography widows and orphans in typography](https://cdn.sanity.io/images/k0dlbavy/production/93ac0d493375ee9c4da9c814ecebaef1358113d0-2070x1142.png)
I’ll remove the break tags and show a slightly more flexible approach. This gets the desired effect, but if we’re working on a responsive project, this forced line break can cause some pretty ugly results when the width of the container changes. We could try and force this not to happen by inserting forced line breaks further up the paragraph with a tag. They’re named as such because they come from old-school typography terms referring to, if you can believe it, lines of a paragraph. It sits all on its own and doesn’t look great. These might sound like strange names for CSS properties, and they kind of are. This paragraph has an orphan as the last word. It can also be used to refer to a dangling, lone word at the end of a paragraph, whether it comes at a page break or not. Somewhat confusingly, the term “orphan” has two meanings in typography. “2” is the default value so to increase the number of lines, a higher value of orphans can be set.
![widows and orphans in typography widows and orphans in typography](https://i0.wp.com/css-tricks.com/wp-content/uploads/2011/09/widows.png)
This snippet will ensure there are at least two lines of paragraph text before the end of the page. This not considered visually pleasing so the minimum number of lines can be controlled using the widows property. When a paragraph of text flows across multiple pages or columns, if it doesn’t all fit within one page or column, it will be split into two parts.Ī widow is the last line of a paragraph that appears on its own at the top of a new page or column. Let’s have a look at two for controlling the flow of text between pages. When dealing with this completely different medium of printed content, there are a couple of CSS properties available that don’t apply to screen media. We touched on this in “Episode 13: Media Queries”. The closest thing to working with the CSS Page spec that I’ve come across in real-world web development is creating print stylesheets. It adds functionality for pagination, page margins, page size, orientation, and extends generated content to enable page numbering and page headers and footers.
![widows and orphans in typography widows and orphans in typography](https://s3.eu-west-2.amazonaws.com/fifteen-uploads/uploads/2019/04/widow-700x394.jpg)
WIDOWS AND ORPHANS IN TYPOGRAPHY SERIES
When writing CSS, we are normally styling content that is destined for being displayed on a screen.īut there’s a whole range of properties specifically for paged media which describes how a document can be flowed into a series of pages. The widows and orphans properties are two that allow us to control how lines of text flow around page breaks. There are some properties that only apply to this media type. One type of media that CSS can apply styling to is paged media – things like digital magazines and ebooks or a website in the form of a print stylesheet. More and more these days, CSS is being used to control the styling of things other than websites. This screencast is a part of our AtoZ CSS Series.