Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
Orphans CSS Property
In typographic terminology, orphans are lines of a paragraph stranded at the bottom of a page due to a page break, while widows are lines remaining at the top of a page following a page break. Generally, printed pages do not look attractive with single lines of text stranded at the top or bottom. Most printers try to leave at least two or more lines of text at the top or bottom of each page.
- The orphans property specifies the minimum number of lines of a paragraph that must be left at the bottom of a page.
- The widows property specifies the minimum number of lines of a paragraph that must be left at the top of a page.
Syntax
selector {
orphans: number;
}
Possible Values
| Value | Description |
|---|---|
number |
Specifies the minimum number of lines that must be left at the bottom of a page (default: 2) |
Example
Here is an example to create 4 orphan lines at the bottom and 2 widow lines at the top of each page −
<!DOCTYPE html>
<html>
<head>
<style>
@page {
orphans: 4;
widows: 2;
}
.content {
font-family: Arial, sans-serif;
line-height: 1.6;
margin: 20px;
}
p {
margin-bottom: 15px;
}
</style>
</head>
<body>
<div class="content">
<p>This is a sample paragraph that demonstrates the orphans property. When this content is printed, at least 4 lines must remain at the bottom of a page before a page break occurs.</p>
<p>The orphans property ensures better typography by preventing awkward single lines from appearing at the bottom of pages during printing.</p>
<p>Similarly, the widows property ensures that at least 2 lines appear at the top of the next page after a page break.</p>
</div>
</body>
</html>
When printed, the page breaks will respect the orphans:4 and widows:2 settings, ensuring better typography with minimum 4 lines at page bottoms and 2 lines at page tops.
Browser Support
The orphans property is primarily supported in print media and may not have visible effects in web browsers unless used with print stylesheets or when printing web pages.
Conclusion
The orphans property improves print typography by controlling minimum lines at page bottoms. It works in conjunction with the widows property to create professional-looking printed documents with proper text flow across page breaks.
190 Views
