{"id":868,"date":"2020-02-11T12:38:08","date_gmt":"2020-02-11T17:38:08","guid":{"rendered":"https:\/\/www.blindemanwebsites.com\/today-i-learned\/?p=868"},"modified":"2020-11-06T17:42:11","modified_gmt":"2020-11-06T22:42:11","slug":"always-include-widows-and-orphans","status":"publish","type":"post","link":"https:\/\/www.blindemanwebsites.com\/today-i-learned\/2020\/always-include-widows-and-orphans\/","title":{"rendered":"Always Include Widows and Orphans"},"content":{"rendered":"\n

What:<\/strong> 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 creating a multi-column layout.<\/p>\n\n\n\n\n\n\n\n

How:<\/strong> You suggest the number of lines left on a page if a paragraph is split across a page or column. For example:<\/p>\n\n\n\n

  p,\n  h2,\n  h3 {\n    orphans: 3;\n    widows: 3;\n  }<\/code><\/pre>\n\n\n\n
Where:<\/strong> The article Orphans and Widows in CSS<\/a> by Toby Osbourn on tosbourn.com<\/p>\n\n\n\n
Thoughts:<\/strong> Support is good across browsers, except, oddly, in Firefox, there is a 16 year old open bug report<\/a> 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.<\/p>\n\n\n\n
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.<\/p>\n\n\n\n
Good article on multi-column layout<\/a> by Rachel Andrew can be found at Smashing Magazine.<\/p>\n\n\n\n
And if you want to read a bit more about using columns as a masonry gallery of sorts, you can read CSS Columns Across Browsers<\/a><\/p>\n\n\n\n
\n\n\n\n
\n
Photo of Haystack Rock at Pacific City, Oregon by me<\/a><\/div>\n<\/div>\n","protected":false},"excerpt":{"rendered":"
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 creating a multi-column layout.<\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[19,17,129,130,49,128,131],"class_list":["post-868","post","type-post","status-publish","format-standard","hentry","category-new-things","tag-browser-support","tag-css","tag-multic-column","tag-orphan","tag-printing","tag-tosbourn","tag-widow","infinite-scroll-item"],"_links":{"self":[{"href":"https:\/\/www.blindemanwebsites.com\/today-i-learned\/wp-json\/wp\/v2\/posts\/868","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.blindemanwebsites.com\/today-i-learned\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.blindemanwebsites.com\/today-i-learned\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.blindemanwebsites.com\/today-i-learned\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/www.blindemanwebsites.com\/today-i-learned\/wp-json\/wp\/v2\/comments?post=868"}],"version-history":[{"count":3,"href":"https:\/\/www.blindemanwebsites.com\/today-i-learned\/wp-json\/wp\/v2\/posts\/868\/revisions"}],"predecessor-version":[{"id":1122,"href":"https:\/\/www.blindemanwebsites.com\/today-i-learned\/wp-json\/wp\/v2\/posts\/868\/revisions\/1122"}],"wp:attachment":[{"href":"https:\/\/www.blindemanwebsites.com\/today-i-learned\/wp-json\/wp\/v2\/media?parent=868"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.blindemanwebsites.com\/today-i-learned\/wp-json\/wp\/v2\/categories?post=868"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.blindemanwebsites.com\/today-i-learned\/wp-json\/wp\/v2\/tags?post=868"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}