टेक्स्ट से HTML कन्वर्टर

सादे टेक्स्ट को बदलने की ज़रूरत क्यों है

जब आप किसी टेक्स्ट एडिटर में टाइप करते हैं, तो जो लाइन ब्रेक और खाली लाइनें आपको दिखती हैं, वे फ़ाइल में असली कैरेक्टर होते हैं। लेकिन ब्राउज़र इन्हें नज़रअंदाज़ कर देता है: HTML व्हाइटस्पेस की किसी भी लगातार शृंखला को — न्यूलाइन सहित — एक ही स्पेस में समेट देता है। किसी करीने से फ़ॉर्मेट किए ड्राफ़्ट को सीधे किसी वेब पेज में पेस्ट कीजिए, और वह एक ही अविभाजित पैराग्राफ की तरह दिखेगा। उस स्पेसिंग को वापस पाने के लिए आपको इन अदृश्य ब्रेक को असली मार्कअप में बदलना पड़ता है — और यह कन्वर्टर ठीक यही काम करता है।

यह आपके टेक्स्ट को पढ़ता है, पैराग्राफ की सीमाएँ ढूँढता है, और हर ब्लॉक को सिमैंटिक टैग में लपेट देता है ताकि ब्राउज़र कंटेंट को ठीक वैसे ही प्रस्तुत करे जैसा आप चाहते थे। नतीजा होता है साफ़, संरचित HTML, जिसे आप एक भी टैग हाथ से टाइप किए बिना किसी CMS, ईमेल टेम्पलेट, या ब्लॉग पोस्ट में डाल सकते हैं।

पैराग्राफ और लाइन ब्रेक कैसे पहचाने जाते हैं

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

किसी पैराग्राफ के भीतर मौजूद सिंगल लाइन ब्रेक एक अलग मामला हैं। डिफ़ॉल्ट रूप से इन्हें समेट दिया जाता है, लेकिन Preserve line breaks चालू कीजिए और हर सिंगल न्यूलाइन एक br टैग बन जाती है, ताकि कोई डाक पता या कोई छोटी कविता एक ही पैराग्राफ के भीतर अपनी सटीक लाइन संरचना बनाए रखे। यह अंतर मायने रखता है: p टैग मार्जिन के साथ अलग-अलग ब्लॉक बनाते हैं, जबकि br टैग किसी ब्लॉक के भीतर लाइन ब्रेक कराते हैं, बिना उस अतिरिक्त स्पेसिंग के।

एक हल किया हुआ उदाहरण

कल्पना कीजिए कि एक खाली लाइन से अलग किए दो छोटे पैराग्राफ हैं, जहाँ पहला पैराग्राफ टाइप की गई दो लाइनों में बँटा है। पैराग्राफ कन्वर्ज़न चालू और Preserve line breaks बंद होने पर, आपको दो p एलिमेंट मिलते हैं और पहला वाला एक ही प्रवाहमान वाक्य की तरह पढ़ा जाता है। अब Preserve line breaks चालू कीजिए और पहले p में अब ठीक उसी जगह एक br टैग आ जाता है जहाँ आपने Enter दबाया था, जिससे टाइप की गई दोनों लाइनें एक के ऊपर एक बनी रहती हैं। एक ही इनपुट, दो अलग और पूरी तरह वैध नतीजे, जिन्हें बस एक चेकबॉक्स से चुना जाता है।

एस्केपिंग से जुड़ी वह सावधानी जो आपको समझनी ज़रूरी है

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

व्यवहार में आम लेखन के लिए यह ठीक है, लेकिन जब आपके टेक्स्ट में सिंबल शामिल हों तो सोच-समझकर काम लीजिए। अगर आप कोड के बारे में लिख रहे हैं और आपके पैराग्राफ में किसी टैग नाम के पहले लेस-दैन चिह्न जैसा कुछ है, तो ब्राउज़र उसे मार्कअप समझने की कोशिश कर सकता है। जब ऐसा जोखिम हो, तो पहले खतरनाक कैरेक्टर को खुद एस्केप कीजिए — एम्परसैंड की जगह &, लेस-दैन चिह्न की जगह <, और ग्रेटर-दैन चिह्न की जगह > लिखकर — ताकि वे पार्स होने के बजाय शाब्दिक टेक्स्ट के रूप में दिखें।

क्लास और पूर्ण दस्तावेज़

दो विकल्प आउटपुट को उसकी मंज़िल के हिसाब से ढालते हैं। Add class to paragraphs आपको हर जनरेट किए गए p टैग पर एक CSS क्लास लगाने देता है, जिससे आपके पेस्ट करते ही पूरा कंटेंट ब्लॉक आपकी मौजूदा स्टाइल को अपना लेता है, बिना किसी मैनुअल एडिटिंग के। बदले गए टेक्स्ट को किसी साइट की टाइपोग्राफी से मिलाने का यह सबसे तेज़ तरीका है।

Wrap in complete HTML document स्निपेट को एक पूरी, स्वतंत्र फ़ाइल में बदल देता है, जिसमें आपके पैराग्राफ के चारों ओर html, head, और body टैग होते हैं। जब आप किसी ऐसे मौजूदा पेज या एडिटर में पेस्ट कर रहे हों जो पहले से वह संरचना देता है, तो इसे बंद रहने दीजिए; और जब आपको एक स्व-निहित फ़ाइल चाहिए जिसे आप सहेज कर सीधे ब्राउज़र में खोल सकें या किसी HTML दस्तावेज़ के रूप में अटैच कर सकें, तब इसे चालू कीजिए।

यह किसी असली वर्कफ़्लो में कहाँ फ़िट होता है

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

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

बचने लायक आम गलतियाँ

क्लासिक गलती है वहाँ सिंगल लाइन ब्रेक का इस्तेमाल करना जहाँ आपका मतलब नया पैराग्राफ था, और फिर हैरान होना कि दो ब्लॉक आपस में क्यों जुड़ गए; असली पैराग्राफ के बीच एक खाली लाइन डालिए। इसकी उलटी गलती है प्रवाहमान गद्य के लिए Preserve line breaks को चालू छोड़ देना, जो आपके टेक्स्ट में जगह-जगह br टैग बिखेर देता है और अलग-अलग स्क्रीन आकारों पर सहज रीफ़्लो में बाधा डालता है। और जैसा ऊपर बताया गया, यह न मान लीजिए कि टूल विशेष कैरेक्टर को सैनिटाइज़ करता है: अगर आपके कंटेंट में ऐसे HTML सिंबल हैं जिन्हें आप शाब्दिक रूप से दिखाना चाहते हैं, तो उन्हें बदलने से पहले एस्केप कीजिए।