CSS text-indent प्रॉपर्टी के साथ टेक्स्ट इंडेंट करना

परिचय

CSS text-indent प्रॉपर्टी हमें टेक्स्ट को इंडेंट करने में उपयोग होने वाले व्हाइट स्पेस की मात्रा निर्दिष्ट करने की अनुमति देती है। यह आमतौर पर पैराग्राफ की पहली लाइन को इंडेंट करने के लिए उपयोग किया जाता है।

उदाहरण 1: बेसिक पैराग्राफ इंडेंटेशन

<!DOCTYPE html>
<html>
<head>
  <style>
    p {
      text-indent: 15%;
    }
    article {
      background-color: darkgray;
      margin: 2%;
    }
  </style>
</head>
<body>
  <article>
    <p>Aliquam neque quam, luctus id turpis id, eleifend condimentum lacus. Proin mattis eros eu convallis eleifend. Ut porttitor efficitur massa.</p>
    <p>Nullam nulla dolor, eleifend a viverra ut, semper nec enim. Praesent at ultricies neque. Praesent finibus erat tristique mauris mollis, vitae scelerisque orci lacinia.</p>
  </article>
</body>
</html>

उदाहरण 2: बॉर्डर और फ्लेक्सबॉक्स के साथ इंडेंटेशन

<!DOCTYPE html>
<html>
<head>
  <style>
    p {
      margin: 2%;
      text-indent: 13%;
      border: 2px solid lightgoldenrodyellow;
    }
    div {
      background-color: sandybrown;
      display: flex;
      flex: 1;
      margin: 4%;
      box-shadow: 0 0 24px rgba(0,0,0,0.6);
    }
  </style>
</head>
<body>
  <div>
    <p>Aliquam neque quam, luctus id turpis id, eleifend condimentum lacus. Proin mattis eros eu convallis eleifend. Ut porttitor efficitur massa.</p>
    <p>Nullam nulla dolor, eleifend a viverra ut, semper nec enim. Praesent at ultricies neque. Praesent finibus erat tristique mauris mollis, vitae scelerisque orci lacinia.</p>
  </div>
</body>
</html>

मुख्य बिंदु

• text-indent केवल ब्लॉक-लेवल एलिमेंट्स की पहली लाइन को प्रभावित करता है
• मान px, em, rem, % आदि में हो सकते हैं
• नकारात्मक मान हैंगिंग इंडेंट बनाते हैं (पहली लाइन बाकी से बाहर निकलती है)
• प्रतिशत मान पैरेंट एलिमेंट की चौड़ाई के सापेक्ष होते हैं
• direction: rtl (राइट-टू-लेफ्ट भाषाओं) के लिए, इंडेंट दाईं ओर लागू होता है

उन्नत उपयोग: हैंगिंग इंडेंट

<!DOCTYPE html>
<html>
<head>
  <style>
    .hanging-indent {
      text-indent: -2em;
      padding-left: 2em;
    }
  </style>
</head>
<body>
  <p class="hanging-indent">यह एक हैंगिंग इंडेंट उदाहरण है जहां पहली लाइन बाईं ओर निकलती है, जबकि बाकी टेक्स्ट इंडेंटेड रहता है। यह ग्रंथसूची और संदर्भ सूचियों में आम है।</p>
</body>
</html>

बेस्ट प्रैक्टिसेज

• सुसंगत स्केलिंग के लिए सापेक्ष इकाइयों (em, rem) का उपयोग करें
• इंडेंटेड टेक्स्ट के लिए पर्याप्त लाइन-हाइट सुनिश्चित करें
• RTL भाषाओं के लिए परीक्षण करें
• <br> के साथ बनी मैन्युअल लाइन ब्रेक पर text-indent लागू नहीं होता