हाल ही में, मुझे ऑस्ट्रिया के प्रिंटिंग हाउस में एक शाम का व्याख्यान देने के लिए आमंत्रित किया गया था। मैथ्यू कार्टर, विम क्रॉल, मार्गरेट कैल्वर्ट, एरिक शापिकरमैन और दिवंगत फ्रेडा सैक जैसे दिग्गजों के नक्शेकदम पर चलना मेरे लिए बहुत सम्मान की बात थी।

मैंने इंटरनेट पर कुछ गोल्डन टाइपोग्राफी नियमों के बारे में बात की, और फिर क्यूए सेक्शन के दौरान मुझे वेब पर स्वचालित हाइफ़न के साथ वर्तमान स्थिति के बारे में पूछा गया। यह एक अच्छा सवाल है, खासकर जब से जर्मन भाषा अपने लंबे समय तक इस्तेमाल होने वाली लंबी संज्ञाओं के लिए प्रसिद्ध है (उदाहरण के लिए, वर्बसेरुंगस्वोर्स्क्लैग का अर्थ है "सुधार के लिए सुझाव"), इसलिए अधिकांश लिखित वाहक में हाइफ़न का व्यापक रूप से उपयोग किया जाता है।

2011 में स्वचालित हाइफ़नेशन वेब पर दिखाई दिया और अब इसे व्यापक रूप से समर्थित किया गया है । सफारी, फ़ायरफ़ॉक्स, और इंटरनेट एक्सप्लोरर 9 सभी प्लेटफार्मों पर उनका समर्थन करते हैं, और एंड्रॉइड और मैकओएस पर क्रोम ( विंडोज या लिनक्स पर अभी तक नहीं )।

स्वचालित हस्तांतरण कैसे सक्षम करें

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

स्थानान्तरण एक जटिल विषय है। स्थानांतरण अंक आम तौर पर शब्दांशों पर आधारित होते हैं जो व्युत्पत्ति और स्वर विज्ञान के संयोजन का उपयोग करते हैं, लेकिन शब्दों को विभाजित करने के लिए अन्य नियम हैं।

1. भाषा सेटिंग

वेबपृष्ठ भाषा HTML lang विशेषता का उपयोग करके सेट की गई है:

 <html lang="en">

सभी वेब पेजों के लिए भाषा सेट करने का यह सबसे अच्छा तरीका है, चाहे हाइफ़न वहां शामिल हो या नहीं। एक भाषा स्थापित करने से स्वचालित अनुवाद उपकरण, स्क्रीन रीडर और अन्य सहायक कार्यक्रमों में मदद मिलेगी।

lang="en" विशेषता ब्राउज़र को यह बताते हुए आईएसओ भाषा टैग लागू करती है कि पाठ अंग्रेजी में है। इस मामले में, ब्राउज़र डिफ़ॉल्ट अंग्रेजी हाइफ़नेशन शब्दकोश का चयन करेगा, जो आमतौर पर अमेरिकी अंग्रेज़ी में हाइफ़नेशन से मेल खाती है। यद्यपि अमेरिकी और ब्रिटिश अंग्रेजी वर्तनी और उच्चारण (और इसलिए हाइफ़नेशन) में भिन्न रूप से भिन्न हैं, अंतर पुर्तगाली पुर्तगाली के बीच के रूप में महत्वपूर्ण नहीं है। समस्या को "क्षेत्र" जोड़कर हल किया जाता है ताकि ब्राउज़र को पता हो कि अंग्रेजी का कौन सा संस्करण हाइफ़नेशन शब्दकोश के रूप में सबसे उपयुक्त है। उदाहरण के लिए, ब्राज़ीलियाई पुर्तगाली या ब्रिटिश अंग्रेज़ी निर्दिष्ट करने के लिए:

 <html lang="pt-BR"> <html lang="en-GB">

2. हाइफ़नेशन को सक्षम करना

भाषा को स्थापित करने के बाद, आप CSS में स्वचालित हाइफ़नेशन को सक्षम कर सकते हैं। यह बेहद सरल है:

 hyphens: auto;

सफ़ारी और IE / Edge को वर्तमान में उपसर्गों की आवश्यकता है, इसलिए आपको इसे अभी लिखना चाहिए:

 -ms-hyphens: auto; -webkit-hyphens: auto; hyphens: auto;

हाइफ़नेशन प्रबंधन

लेकिन सिर्फ फंक्शन को CSS में बदलना ही काफी नहीं है। CSS टेक्स्ट मॉड्यूल लेवल 4 विनिर्देशों में हाइफ़न को प्रबंधित करने की क्षमता होती है, जैसा कि टाइपसेटिंग प्रोग्राम (उदाहरण के लिए, InDesign) और कुछ टेक्स्ट एडिटर (वर्ड सहित) में होता है। ये नियंत्रण आपको विभिन्न तरीकों से पाठ में हाइफ़न की संख्या निर्धारित करने की अनुमति देते हैं।

हाइफ़नेशन से पहले और बाद में शब्द की लंबाई और वर्णों की संख्या को सीमित करें

यदि आप छोटे शब्दों को ले जाते हैं, तो वे पढ़ने में कठिन होते हैं। इसी तरह, आप शब्द से छोटे टुकड़े को फाड़ना नहीं चाहते हैं। अंगूठे का आम तौर पर स्वीकृत नियम कम से कम छह अक्षरों की लंबाई के साथ केवल शब्दों को ले जाने के लिए है, हाइफन से पहले कम से कम तीन अक्षर और अगली पंक्ति में कम से कम दो को छोड़कर।

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

ये प्रतिबंध hyphenate-limit-chars संपत्ति का उपयोग करके निर्धारित किए गए हैं। यह तीन मान लेता है, रिक्त स्थान द्वारा अलग किया गया। यह पूरे शब्द के लिए न्यूनतम वर्ण सीमा है, हाइफ़नेशन से पहले और बाद में वर्णों की न्यूनतम संख्या। अंगूठे के उपरोक्त नियम का पालन करने के लिए, क्रमशः 6, 3 और 2 को इंगित करें:

 hyphenate-limit-chars: 6 3 2;

क्रिया में hyphenate-limit-char

डिफ़ॉल्ट रूप से, सभी तीन पैरामीटर auto सेट होते हैं। इसका मतलब है कि ब्राउज़र वर्तमान भाषा और लेआउट के आधार पर सर्वश्रेष्ठ सेटिंग्स का चयन करेगा। CSS पाठ मॉड्यूल स्तर 4 एक प्रारंभिक बिंदु के रूप में 5 2 2 का उपयोग करके मानता है (मेरी राय में, यह अनावश्यक हाइफ़नेशन की ओर जाता है), लेकिन ब्राउज़र मापदंडों को इच्छानुसार बदल सकते हैं।

वर्तमान में, यह संपत्ति केवल IE / Edge (एक उपसर्ग के साथ) का समर्थन करती है, और सफारी पिछले CSS3 टेक्स्ट मॉड्यूल ड्राफ्ट से अप्रचलित संपत्ति के माध्यम से वर्णों की संख्या को सीमित करता है। इसका अर्थ है कि आप इस कोड के साथ एज और सफारी (फ़ायरफ़ॉक्स के लिए उन्नत योजना के साथ) में समान प्रभाव प्राप्त कर सकते हैं:

 /* legacy properties */ -webkit-hyphenate-limit-before: 3; -webkit-hyphenate-limit-after: 2; /* current proposal */ -moz-hyphenate-limit-chars: 6 3 2; /* not yet supported */ -webkit-hyphenate-limit-chars: 6 3 2; /* not yet supported */ -ms-hyphenate-limit-chars: 6 3 2; hyphenate-limit-chars: 6 3 2;

लगातार स्वच्छता की सीमा

सौंदर्य कारणों से, आप एक पंक्ति में पंक्तियों की संख्या को हाइफ़न के साथ सीमित कर सकते हैं। क्रमिक हाइफ़न (तीन या अधिक) को अपमानजनक रूप से सीढ़ी कहा जाता है। अंग्रेजी भाषा के लिए अंगूठे का सामान्य नियम यह है कि एक पंक्ति में दो पंक्तियाँ एक आदर्श अधिकतम (हालांकि जर्मन में लंबी सीढ़ियाँ) हैं। डिफ़ॉल्ट रूप से, CSS लगातार हाइफ़न की संख्या को सीमित नहीं करता है, लेकिन आप हाइफ़न hyphenate-limit-lines गुण में हाइफ़न की अधिकतम संख्या सेट कर सकते हैं। वर्तमान में, यह केवल IE / एज और सफारी (उपसर्गों के साथ) द्वारा समर्थित है।

 -ms-hyphenate-limit-lines: 2; -webkit-hyphenate-limit-lines: 2; hyphenate-limit-lines: 2;

हाइफ़ेनेट-लिमिट-लाइन्स गुण एक सीढ़ी को रोकता है

आप no-limit का उपयोग कर प्रतिबंध को हटा सकते हैं।

पैराग्राफ की अंतिम पंक्ति में हाइफ़नेशन का निषेध

डिफ़ॉल्ट रूप से, ब्राउज़र शांतिपूर्वक पैराग्राफ के अंतिम शब्द को स्थानांतरित करता है, जिससे शब्द का अंत एकांत अनाथ की तरह, अंतिम पंक्ति पर बैठता है। प्रायः, अंतिम रेखा में आधे शब्द की तुलना में प्रायद्वीप रेखा के अंत में एक बड़ा स्थान बेहतर होता है। यह always मूल्य के साथ hyphenate-limit-last संपत्ति द्वारा निर्धारित किया जाता है।

 hyphenate-limit-last: always;

वर्तमान में, संपत्ति केवल IE / Edge (उपसर्ग) में समर्थित है।

ट्रांसफ़र ज़ोन सेट करके हाइफ़न कम करें

डिफ़ॉल्ट रूप से, स्थानांतरण hyphenate-limit-chars और hyphenate-limit-lines के स्थापित मूल्यों के भीतर जितनी बार संभव होता है। लेकिन इन प्रतिबंधों के बावजूद, पैराग्राफ को हाइफ़न के साथ संतृप्त किया जा सकता है।

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

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

बायां: तीर उन रेखाओं को इंगित करता है जहां हाइफ़नेशन की अनुमति है। अधिकार: परिभाषित स्थानांतरण क्षेत्र के साथ स्थानांतरण।

ऐसा करने के लिए, hyphenation-limit-zone संपत्ति का उपयोग करें, जो पिक्सेल या प्रतिशत में आकार (पाठ क्षेत्र की चौड़ाई के सापेक्ष) को इंगित करता है। अनुकूली डिजाइन के संदर्भ में, यह अंतरण क्षेत्र को प्रतिशत में सेट करने के लिए समझ में आता है। इसका मतलब यह है कि ट्रांसफ़र क्षेत्र छोटे स्क्रीन पर छोटा हो जाएगा, जिससे अधिक हाइफ़नेशन और कम रिक्त लाइनें हो जाएंगी। इसके विपरीत, व्यापक स्क्रीन पर, स्थानांतरण क्षेत्र का विस्तार होगा, इसलिए, कम हाइफ़न और अधिक झूलने वाली लाइनें होंगी, जो व्यापक स्क्रीन पर इतनी महत्वपूर्ण नहीं हैं। लेआउट कार्यक्रमों में विशिष्ट मूल्यों के आधार पर, आप 8% से शुरू कर सकते हैं।

 hyphenate-limit-zone: 8%

वर्तमान में केवल IE / Edge (उपसर्ग) में समर्थित है।

सब एक साथ

सीएसएस टेक्स्ट मॉड्यूल लेवल 4 के गुणों का उपयोग करते हुए, पैराग्राफ को उसी हाइफ़नेशन कंट्रोल पैरामीटर्स पर सेट करें जैसे कि नियमित टाइपिंग प्रोग्राम्स में:

 p { hyphens: auto; hyphenate-limit-chars: 6 3 3; hyphenate-limit-lines: 2; hyphenate-limit-last: always; hyphenate-limit-zone: 8%; }

उपयुक्त उपसर्गों और रोलबैक के साथ, कोड इस तरह दिखता है:

 p { -webkit-hyphens: auto; -webkit-hyphenate-limit-before: 3; -webkit-hyphenate-limit-after: 3; -webkit-hyphenate-limit-chars: 6 3 3; -webkit-hyphenate-limit-lines: 2; -webkit-hyphenate-limit-last: always; -webkit-hyphenate-limit-zone: 8%; -moz-hyphens: auto; -moz-hyphenate-limit-chars: 6 3 3; -moz-hyphenate-limit-lines: 2; -moz-hyphenate-limit-last: always; -moz-hyphenate-limit-zone: 8%; -ms-hyphens: auto; -ms-hyphenate-limit-chars: 6 3 3; -ms-hyphenate-limit-lines: 2; -ms-hyphenate-limit-last: always; -ms-hyphenate-limit-zone: 8%; hyphens: auto; hyphenate-limit-chars: 6 3 3; hyphenate-limit-lines: 2; hyphenate-limit-last: always; hyphenate-limit-zone: 8%; }

स्थानांतरण प्रगतिशील सुधार का सही उदाहरण है। इन गुणों को अब सक्रिय किया जा सकता है अगर आपको लगता है कि पाठकों को इससे लाभ होगा। ब्राउज़र समर्थन धीरे-धीरे बढ़ेगा। यदि आप जर्मन जैसे लंबे शब्दों के साथ एक भाषा में एक साइट विकसित करते हैं, तो पाठक निश्चित रूप से आभारी होंगे।

आप सभी CSS Auto Hyphenation के बारे में जानना चाहते हैं