<br> टैग से अलग की गई रैप हुई प्रविष्टियों में हैंगिंग इंडेंट देने के लिए, उनके ब्लॉक कंटेनर पर text-indent: 2em hanging each-line लागू करें। दोनों कीवर्ड के लिए ब्राउज़र समर्थन जाँचें; पुराने ब्राउज़र महत्वपूर्ण हों, तो हर प्रविष्टि को अपना ब्लॉक दें और नेगेटिव इंडेंट के साथ पैडिंग का उपयोग करें।

यह मार्गदर्शिका ऐसे व्यक्ति के लिए है जो Mac पर एक छोटा HTML पेज संपादित कर रहा है और चाहता है कि हर प्रविष्टि बाएँ किनारे से शुरू हो, जबकि उसकी आगे की पंक्तियाँ भीतर की ओर रहें। उदाहरणों में कृत्रिम टेक्स्ट है और इनके लिए केवल एक साधारण टेक्स्ट या कोड एडिटर और ब्राउज़र चाहिए।

ब्रेक टैग के बाद सामान्य हैंगिंग इंडेंट क्यों काम नहीं करता

यहाँ दो अलग-अलग प्रकार के लाइन अंतों का ध्यान रखना है। <br> स्पष्ट लाइन ब्रेक बनाता है। सॉफ्ट रैप तब होता है जब ब्राउज़र उपलब्ध चौड़ाई में टेक्स्ट को फिट करता है। आपके इच्छित लेआउट में पहला एक नई प्रविष्टि की शुरुआत है और दूसरा उसी प्रविष्टि की अगली पंक्ति। WHATWG <br> को लाइन ब्रेक के रूप में परिभाषित करता है; यह नया पैराग्राफ़ या प्रविष्टि कंटेनर नहीं बनाता। HTML Standard: The br element।

सादा नेगेटिव text-indent किसी ब्लॉक की पहली फ़ॉर्मैट की गई पंक्ति को प्रभावित करता है। इसलिए पैडिंग जोड़ने से उस ब्लॉक के लिए हैंगिंग इंडेंट बन सकता है, लेकिन हर <br> के बाद इंडेंट को फिर से शुरू नहीं किया जा सकता। बाद की प्रविष्टियाँ उसी ब्लॉक का हिस्सा रहती हैं। MDN: text-indent।

CSS विनिर्देश यहाँ आवश्यक संयोजन परिभाषित करता है: each-line में पहली पंक्ति और फ़ोर्स्ड ब्रेक के तुरंत बाद आने वाली पंक्तियाँ शामिल हैं; hanging इस चयन को उलट देता है। दोनों को साथ इस्तेमाल करने पर स्पष्ट रूप से शुरू की गई हर पंक्ति बाएँ किनारे पर रहती है और सॉफ्ट-रैप होकर आई अगली पंक्तियाँ भीतर की ओर खिसकती हैं। W3C: First Line Indentation।

लक्ष्य लेआउट ऐसा दिखता है। नीचे दिए गए लाइन अंत केवल उदाहरण हैं; ब्राउज़र उपलब्ध चौड़ाई और फ़ॉन्ट मेट्रिक्स के आधार पर वास्तविक रैप बिंदु चुनेगा।

प्रविष्टि A बाहरी किनारे से शुरू होती है और आगे चलती है
    जब उपलब्ध चौड़ाई समाप्त हो जाती है।
प्रविष्टि B भी बाहरी किनारे से शुरू होती है और इसकी
    अपनी इंडेंट की हुई अगली पंक्ति है।
प्रविष्टि C छोटी है।

पेज बदलने से पहले तरीका चुनें

अपना तरीका चुनने के लिए मौजूदा मार्कअप और ब्राउज़र आवश्यकताओं का उपयोग करें। यह निर्णय तालिका दस्तावेज़ित इंडेंट व्यवहार और ब्राउज़र समर्थन डेटा पर आधारित है; यह कार्यान्वयन में मदद के लिए है, कोई अलग ब्राउज़र सुविधा नहीं।

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

साधारण text-indent के समर्थन से कीवर्ड समर्थन का अनुमान न लगाएँ। MDN के मौजूदा संगतता डेटा के अनुसार Safari 15, Firefox 121 और Chrome 146 से hanging तथा each-line दोनों समर्थित हैं। पुराने इंस्टॉलेशन सामान्य इंडेंट का समर्थन कर सकते हैं, लेकिन इस संयोजन को अस्वीकार कर सकते हैं। MDN browser compatibility data: text-indent।

यह भी जाँचें कि ब्रेक सही संरचना दर्शाते हैं या नहीं। WHATWG <br> को उन ब्रेक के लिए रखता है जो सामग्री का हिस्सा हैं और कहता है कि इसका उपयोग पैराग्राफ़ के भीतर विषयगत समूहों को अलग करने के लिए नहीं होना चाहिए। अलग पैराग्राफ़ के लिए पैराग्राफ़ एलिमेंट और सूची के लिए सूची मार्कअप का उपयोग करें। HTML Standard: The br element, HTML Standard: Grouping content।

नेटिव CSS समाधान में ब्रेक टैग रखें

नीचे दिया गया पूरा HTML दस्तावेज़ ब्रेक बनाए रखने वाला तरीका दिखाता है। अपने Mac पर इसे किसी साधारण टेक्स्ट या कोड एडिटर में पेस्ट करें, hanging-indent.html नाम से सेव करें और उस फ़ाइल को ब्राउज़र में खोलें। रिच-टेक्स्ट दस्तावेज़ के बजाय HTML फ़ाइल का उपयोग करें।

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Break-separated hanging indent</title>
  <style>
    body {
      margin: 2rem;
      font-family: system-ui, sans-serif;
      line-height: 1.6;
    }

    .entries {
      max-inline-size: 30rem;
      margin: 0;
      white-space: normal;
      text-align: start;
      text-indent: 0;
    }

    @supports (text-indent: 2em hanging each-line) {
      .entries {
        text-indent: 2em hanging each-line;
      }
    }
  </style>
</head>
<body>
  <h1>Sample entries</h1>
  <p class="entries">Entry A: A long sample line describing a pale rectangular panel, a narrow heading area, and a small square beside the heading.<br>
Entry B: Another long sample line describing a circular tile, an open space beneath it, and a row of neutral labels.<br>
Entry C: A short sample line.</p>
</body>
</html>

@supports शर्त लागू करने से पहले पूरी डिक्लेरेशन की जाँच करती है। जो ब्राउज़र इस संयोजन का समर्थन नहीं करते, उनमें स्पष्ट रूप से तय किया गया बाएँ किनारे वाला लेआउट बना रहता है। फ़ीचर क्वेरी ब्राउज़र समर्थन के अनुसार CSS को सशर्त रूप से लागू करती हैं। MDN: @supports।

इंडेंट .entries पर लागू करें, जो टेक्स्ट को समेटने वाला ब्लॉक है। संबंधित प्रॉपर्टी ब्लॉक कंटेनर पर लागू होती है; <br> पर डिक्लेरेशन देने से अगली प्रविष्टि के लिए कंटेनर नहीं मिलता। MDN: text-indent।

2em का मान डिज़ाइन के अनुसार बदला जा सकता है। संकरे लेआउट की जाँच के बाद छोटा या बड़ा मान आज़माएँ। इससे अगली पंक्ति का ऑफ़सेट एकसमान रहता है; यह Entry A: की चौड़ाई नहीं मापता और न ही अलग-अलग लंबाई वाले लेबल के बाद टेक्स्ट को पहले शब्द के नीचे अपने आप संरेखित करता है।

जब हर ब्राउज़र में इंडेंट चाहिए, तो अलग ब्लॉक इस्तेमाल करें

अगर हर प्रविष्टि स्वतंत्र पैराग्राफ़ है, तो मार्कअप बदलें ताकि हर प्रविष्टि की अपनी पहली पंक्ति हो। नीचे दिया गया पूरा विकल्प अलग करने वाले ब्रेक हटाता है और पारंपरिक हैंगिंग-इंडेंट गणना हर पैराग्राफ़ पर अलग से लागू करता है।

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Paragraph hanging indents</title>
  <style>
    body {
      margin: 2rem;
      font-family: system-ui, sans-serif;
      line-height: 1.6;
    }

    .entries {
      max-inline-size: 30rem;
      text-indent: 0;
    }

    .entry {
      margin: 0;
      padding-inline-start: 2em;
      text-indent: -2em;
      white-space: normal;
      text-align: start;
    }
  </style>
</head>
<body>
  <h1>Sample entries</h1>
  <div class="entries">
    <p class="entry">Entry A: A long sample paragraph describing a pale rectangular panel, a narrow heading area, and a small square beside the heading.</p>
    <p class="entry">Entry B: Another long sample paragraph describing a circular tile, an open space beneath it, and a row of neutral labels.</p>
    <p class="entry">Entry C: A short sample paragraph.</p>
  </div>
</body>
</html>

पैडिंग पैराग्राफ़ की सामग्री की शुरुआत को 2em भीतर ले जाती है। नेगेटिव इंडेंट केवल पहली पंक्ति को उतनी ही दूरी से वापस बाहर लाता है। रैप हुई पंक्तियाँ पैडिंग से तय शुरुआती स्थान पर रहती हैं। दोनों मान बराबर होना ज़रूरी है: केवल एक मान बदलने पर पहली पंक्ति की शुरुआत बदल जाती है। नेगेटिव इंडेंट का दस्तावेज़ीकरण MDN में है, जबकि padding-inline-start लॉजिकल शुरुआती किनारे पर पैडिंग देता है। MDN: text-indent, MDN: padding-inline-start।

16 पिक्सेल के उदाहरणार्थ फ़ॉन्ट आकार पर 2em का ऑफ़सेट 32 पिक्सेल होता है: अगली पंक्ति 32 पिक्सेल भीतर से शुरू होती है और पहली पंक्ति का समायोजन −32 पिक्सेल होता है। यह उदाहरण की गणना है, रेंडरिंग का मापा हुआ परिणाम नहीं।

यह संरचना अपनाते समय पुराने सेपरेटर हटा दें। हर पूरी प्रविष्टि और उसकी मौजूदा इनलाइन फ़ॉर्मैटिंग को नए पैराग्राफ़ के भीतर रखें। अगर सामग्री सूची है, तो सूची आइटम इस्तेमाल करें; पैराग्राफ़ का उदाहरण विशेष रूप से स्वतंत्र पैराग्राफ़ के लिए उपयुक्त है। HTML Standard: Grouping content।

पूरा करने से पहले रैप और टेक्स्ट प्रवाह जाँचें

पेज को ऐसी चौड़ाई पर जाँचें जहाँ दोनों लंबी प्रविष्टियाँ रैप हों। फिर विंडो को तब तक चौड़ा करें जब तक वे एक-एक पंक्ति में फिट न हो जाएँ। इंडेंट की समस्या को रैप या संरचना की समस्या से अलग पहचानने के लिए ये जाँचें करें।

  1. हर प्रविष्टि की शुरुआत जाँचें। ब्रेक बनाए रखने वाले उदाहरण में, हर <br> के बाद का टेक्स्ट बाहरी किनारे पर लौटना चाहिए। अगर ऐसा नहीं है, तो पूरे कीवर्ड संयोजन के समर्थन की जाँच करें।
  2. हर अगली पंक्ति जाँचें। लंबी प्रविष्टियाँ भीतर की ओर रैप होनी चाहिए। छोटी प्रविष्टियाँ बिना अतिरिक्त शुरुआती खाली जगह के बाएँ किनारे पर रहनी चाहिए।
  3. सबसे संकरा अपेक्षित कॉलम जाँचें। अगर इंडेंट उपलब्ध पंक्ति चौड़ाई का बहुत बड़ा हिस्सा ले रहा है, तो इसे कम करें।
  4. वास्तविक सामग्री जाँचें। सामग्री को अलग ब्लॉक में ले जाते समय हर प्रविष्टि के शब्द, इनलाइन ज़ोर और इच्छित स्पष्ट ब्रेक बनाए रखें।

अगर कुछ भी रैप नहीं होता, तो white-space देखें। उदाहरण में normal है, जो सोर्स की खाली जगहों को समेटता है और रैप होने देता है। pre खाली जगहें बनाए रखता है, लेकिन सामान्य सॉफ्ट रैप रोकता है; pre-wrap खाली जगहें बनाए रखते हुए रैप होने देता है। जिस अगली पंक्ति का निर्माण ही नहीं होता, उस पर इंडेंट दिखाई नहीं दे सकता। MDN: white-space।

इंडेंट की नकल करने के लिए खाली जगहें जोड़ने से बचें। white-space: normal के अंतर्गत लगातार आने वाली खाली जगहें समेट दी जाती हैं। मौजूदा विंडो के रैप बिंदुओं पर अतिरिक्त ब्रेक टैग डालने से भी बचें: इससे ब्राउज़र द्वारा चुनी गई अगली पंक्तियाँ स्पष्ट शुरुआत बन जाएँगी और each-line के व्यवहार में बदलाव आएगा। MDN: white-space, W3C: First Line Indentation।

लाइन ब्रेक और ग्लिफ़ शेपिंग का काम ब्राउज़र को करने दें। दिखाई देने वाली पंक्तियों की गणना करने के लिए किसी प्रविष्टि को अक्षर-आधारित रैपर में न बाँटें। W3C उन स्थितियों का दस्तावेज़ीकरण करता है जहाँ इनलाइन सीमाएँ शेपिंग में रुकावट डालती हैं, जिनमें अक्षरों के बीच नॉन-ज़ीरो इनलाइन पैडिंग, बॉर्डर या मार्जिन शामिल हैं। इस काम में प्रविष्टियों को उनकी इच्छित सीमाओं पर पूरा रैप करने से शब्दों के भीतर ऐसी अतिरिक्त सीमाएँ बनने से बचती हैं। W3C: Shaping Across Element Boundaries।

अंत में अपनी सामग्री से मेल खाने वाली संरचना रखें: अर्थपूर्ण स्पष्ट ब्रेक को hanging each-line के साथ बनाए रखें, या स्वतंत्र प्रविष्टियों को अपने-अपने ब्लॉक दें। पुष्टि करें कि हर प्रविष्टि बाएँ किनारे से शुरू होती है और केवल स्वाभाविक रूप से रैप हुई अगली पंक्तियाँ आपकी इच्छित चौड़ाइयों पर भीतर की ओर जाती हैं।

स्रोत