Mac पर किसी एक लेख को मैगज़ीन-शैली के क्षेत्रों में प्रवाहित करने के लिए, ब्राउज़र लेआउट हेतु CSS कॉलम या स्वतंत्र रूप से रखे गए क्षेत्रों के लिए Pages में लिंक किए गए टेक्स्ट बॉक्स इस्तेमाल करें। CSS Regions ने अलग-अलग ब्राउज़र बॉक्स के बीच अपने आप प्रवाह का वर्णन किया था, लेकिन मौजूदा डेस्कटॉप ब्राउज़र इसका समर्थन नहीं करते। CSS Regions संगतता

यह गाइड आपको एक सतत लेख के लिए लेआउट चुनने और बनाने में मदद करती है: पाठ क्षेत्र A में शुरू होता है, B में जारी रहता है और C में समाप्त होता है। ब्राउज़र का उदाहरण आपके नियंत्रण वाले स्थानीय दस्तावेज़ में नमूना पाठ इस्तेमाल करता है; यह किसी मौजूदा सार्वजनिक वेबसाइट में बदलाव नहीं करता।

क्या ब्राउज़र अलग-अलग टेक्स्ट क्षेत्रों को अपने आप जोड़ सकता है?

W3C का CSS Regions मसौदा ठीक इसी व्यवस्था का वर्णन करता है। एक स्रोत flow-into का उपयोग करके किसी नामित प्रवाह में सामग्री देता है, और गंतव्य बॉक्स उसे flow-from का उपयोग करके प्राप्त करते हैं। गंतव्य दस्तावेज़ क्रम में एक शृंखला बनाते हैं, जिससे सामग्री अलग-अलग स्थानों और आयामों वाले बॉक्स के बीच जारी रह सकती है। हालाँकि, प्रकाशित दस्तावेज़ 9 अक्टूबर 2014 का Working Draft है। किसी सुविधा का विनिर्देश में वर्णन होने से यह सिद्ध नहीं होता कि वह ब्राउज़र में उपलब्ध है। CSS Regions Module Level 1

मौजूदा संगतता जानकारी के अनुसार Safari, Chrome, Firefox और Edge में CSS Regions समर्थित नहीं है। WebKit ने भी एक पूर्ण किए गए कार्य-विवरण में इसे हटाने का रिकॉर्ड दर्ज किया है। इसलिए किसी आधुनिक पेज में पुराने डिक्लेरेशन जोड़ने से लेख का भरोसेमंद प्रवाह नहीं मिलता। CSS Regions संगतता, CSS regions का समर्थन हटाएँ

पहले तय करें कि इच्छित लेआउट का कौन-सा पहलू आवश्यक है। तीन बराबर कॉलम, स्वतंत्र रूप से रखे गए तीन बॉक्स और तीन मुद्रित पेजों के लिए अलग-अलग टूल चाहिए।

आवश्यक परिणाम व्यावहारिक तरीका सीमा
ब्राउज़र के नियमित कॉलम में सतत लेख नेटिव CSS मल्टी-कॉलम लेआउट कॉलम एक ही कंटेनर के होते हैं
प्रिंट या PDF के लिए ब्राउज़र से बनाए गए पेज Paged.js पेजिनेशन के लिए इसकी स्क्रिप्ट और दस्तावेज़ सेटअप आवश्यक है
Mac पर स्वतंत्र रूप से रखे गए बॉक्स में प्रवाहित होता पाठ Pages में लिंक किए गए टेक्स्ट बॉक्स परिणाम Pages दस्तावेज़ होता है
ब्राउज़र के मनमाने बॉक्स में अपने आप प्रवाहित होता पाठ कस्टम लेआउट कार्यान्वयन CSS Regions की हटाई गई सुविधा यह काम नहीं कर सकती

ये विकल्प दस्तावेज़ीकृत मॉडलों पर आधारित हैं: MDN जनरेट किए गए कॉलम, Paged.js पेज फ्रैगमेंटेशन और Apple लिंक किए गए टेक्स्ट-बॉक्स थ्रेड का वर्णन करता है। इस तालिका को इन क्षमताओं से निकली निर्णय-सहायिका समझें। मल्टी-कॉलम लेआउट, Paged.js कैसे काम करता है, Mac पर Pages में टेक्स्ट बॉक्स लिंक करें

CSS कॉलम से सतत ब्राउज़र लेख बनाएँ

यह तरीका तब इस्तेमाल करें जब नियमित कॉलम डिज़ाइन की ज़रूरत पूरी करते हों। लेख का पूरा पाठ एक ही कंटेनर में रखें और ब्राउज़र को तय करने दें कि प्रत्येक कॉलम कहाँ समाप्त होगा। MDN के अनुसार मल्टी-कॉलम लेआउट सतत प्रवाह बनाता है, लेकिन अलग-अलग कॉलम की चौड़ाई स्वतंत्र रूप से तय नहीं की जा सकती और न ही हर कॉलम को अलग पृष्ठभूमि रंग दिया जा सकता है। मल्टी-कॉलम लेआउट

अपने Mac पर TextEdit खोलें और File > New, फिर Format > Make Plain Text चुनें। नीचे दिया गया पूरा दस्तावेज़ पेस्ट करें, उसे article-columns.html नाम से सहेजें और पूछे जाने पर Use .html चुनें। TextEdit में HTML फ़ाइल बनाने के लिए Apple ने यही चरण बताए हैं। Mac पर TextEdit में HTML दस्तावेज़ों के साथ काम करें

नीचे पूरा HTML दस्तावेज़ दिया गया है, जिसमें सारी स्टाइलिंग और नमूना सामग्री शामिल है। इसे किसी लाइब्रेरी, नेटवर्क संसाधन या JavaScript की ज़रूरत नहीं है। लेआउट देखने के लिए सहेजी गई फ़ाइल ब्राउज़र में खोलें; यहाँ रेंडरिंग का परीक्षण नहीं किया गया है।

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Article A: Column Study</title>
  <style>
    * { box-sizing: border-box; }
    body {
      margin: 0;
      padding: 24px;
      background: #f4f1e9;
      color: #262626;
      font: 18px/1.6 Georgia, serif;
    }
    main {
      max-width: 960px;
      margin-inline: auto;
    }
    h1 {
      margin: 0 0 24px;
      font-size: 2rem;
      line-height: 1.15;
    }
    article {
      columns: 260px 3;
      column-gap: 24px;
      column-rule: 1px solid #bdb7ab;
      column-fill: balance;
      overflow-wrap: anywhere;
    }
    p { margin: 0 0 1em; }
    @media (max-width: 640px) {
      article { columns: auto; }
    }
  </style>
</head>
<body>
  <main>
    <h1>Article A: Column Study</h1>
    <article aria-label="Synthetic article">
      <p>Section A begins with a study of simple forms. A square,
      a circle, and a narrow rectangle sit on a pale surface.
      Their spacing establishes a steady visual rhythm.</p>
      <p>The first arrangement leaves generous space around each
      form. The second brings the forms closer together. Both
      arrangements use the same pieces in a different order.</p>
      <p>Section B considers the surface beneath the forms.
      A smooth sheet creates an even field. A folded sheet
      introduces a line that changes the composition.</p>
      <p>A small label identifies each arrangement. Label A
      belongs to the wider spacing, while label B belongs to
      the closer spacing. The labels remain part of the text.</p>
      <p>Section C returns to the complete composition. The
      rectangle sits near one edge, with the circle beside it.
      The square completes the sequence at the other end.</p>
      <p>The final arrangement leaves an open area in the
      center. All three forms remain visible, and the text
      ends here with the marker END-A.</p>
    </article>
  </main>
</body>
</html>

columns शॉर्टहैंड 260 CSS पिक्सेल की पसंदीदा चौड़ाई और अधिकतम तीन कॉलम का अनुरोध करता है। कितने कॉलम समा सकते हैं, यह ब्राउज़र तय करता है। उदाहरण की 960-पिक्सेल चौड़ी सामग्री में, 24-पिक्सेल के दो अंतराल से अलग तीन कॉलम की अनुमानित चौड़ाई हर एक के लिए (960 − 2 × 24) ÷ 3 = 304 CSS पिक्सेल होगी। इस गणना की जाँच की गई है; यह ब्राउज़र में लिया गया माप नहीं है। मल्टी-कॉलम लेआउट

शीर्षक लेख के ऊपर रहता है क्योंकि वह कॉलम कंटेनर के बाहर है। उसके भीतर सभी छह पैराग्राफ़ अपने मूल क्रम में रहते हैं। संकरा लेआउट देखने के लिए ब्राउज़र विंडो का आकार बदलें, फिर अंतिम मार्कर END-A ढूँढ़कर पुष्टि करें कि आप लेख के अंत तक पहुँच सकते हैं।

बाकी सामग्री छिपाए बिना कॉलम भरने का तरीका नियंत्रित करें

उदाहरण में लेख की ऊँचाई अपने आप तय होती है और column-fill: balance इस्तेमाल किया गया है। संतुलन की कोशिश सामग्री को कॉलमों में बाँटकर करने की जाती है। अगर आपके डिज़ाइन में आगे बढ़ने से पहले एक कॉलम को तय ऊँचाई तक भरना ज़रूरी है, तो column-fill: auto उपयुक्त सेटिंग है। MDN इंटरऑपरेबिलिटी के अंतर दर्ज करता है और बताता है कि Chrome auto को तभी ध्यान में रखता है जब कंटेनर का ब्लॉक आयाम में आकार तय हो, जैसे इस क्षैतिज लेआउट में ऊँचाई। column-fill

तय ऊँचाई से एक अहम समस्या हो सकती है: अतिरिक्त पाठ कंटेनर के बाहर क्षैतिज दिशा में और कॉलम बना सकता है। ऊँचाई तय करने से लेख केवल दिखाई देने वाले कॉलमों तक सीमित नहीं होता। MDN इस ओवरफ़्लो व्यवहार का स्पष्ट वर्णन करता है। उस बाकी सामग्री को छिपाने के लिए overflow: hidden का इस्तेमाल न करें। मल्टी-कॉलम लेआउट में ओवरफ़्लो संभालना

पढ़ने के लेआउट के लिए ऊपर इस्तेमाल की गई अपने आप तय होने वाली ऊँचाई रखें, जब तक क्षैतिज दिशा में आगे बढ़ना जानबूझकर न किया गया हो। अगर आप तय ऊँचाई वाले कॉलम आज़माते हैं, तो पूरी क्षैतिज चौड़ाई देखें और फ़ॉन्ट आकार या चौड़ाई में हर बदलाव के बाद अंतिम मार्कर फिर से जाँचें। केवल पहली स्क्रीन का साफ़-सुथरा दिखना इस बात का पर्याप्त प्रमाण नहीं है कि पूरा लेख समा गया है।

पैराग्राफ़ के विरामों को सामग्री की संरचना मानें, कॉलम के तयशुदा अंत के रूप में नहीं। छोटे समूहबद्ध आइटम में break-inside: avoid का इस्तेमाल करके उन्हें अलग होने से रोकने की कोशिश की जा सकती है, जैसा MDN कार्ड के लिए दिखाता है। हर लंबे पैराग्राफ़ पर यह नियम लागू करने से लेआउट कम लचीला हो सकता है, इसलिए इसे वहीं जोड़ें जहाँ किसी खास इकाई को साथ रखना पढ़ने में मदद करे। मल्टी-कॉलम लेआउट

अगर क्षेत्रों के आकार या स्थान अलग-अलग होने चाहिए तो?

एक अमूर्त लेआउट पर विचार करें जिसमें चौड़ा क्षेत्र A, उसके ऊपर संकरा क्षेत्र B और निचले-दाएँ कोने में अलग क्षेत्र C हो। केवल पेज पर तीन कंटेनर रखकर CSS कॉलम इस मनमानी शृंखला को नहीं बना सकते। उनका स्वचालित प्रवाह मल्टी-कॉलम कंटेनर तक सीमित है; गंतव्य बॉक्स जोड़ने के लिए CSS Regions मसौदे में अलग व्यवस्था प्रस्तावित की गई थी। मल्टी-कॉलम लेआउट, CSS Regions Module Level 1

Mac पर ऐसी डेस्कटॉप रचना के लिए, जहाँ बॉक्स को स्वतंत्र रूप से रखना ज़रूरी है, Pages में दस्तावेज़ीकृत टेक्स्ट थ्रेडिंग उपलब्ध है। A, B और C के क्रम में तीन टेक्स्ट बॉक्स रखें और पूरा लेख पहले बॉक्स में डालें। Apple के अनुसार थ्रेड खाली बॉक्स या पहले से पाठ वाले बॉक्स, दोनों से शुरू की जा सकती है। Mac पर Pages में टेक्स्ट बॉक्स लिंक करें

  1. बॉक्स A चुनें और थ्रेड शुरू करने के लिए ऊपर बने उसके सफ़ेद वृत्त पर क्लिक करें।
  2. हर खाली गंतव्य बॉक्स चुनें और थ्रेड में जोड़ने के लिए उसके सफ़ेद वृत्त पर क्लिक करें। साझा वृत्त का रंग और क्रम-संख्याएँ जाँचें।
  3. क्रम ठीक करने के लिए किसी बॉक्स के वृत्त पर क्लिक करें और Layout Order के नीचे उसका नंबर चुनें।
  4. अगर अंतिम बॉक्स में क्लिपिंग संकेतक दिखे, तो कोई बॉक्स बड़ा करें या एक और लिंक किया हुआ बॉक्स जोड़ें। लॉक किए गए या समूहबद्ध बॉक्स लिंक नहीं किए जा सकते। Mac पर Pages में टेक्स्ट बॉक्स लिंक करें

उसी पेज पर किसी बॉक्स को दूसरी जगह ले जाने से थ्रेड का पढ़ने का क्रम अपने आप नहीं बदलता। Layout Order का सोच-समझकर इस्तेमाल करें। इससे Pages दृश्य रचना के लिए एक व्यावहारिक तरीका बनता है, साथ ही यह स्पष्ट रहता है कि इसके टेक्स्ट-बॉक्स थ्रेड ब्राउज़र में कोई सुविधा नहीं जोड़ते। Mac पर Pages में टेक्स्ट बॉक्स लिंक करें

Paged.js या Regions पॉलीफ़िल कब इस्तेमाल करें?

जब इच्छित परिणाम पेजों का क्रम हो, तब Paged.js चुनें। इसके आधिकारिक दस्तावेज़ में एक chunker का वर्णन है जो सामग्री को पेज पर रखता है, ओवरफ़्लो पहचानता है और सामग्री को नए बनाए गए पेजों पर आगे जारी रखता है। ब्राउज़र-आधारित पेजिनेशन के लिए यह एक उपयोगी मॉडल है, लेकिन दस्तावेज़ स्वतंत्र रूप से रखे गए स्क्रीन क्षेत्रों में मनमानी थ्रेडिंग का समर्थन स्थापित नहीं करते। Paged.js कैसे काम करता है

दस्तावेज़ीकृत ब्राउज़र सेटअप के लिए आपका HTML और CSS, Paged.js स्क्रिप्ट, वेब सर्वर और ब्राउज़र आवश्यक हैं। इससे ऊपर दिए गए अकेली स्थानीय फ़ाइल वाले उदाहरण की आवश्यकताएँ बदल जाती हैं। लाइब्रेरी की सेटअप गाइड का पालन करें और निर्यात करने से पहले बनाए गए पेज जाँचें। Paged.js से शुरुआत करें

PDF आउटपुट के लिए, यह गाइड पेजिनेशन के बाद ब्राउज़र का प्रिंट डायलॉग खोलने, PDF आउटपुट चुनने, प्रिंट मार्जिन और ब्राउज़र के हेडर व फ़ुटर हटाने तथा बैकग्राउंड ग्राफ़िक्स चालू करने की सलाह देती है। प्रिंट नियंत्रण के नाम ब्राउज़र के अनुसार अलग हो सकते हैं। Paged.js से शुरुआत करें

Adobe का पुराना CSSRegions.js प्रोजेक्ट क्षेत्रों के बीच थ्रेडिंग का अधिक सीधा अनुकरण करता है, लेकिन उसके अपने दस्तावेज़ उसे प्रयोगात्मक बताते हैं और स्पष्ट रूप से सलाह देते हैं कि नेटिव समर्थन के विकल्प के रूप में उत्पादन में इसका इस्तेमाल न करें। इसके उदाहरण ऐतिहासिक प्रस्ताव को समझने में उपयोगी हैं, मौजूदा ब्राउज़र क्षमताओं के प्रमाण के रूप में नहीं। CSS Regions JavaScript पॉलीफ़िल

लेआउट में बदलाव करते समय ब्राउज़र की टेक्स्ट शेपिंग बनाए रखें

जहाँ तक संभव हो, पूरे पैराग्राफ़ ब्राउज़र टेक्स्ट के रूप में रखें। किसी क्षेत्र में कितने अक्षर समा सकते हैं, इसका अनुमान तयशुदा अक्षर-संख्या देकर न लगाएँ। W3C के टेक्स्ट विनिर्देश में इनलाइन सीमाओं के पार शेपिंग और उसे बाधित करने वाली स्थितियों का वर्णन है, जिनमें स्पेसिंग, अलाइनमेंट या आइसोलेशन से जुड़े बदलाव शामिल हैं। इसलिए पाठ के टुकड़ों को अलग करके स्वतंत्र रूप से स्टाइल करने से केवल उनकी स्थिति ही नहीं बदल सकती। CSS Text Module Level 3

कैनवस टेक्स्ट मापन भी लेख का लेआउट बनाने के लिए पर्याप्त नहीं है। WHATWG के अनुसार measureText() दिए गए पाठ के मेट्रिक्स लौटाता है, जबकि fillText() तय निर्देशांकों पर पाठ पेंट करता है। इसका टेक्स्ट-तैयारी एल्गोरिदम अनंत चौड़ाई वाला लाइन बॉक्स इस्तेमाल करता है; दी गई अधिकतम चौड़ाई के कारण पाठ को उस चौड़ाई में फ़िट किया जा सकता है। ये क्रियाएँ किसी पैराग्राफ़ को कई DOM क्षेत्रों में अपने आप जारी नहीं रखतीं। HTML Standard: Canvas

इस काम के लिए नेटिव कॉलम पंक्ति-विभाजन और टेक्स्ट रेंडरिंग की ज़िम्मेदारी ब्राउज़र को सौंपते हैं। अगर ब्राउज़र के मनमाने क्षेत्र अब भी अनिवार्य हैं, तो कस्टम कार्यान्वयन को बदलते पाठ, फ़ॉन्ट मेट्रिक्स, उपलब्ध आयामों और रखी न जा सकी सामग्री का ध्यान रखना होगा। इसे छोटे अक्षर-विभाजन स्क्रिप्ट के बजाय अलग लेआउट परियोजना मानें।

डिज़ाइन तय करने से पहले इसे चौड़ी विंडो, संकरी विंडो और बड़े किए गए ब्राउज़र टेक्स्ट में देखें। लेख को पहले पैराग्राफ़ से END-A तक पढ़ें, आगे जारी रहने का क्रम जाँचें और कटी हुई या क्षैतिज दिशा में खिसकी सामग्री देखें। जब नियमित प्रवाह काम के अनुरूप हो तो ब्राउज़र कॉलम, जब पेज चाहिए हों तो Paged.js और जब अलग-अलग बॉक्स की स्थिति से रचना तय होती हो तो Pages थ्रेड का इस्तेमाल करें।

स्रोत