वेब स्थानांतरण और प्रारूप द्वारा बंद

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

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

मेरा समाधान विचार सतह पर है। पृष्ठ लोड करते समय, हम एक लंबे शब्द के साथ दो संकीर्ण अस्थायी तत्व बनाते हैं, जिनमें से एक में हाइफ़न सक्षम है। यदि इसकी ऊंचाई अधिक है, तो ब्राउज़र स्वचालित स्थानान्तरण का समर्थन करता है।

इस विचार को दर्शाने वाला एक कोड स्निपेट है:

<style> .hyphens { -moz-hyphens: auto; -ms-hyphens: auto; -webkit-hyphens: auto; hyphens: auto; } </style> <script type="text/javascript"> function is_hyphens () { function get_height (eItem) { var rect = eItem.getBoundingClientRect(); return rect ? (rect.bottom - rect.top) : eItem.offsetHeight; } var eHyphens = document.createElement('DIV'), eNoHyphens = document.createElement('DIV'); document.body.appendChild(eHyphens); document.body.appendChild(eNoHyphens); eHyphens.innerHTML = eNoHyphens.innerHTML = ''; // 1em    Safari,  2em  iPad eHyphens.style.width = eNoHyphens.style.width = '3em'; eHyphens.className = 'hyphens'; var result = get_height(eHyphens) > get_height(eNoHyphens); document.body.removeChild(eHyphens); document.body.removeChild(eNoHyphens); return result; } </script> 

डेमो पेज पर , पहला टुकड़ा प्रारूप शटडाउन और हाइफ़नेशन का उपयोग करता है, यदि ब्राउज़र उनका समर्थन करता है:

दूसरे (बाईं ओर मुड़ें) और तीसरे (प्रारूप द्वारा बंद करें) टुकड़े तुलना के लिए दिए गए हैं, उनमें कोई हाइफ़न नहीं हैं।

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

इस प्रकार, अब आप उन ब्राउज़र में स्वत: हाइफ़नेशन के साथ प्रारूप शटडाउन का उपयोग कर सकते हैं जहां वे समर्थित हैं, और उन साइटों पर जहां यह उचित है।

आप इस समस्या को कैसे हल करेंगे?