CSS - orphans



In CSS, the orphans property is used to control the minimum number of lines in a block of text that must be displayed at the bottom of a page, region, or column before a page or column break can occur. It is typically used in the context of controlling page breaks and pagination for printed documents or multi-column layouts.

If the number of lines at the bottom of the block is less than the value of the orphans property, the block is moved to the next page or column to ensure that the specified number of lines is displayed together.

As per typography, orphan is the first line of a paragraph that appears at the bottom of the page, alone; when the paragraph is continued on the next new page.

Possible Value

  • <integer>: Specifies the number of lines that can be shown at the bottom of a fragment before the fragmentation break. It should have a positive value only. Default value is 2.

Applies to

All the block-level elements.

DOM Syntax

object.style.orphans = "3"

This property is often used in combination with the widows property, which controls the minimum number of lines that must be displayed at the top of a page or column. Together, orphans and widows help ensure that a specified amount of content stays together during pagination, improving the readability and flow of printed documents or multi-column layouts.

orphans is not supported on Firfox browser.

CSS orphans - Integer Value

Here is an example showing the usage of orphans CSS property, where orphans value is passed through a class declaration (.orphan-demo):

<html>
<head>
<style>
   div.orphan-demo {
      background-color: tomato;
      height: 170px;
      columns: 3;
      orphans: 3;
      padding: 5px;
   }

   p {
      background-color: lightyellow;
   }

   p:first-child {
      margin-top: 0;
   }
</style>
</head>
<body>
   <h1>Orphans property</h1>
   <div class="orphan-demo">
      <p>Paragraph one that shows some text having just one line.</p>
      
      <p>
         Paragraph two in the same div "orphans-demo", with some styling applied.
         Testing for the working of orphans property of CSS.
         There are three lines in this paragraph.   
         Paragraph two having few more lines for some extra content for the testing purpose.
      </p>
      
      <p>
         Paragraph three for some extra text for the testing purpose.
         Second line in the third paragraph to test the orphans property.
      </p>
   </div>
</body>
</html>

In the above example:

  • a class is defined on div element (orphan-demo), with CSS styling such as background-color, height, padding, column and orphans.

  • the div is divided into three columns and orphans value set to 3.

  • three p elements are added under the parent div.

  • the output is based on the value of orphans value (in this case 3), and as the fragment breaks and paragraph continues in next block accordingly.

CSS orphans - Inherit Value

Here is an example showing the usage of orphans CSS property, where orphans value is passed as inherit and through an id declaration:

<html> 
<head> 
<style>
		#orphan-demo { 
			columns: 3; 
         column-gap: 5em;
         orphans: inherit;
		} 

      div {
         background-color: green;
         padding: 5px;
      }

      p {
         background-color: antiquewhite;
      }

      span {
         font-style: italic;
         color: green;
      }
	</style>
</head>
<body>
	<div id="orphan-demo"> 
		<p> 
         Paragraph one that shows some text having just one line.
		</p> 
      
		<p> 
		<span> 
         Paragraph two in the same div, with some styling applied.
         Testing for the working of orphans property of CSS.
         There are three lines in this paragraph.   
         Paragraph two having few more lines for some extra content for the testing purpose.
         The orphans CSS property is used to set the minimum 
         number of line on the old page.
		</span> 
		</p> 
      
		<p> 
         Paragraph three for some extra text for the testing purpose.
         Second line in the third paragraph.
         Testing for the orphans property
         which takes up an integer value
         or initial / inherit values. 
		</p> 
      
      <p> 
         Paragraph four in the third column of the page.
         Number of lines in this paragaraph is two.
         Testing for the orphans CSS property
         which takes up an integer value
         or initial / inherit values. 
		</p> 
	</div> 
</body>
</html>
  • An id is defined and applied on div element (#orphan-demo), with CSS styling such as column, column-gap, and orphans.

  • The div is divided into three columns and orphans value set to inherit, which inherits the default value of the parent.

  • Four p elements are added under the parent div.

  • the output is based on the value of orphans value (in this case inherit), and as the fragment breaks and paragraph continues in next block accordingly.

CSS orphans - Media Print

Here is an example showing the usage of orphans CSS property, where the orphans value is set as an <integer> through a media query (@media print):

<html>
<head>
<style>
   @media print {
      p {
         orphans: 3;
         columns: 2;
         column-gap: 5em;
      }

      button {
         display: none;
      }
   }
</style>
</head>
<body>
   <article>
   <p>
      Lorem ipsum dolor, sit amet consectetur adipisicing elit. Consequatur
      facilis vitae voluptatibus odio consequuntur optio placeat? Id, nam sequi
      aut in dolorem dolores, laudantium, quasi totam ipsam aliquam quibusdam
      velit. Lorem ipsum dolor, sit amet consectetur adipisicing elit. Consequatur
      facilis vitae voluptatibus odio consequuntur optio placeat? Id, nam sequi
      aut in dolorem dolores, laudantium, quasi totam ipsam aliquam quibusdam
      velit. Lorem ipsum dolor, sit amet consectetur adipisicing elit. Consequatur
      facilis vitae voluptatibus odio consequuntur optio placeat? Id, nam sequi
      aut in dolorem dolores, laudantium, quasi totam ipsam aliquam quibusdam
      velit. Lorem ipsum dolor, sit amet consectetur adipisicing elit. Consequatur
      facilis vitae voluptatibus odio consequuntur optio placeat? Id, nam sequi
      aut in dolorem dolores, laudantium, quasi totam ipsam aliquam quibusdam
      velit.
   </p>
  
   <p>
      Lorem ipsum dolor, sit amet consectetur adipisicing elit. Consequatur
      facilis vitae voluptatibus odio consequuntur optio placeat? Id, nam sequi
      aut in dolorem dolores, laudantium, quasi totam ipsam aliquam quibusdam
      velit.
   </p>
   </article>
   
   <button>Print</button>
   
   <script>
      const button = document.querySelector("button");

      button.addEventListener("click", () => {
      window.print();
      });
   </script>
</body>
</html>
  • A media query is defined and applied on p element, in print mode, with CSS styling such as column, column-gap, and orphans.

  • There is a button "Print" on click of which the orphans value is applied on the content.

  • The old section shows first three lines of the last paragraph.

Advertisements