सीएसएस की मदद से हाइफ़न मैनेज करना

Joe Medley
Joe Medley

लिखी गई कई भाषाओं में, दो शब्दों के बीच और शब्दों के बीच की लाइनों को भी अलग किया जा सकता है. ऐसा अक्सर इसलिए किया जाता है, ताकि टेक्स्ट की एक लाइन पर ज़्यादा वर्ण शामिल किए जा सकें. इसका मकसद टेक्स्ट एरिया में कम लाइन का इस्तेमाल करना होता है. इससे जगह बचाने में मदद मिलती है. ऐसी भाषाओं में ब्रेक को हाइफ़न ('-') के साथ विज़ुअल तौर पर दिखाया जाता है.

सीएसएस टेक्स्ट मॉड्यूल लेवल 3, हाइफ़न प्रॉपर्टी के बारे में बताता है. इससे यह कंट्रोल किया जा सकता है कि उपयोगकर्ताओं को हाइफ़न कब दिखेंगे और वे कैसे काम करेंगे. वर्शन 55 से शुरू करते हुए, Chrome हाइफ़न प्रॉपर्टी को लागू करता है. स्पेसिफ़िकेशन के मुताबिक, हाइफ़न प्रॉपर्टी में तीन वैल्यू होती हैं: none, manual, और auto. इसे समझाने के लिए, हमें एक सॉफ़्ट हाइफ़न (­) का इस्तेमाल करना होगा, जैसा कि यहां दिए गए उदाहरण में दिखाया गया है.

Google ipsum dolor sit amet, consectetur adipiscing e­lit.

सॉफ़्ट हाइफ़न वह होता है जो सिर्फ़ तब दिखाया जाता है, जब यह पीछे वाले मार्जिन में होता है. Chrome 55 या उसके बाद के वर्शन में यह हाइफ़न कैसे दिखता है, यह सीएसएस hypens प्रॉपर्टी की वैल्यू पर निर्भर करता है.

-webkit-hyphens: manual;
hyphens: manual;

इन्हें जोड़ने पर यह नतीजा मिलता है:

एक लाइन का स्क्रीनशॉट

ध्यान दें कि सॉफ़्ट हाइफ़न नहीं दिख रहा है. सभी मामलों में, जब सॉफ़्ट हाइफ़न वाला कोई शब्द एक लाइन पर फ़िट हो जाता है, तो हाइप नहीं दिखेगा. अब देखते हैं कि हाइफ़न की तीनों वैल्यू कैसे काम करती हैं.

किसी का इस्तेमाल नहीं किया जा रहा है

पहले उदाहरण में, हाइफ़न प्रॉपर्टी को none पर सेट किया गया है. यह सॉफ़्ट हाइफ़न को कभी भी दिखने से रोकता है. विंडो का साइज़ अडजस्ट करके इसकी पुष्टि करें, ताकि टेक्स्ट की दिखने वाली लाइन में 'elit' शब्द फ़िट न हो.

Google ipsum dolor sit amet, conectetur adipiscing elit.

मैन्युअल का इस्तेमाल करना

दूसरे उदाहरण में, हाइफ़न प्रॉपर्टी को manual पर सेट किया गया है. इसका मतलब है कि सॉफ़्ट हाइफ़न सिर्फ़ तब दिखेगा, जब मार्जिन 'elit' शब्द को तोड़ दे. फिर से, विंडो के साइज़ को अडजस्ट करके इसकी पुष्टि की जा सकती है.

Google ipsum dolor sit amet, conectetur adipiscing elit.

ऑटो मोड का इस्तेमाल किया जा रहा है

तीसरे उदाहरण में, हाइफ़न प्रॉपर्टी को auto पर सेट किया गया है. इस मामले में, सॉफ़्ट हाइफ़न की ज़रूरत नहीं है, क्योंकि उपयोगकर्ता एजेंट हाइफ़न की जगह अपने-आप तय करेगा. विंडो का साइज़ बदलने पर, आपको दिखेगा कि ब्राउज़र इस उदाहरण को उसी जगह पर हाइफ़न करता है जहां दूसरी विंडो में दिखाया गया है. हालांकि, इसमें कोई भी सॉफ़्ट हाइफ़न मौजूद नहीं है. अगर विंडो को छोटा करना जारी रखा जाता है, तो आप देखेंगे कि आपका ब्राउज़र, टेक्स्ट में मौजूद किसी भी दो वर्णों के बीच की लाइनों को तोड़ सकता है.

Google ipsum dolor sit amet, conectetur adipiscing elit.