एक तस्वीर के साथ पाठ को बदलने की एक नई विधि, या -9999px से छुटकारा पाएं

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

इस मुद्दे को हल करने के इतिहास के बारे में थोड़ा सा।

बहुत पहले लोकप्रिय तकनीक तथाकथित एफआईआर (उर्फ फेनर इमेज रिप्लेसमेंट) थी, जो 2003 में दिखाई दी थी। यह एक स्टंप के रूप में सरल है, और कई शुरुआती टाइपसेटर्स अभी भी इसका उपयोग करते हैं:

<style> h1.text-hide span { display: none; } h1.text-hide { height: 35px; /* height of the replacement image */ background-image: url("hello-world.gif"); background-repeat: no-repeat; } </style> <h1 class="text-hide"><span>Hello world!</span><h1></code> 

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

उसी वर्ष , एक और प्रतिस्थापन तकनीक दिखाई दी । उसने इस तरह काम किया:

 #ID_OF_ELEMENT { padding: HEIGHT_OF_IMAGEpx 0 0 0; overflow: hidden; background-image: url("hello_world.gif"); background-repeat: no-repeat; height: 0px !important; height /**/:HEIGHT_OF_IMAGEpx; } 

जैसा कि आप देख सकते हैं, IE5.5 के लिए हैक का उपयोग यहां किया गया था, जिसमें ब्लॉक मॉडल के साथ सब कुछ खराब था। इसके बाद, इस तकनीक ने जड़ नहीं ली, क्योंकि इसने कई मामलों में काम करना बंद कर दिया, साथ ही कई को हैक पसंद नहीं है।

-9999px

इस सब के बाद, फार्क की सुलभ छवि प्रतिस्थापन तकनीक का जन्म हुआ , जो इस समय सबसे लोकप्रिय है और इसमें केवल एक ही सामग्री शामिल है:

 .text-hide { text-indent: -9999px ( -999em); } 

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

मैं, कई लोगों की तरह, "-9999px" का समर्थक था, लेकिन साथ ही मैं समझ गया कि यह सबसे अच्छा विकल्प नहीं था और इस समस्या का एक और सुंदर समाधान होना चाहिए। हर बार, निर्धारित -9999px, मुझे आश्चर्य होता है कि क्या ये पिक्सेल भविष्य में साइट को प्रभावित करेंगे।

नया समाधान

और इसलिए, कुछ दिनों पहले, कॉमरेड ज़ेल्डमैन ने इस विकल्प का प्रस्ताव दिया:

 .text-hide { text-indent: 100%; white-space: nowrap; overflow: hidden; } 

यह विधि एक साथ कई समस्याओं का हल करती है:

• सबसे पहले, आप यह सुनिश्चित कर सकते हैं कि सबसे लंबा पाठ जो छिपा हुआ है वह कभी भी दृश्य कंटेनर तक नहीं पहुंचता है, भले ही पाठ की लंबाई 9999px से अधिक हो
• दूसरे, पहले यह पता चला था, और फिर समस्या को उसी तरह से हल किया गया था, जिसमें निम्नलिखित शामिल थे: प्रत्येक बार जब -9999px निर्दिष्ट किया गया था, इस चौड़ाई का एक अदृश्य ब्लॉक डोम ट्री में जोड़ा गया था। और अगर इसका नियमित ब्राउज़र पर बहुत कम प्रभाव पड़ा, तो iPad पर एनीमेशन प्रदर्शन ( सत्यापन के लिए डेमो ) के साथ गंभीर समस्याएं थीं

हालांकि, यह विधि भी आदर्श नहीं है - यदि तत्व पर पैडिंग है, तो पाठ का हिस्सा इससे बाहर दिखेगा। समस्या उन ब्लॉकों के लिए पैडिंग को शून्य करके हल की जाती है जहां पाठ छिपा हुआ है।

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

उसी सूत्र में, एक और विधि प्रस्तावित की गई थी जिसमें जीवन का अधिकार है:

 .text-hide { font: 0/0 serif; text-shadow: none; color: transparent; } 

यह विधि क्रॉस-ब्राउज़र फ्रेंडली भी है - IE7-10, ओपेरा 11.61, क्रोम 17.0, फ़ायरफ़ॉक्स 10.0 और सफारी 5.1.2 में परीक्षण किया गया है। सच है, पुराने ब्राउज़रों के लिए यह विकल्प काम नहीं करेगा - उनमें से कई फ़ॉन्ट के शून्य मूल्य को नहीं समझते हैं। उदाहरण के लिए, कुछ पुराने सफ़ारी शून्य के बजाय 6 या 8 मान ले सकते हैं।

मुझे इस पोस्ट से इतिहास और नई विधि के बारे में अधिकांश जानकारी मिली ।

UPD: एक छद्म तत्व के साथ निकोलस गैलाघर की एक और दिलचस्प विधि , टिप सेलेनिट 2 के लिए धन्यवाद

UPD2: github पर html5-boilerplate पर टिप्पणियों में, तीन IR विधियों (नकारात्मक पाठ-इंडेंट, सकारात्मक पाठ-इंडेंट और फ़ॉन्ट: 0/0 ए) के परीक्षण के परिणाम कई स्क्रीन पाठकों में दिखाई दिए। फ़ॉन्ट के साथ विकल्प: 0/0 विंडो-आईज़ में खड़खड़ाहट नहीं करता है (जैसा कि मैं समझता हूं कि यह मर रहा है, इसकी तुलना IE5.5 से की जाती है), बाकी सभी जगह काम करता है (हालांकि सकारात्मक पाठ-इंडेंट के साथ, पाठ तब दिखाई देता है जब इसे JAWS के पुराने संस्करणों में आवाज दी जाती है। )।
धन्यवाद SelenIT2 , टिप्पणी के लिए लिंक

UPD3: क्रिस कॉयियर ने एक बेहतरीन काम किया और एक संपूर्ण संग्रहालय को छवि प्रतिस्थापन तकनीकों के लिए समर्पित किया: सीएसएस छवि प्रतिस्थापन संग्रहालय