CSS Pagination (Print)

किसी book editor की कल्पना करें जो exactly तय करता है कि हर chapter एक नए page पर कहाँ शुरू होना चाहिए, और सुनिश्चित करता है कि कोई table दो pages के बीच कभी आधा न कटे -- readers किसी टूटी हुई row का बाकी हिस्सा देखने के लिए आगे-पीछे flip करना पसंद नहीं करते। CSS pagination rules browser को वही editorial instructions देते हैं जब यह किसी webpage को physical pages पर print करता है।

In this page:

@page Rule
Named Pages और :first
किसी Element से पहले और बाद के Breaks Control करना
किसी Element को Split होने से रोकना: break-inside
Widows और Orphans

Syntax

css

@page {
  size: A4;
  margin: length;
}
selector {
  page-break-after: always;
  break-inside: avoid;
}

@page Rule

@page वह styling define करता है जो specifically printed pages पर लागू होती है, सबसे common रूप से page margins और page size set करते हुए, और यह सिर्फ किसी print stylesheet या print media query के अंदर मतलब रखता है -- इसका normal screen rendering पर कोई असर नहीं होता।

Note:

Accepted values:
size: auto | A4 | letter | landscape | portrait | <length> <length> — page size
margin: <length> — page margins
@page :first — सिर्फ पहला page
@page :left | :right — left और right pages

उदाहरण: The @page Rule

css

<style>
body { font-family: sans-serif; padding: 1rem; }
@page {
  margin: 2cm;
  size: A4;
}
</style>
<h1>Printed page</h1>
<p>Open the print preview: the page gets a 2cm margin and A4 size.</p>

Named Pages और :first

@page rule सिर्फ पहले printed page को अलग style करने के लिए एक :first pseudo-class support करता है (जैसे किसी cover page के लिए एक बड़ा top margin), और named page selectors किसी document के अलग-अलग sections को अलग-अलग @page rules इस्तेमाल करने देते हैं।

Note:

Accepted values:
@page :first — पहला printed page
@page :left — left-hand pages
@page :right — right-hand pages
@page name { } — named page, page: name वाले किसी element पर लागू

उदाहरण: Named Pages and :first

css

<style>
body { font-family: sans-serif; padding: 1rem; }
@page :first {
  margin-top: 5cm;
}
</style>
<h1>First page title</h1>
<p>In print, the first page gets a 5cm top margin.</p>

किसी Element से पहले और बाद के Breaks Control करना

break-before और break-after (पुरानी page-break-before/page-break-after properties के modern replacements) किसी दिए गए element से ठीक पहले या बाद में एक page break force या avoid करते हैं, आमतौर पर हर नए chapter या section को हमेशा एक नए page पर शुरू करने के लिए इस्तेमाल किए जाते हैं।

Note:

Accepted values:
break-before: auto — default, कोई forced break नहीं
break-before | break-after: page — हमेशा page break करता है
break-before | break-after: left | right — इस तरह break करता है कि अगला page left या right page हो
break-before | break-after: column — अगले column में break करता है
break-before | break-after: avoid | avoid-page | avoid-column — possible होने पर एक break avoid करता है
break-after break-before जैसी ही values लेता है
inherit | initial | unset | revert — हर property द्वारा accepted CSS-wide keywords

उदाहरण: Controlling Breaks Before and After an Element

css

<style>
body { font-family: sans-serif; padding: 1rem; }
h1 {
  break-before: page;
}
</style>
<p>Intro text</p>
<h1>Starts on a new printed page</h1>
<p>Chapter text.</p>

किसी Element को Split होने से रोकना: break-inside

break-inside: avoid printer को बताता है कि किसी दिए गए element के content को दो pages में बिल्कुल भी split न करे -- tables, figures, या code blocks के लिए ज़रूरी जहाँ बीच में split होने से printed page unreadable हो जाएगा।

Note:

Accepted values:
break-inside: auto — default, split हो सकता है
break-inside: avoid — box को साथ रखता है
break-inside: avoid-page — अंदर कोई page break नहीं
break-inside: avoid-column — अंदर कोई column break नहीं
inherit | initial | unset | revert — हर property द्वारा accepted CSS-wide keywords

उदाहरण: Preventing an Element From Splitting: break-inside

css

<style>
table { border-collapse: collapse; }
td { padding: 8px; }
table {
  break-inside: avoid;
}
</style>
<table border="1"><tr><td>Row 1</td></tr><tr><td>Row 2</td></tr></table>

Widows और Orphans

widows और orphans किसी paragraph की उन minimum lines की संख्या control करते हैं जो किसी page split के top (widows) या bottom (orphans) पर एक साथ दिखनी चाहिए, page पर अकेली छूटी हुई एक stray line के awkward typographic case को रोकते हुए।

Note:

Accepted values:
orphans: 2 — किसी page के bottom पर default minimum lines
widows: 2 — किसी page के top पर default minimum lines
widows: <integer> — कोई भी positive integer
orphans: <integer> — कोई भी positive integer
inherit | initial | unset | revert — हर property द्वारा accepted CSS-wide keywords

उदाहरण: Widows and Orphans

css

<style>
p { background: #eef6ff; padding: 6px; }
.page { column-count: 2; width: 360px; height: 120px; border: 2px solid #1e6fd9; }
p {
  widows: 3;
  orphans: 3;
}
</style>
<div class="page"><p>Long paragraph one. Long paragraph one. Long paragraph one. Long paragraph one. Long paragraph one. Long paragraph one.</p><p>Long paragraph two. Long paragraph two. Long paragraph two. Long paragraph two.</p></div>

Live Example

Chapter Quiz — Complete all 25 topics to unlock

0/25 topics done

Complete these topics first:

← Previous Lesson CSS Print Styles Next Lesson → CSS Dark Mode

CSS Pagination (Print)

@page Rule

Named Pages और :first

किसी Element से पहले और बाद के Breaks Control करना

किसी Element को Split होने से रोकना: break-inside

Widows और Orphans

Chapter Quiz — Complete all 25 topics to unlock

Login to run this code