CSS text-align और text-justify प्रॉपर्टीज का उपयोग करके टेक्स्ट जस्टिफाई करना

परिचय

CSS text-justify प्रॉपर्टी हमें किसी एलिमेंट के लिए जस्टिफिकेशन प्रकार निर्दिष्ट करने में मदद करती है। text-align प्रॉपर्टी किसी एलिमेंट में टेक्स्ट के क्षैतिज संरेखण को सेट करती है। साथ में, वे परिष्कृत टेक्स्ट लेआउट नियंत्रण प्रदान करते हैं।

उदाहरण 1: इंटर-कैरेक्टर जस्टिफिकेशन

<!DOCTYPE html>
<html>
<head>
  <style>
    article {
      margin: 3%;
      background-color: peachpuff;
      text-align: justify;
    }
    p:first-of-type {
      text-justify: inter-character;
      background-color: moccasin;
    }
  </style>
</head>
<body>
  <article>
    <p>Nullam in fringilla ex, at sagittis erat. Praesent imperdiet augue at ante tempor, eu condimentum tellus consectetur. Mauris rutrum, lectus quis porta bibendum, arcu neque dictum orci, sed volutpat ipsum risus in ex. Suspendisse potenti. Nam rhoncus ultricies nisi pulvinar rutrum. Mauris ullamcorper interdum urna a vulputate. Quisque dolor tortor, vehicula in odio eu, fringilla rutrum est. Nunc viverra congue aliquam. Ut volutpat magna ipsum, in interdum velit mollis ac. </p>
    <p>Nullam in fringilla ex, at sagittis erat. Praesent imperdiet augue at ante tempor, eu condimentum tellus consectetur. Mauris rutrum, lectus quis porta bibendum, arcu neque dictum orci, sed volutpat ipsum risus in ex. Suspendisse potenti. Nam rhoncus ultricies nisi pulvinar rutrum. Mauris ullamcorper interdum urna a vulputate. Quisque dolor tortor, vehicula in odio eu, fringilla rutrum est. Nunc viverra congue aliquam. Ut volutpat magna ipsum, in interdum velit mollis ac.</p>
  </article>
</body>
</html>

उदाहरण 2: डेफिनिशन लिस्ट में जस्टिफिकेशन

<!DOCTYPE html>
<html>
<head>
  <style>
    dl {
      margin: 3%;
      background-color: lightcoral;
      text-align: justify;
    }
    #example {
      text-justify: inter-character;
      background-color: snow;
    }
  </style>
</head>
<body>
  <dl>
    <dt> Quisque dolor tortor, vehicula in odio eu, fringilla rutrum est.</dt>
    <dd>Nunc viverra congue aliquam. <p id="example">Nullam in fringilla ex, at sagittis erat. Praesent imperdiet augue at ante tempor, eu condimentum tellus consectetur.</p> </dd>
  </dl>
  <dl>
    <dt> Quisque dolor tortor, vehicula in odio eu, fringilla rutrum est.</dt>
    <dd>Nunc viverra congue aliquam. <p>Nullam in fringilla ex, at sagittis erat. Praesent imperdiet augue at ante tempor, eu condimentum tellus consectetur.</p> </dd>
  </dl>
</body>
</html>

टेक्स्ट-जस्टिफाई मान

मुख्य अंतर्दृष्टि

• text-justify केवल तभी प्रभावी होता है जब text-align: justify सेट हो
• inter-character एशियाई भाषाओं के लिए आदर्श है जहां शब्द स्पष्ट रूप से अलग नहीं होते
• inter-word अंग्रेजी/हिंदी जैसी स्पेस-सेपरेटेड भाषाओं के लिए बेहतर है
• अत्यधिक जस्टिफिकेशन "रिवर्स" (बड़े असमान गैप्स) बना सकता है — संकीर्ण कंटेनरों में hyphens: auto के साथ संयोजित करें

मॉडर्न बेस्ट प्रैक्टिस

<!DOCTYPE html>
<html lang="hi">
<head>
  <style>
    .justified-text {
      text-align: justify;
      text-justify: inter-word; /* हिंदी/अंग्रेजी के लिए */
      hyphens: auto;
      -webkit-hyphens: auto;
      line-height: 1.7;
      max-width: 65ch; /* इष्टतम लाइन लंबाई */
    }
  </style>
</head>
<body>
  <div class="justified-text">
    <p>यह जस्टिफाइड टेक्स्ट उचित शब्द रिक्ति और हाइफ़नेशन के साथ पठनीयता बनाए रखता है।</p>
  </div>
</body>
</html>