लोरेम इप्सम का क्या चक्कर है? प्लेसहोल्डर टेक्स्ट का इतिहास और सिद्धांत

एक वाक्य में

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

यह कौन सी समस्या हल करता है

सोचिए: आप एक डिज़ाइनर हैं जो एक शानदार नई वेबसाइट लेआउट बना रहे हैं। आपके पास हेडलाइन, पैराग्राफ और इमेज कैप्शन के लिए बॉक्स हैं। लेकिन आप उनमें क्या डालेंगे?

आप 'हेडलाइन यहाँ आएगी' और 'इस पैराग्राफ के लिए कंटेंट बाद में दिया जाएगा' लिख सकते हैं। लेकिन इसमें दो समस्याएं हैं। पहली, यह असली टेक्स्ट जैसा नहीं लगता। 'हेडलाइन यहाँ आएगी' दो शब्द हैं; एक असली हेडलाइन पांच या दस की हो सकती है। बार-बार 'कंटेंट यहाँ' दोहराने वाला टेक्स्ट ब्लॉक एक अजीब, ध्यान भटकाने वाला पैटर्न बनाता है जो एक असली पैराग्राफ के प्राकृतिक बनावट को नहीं दर्शाता है। दूसरी, और इससे भी ज़्यादा खतरनाक, अगर आप असली, पठनीय अंग्रेजी का उपयोग करते हैं जैसे 'हमारी कंपनी की स्थापना 1998 में एक मिशन के साथ हुई थी...', तो आपका क्लाइंट या बॉस अनिवार्य रूप से इसे पढ़ना शुरू कर देगा। आपके सुंदर डिज़ाइन को परखने के बजाय, वे कहेंगे, 'रुको, हमारी स्थापना तो 1999 में हुई थी,' और आप कॉपी के बारे में बातचीत में फंस जाएंगे, न कि कंपोजीशन के बारे में।

मूल समस्या फॉर्म के मूल्यांकन को कंटेंट के मूल्यांकन से अलग करना है।

यहीं पर लोरेम इप्सम की एंट्री होती है। इसकी मूल कहानी आपके विचार से कहीं ज़्यादा कूल है। यह सिर्फ़ ऊटपटांग शब्द नहीं हैं। मानक टेक्स्ट एक क्लासिकल लैटिन टेक्स्ट, "De finibus bonorum et malorum" ("अच्छाई और बुराई के अंत पर") से लिया गया एक स्क्रैम्बल किया हुआ और संशोधित अंश है, जिसे रोमन राजनेता सिसरो ने 45 ईसा पूर्व में लिखा था।

इसे फिलर टेक्स्ट के रूप में उपयोग करने की प्रथा कम से कम 1500 के दशक की है, जब माना जाता है कि एक अज्ञात प्रिंटर ने एक टाइप स्पेसिमेन बुक बनाने के लिए टाइप की एक गैली को स्क्रैम्बल किया था। लेकिन इसकी आधुनिक प्रसिद्धि 1960 के दशक से आती है। Letraset नामक एक कंपनी ग्राफिक डिजाइनरों के लिए अक्षरों की ड्राई-ट्रांसफर शीट बेचती थी, और उन्होंने इन शीट्स पर लोरेम इप्सम पैसेज को लोकप्रिय बनाया। जब 1980 के दशक में Aldus PageMaker जैसे डेस्कटॉप पब्लिशिंग सॉफ्टवेयर आए, तो उनमें एक इन-बिल्ट लोरेम इप्सम जनरेटर शामिल था, जिसने डिजिटल डिजाइनर के टूलकिट में इसकी जगह हमेशा के लिए पक्की कर दी।

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

अंदर की कहानी: यह कैसे काम करता है

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

सोर्स टेक्स्ट: सिसरो की विरासत

प्रक्रिया एक सोर्स टेक्स्ट से शुरू होती है। क्लासिक Lorem ipsum dolor sit amet... सिसरो के एक पैसेज का एक विकृत संस्करण है। मूल पैसेज शुरू होता है:

...neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit...

जिसका अनुवाद है:

...न ही कोई ऐसा है जो स्वयं दर्द से प्यार करता है या उसका पीछा करता है या उसे प्राप्त करना चाहता है, क्योंकि यह दर्द है...

जैसा कि आप देख सकते हैं, प्लेसहोल्डर का पहला शब्द, Lorem, dolorem का एक टुकड़ा है। शब्द असली लैटिन हैं, लेकिन उन्हें काटा-छाँटा गया है, पुनर्व्यवस्थित किया गया है, और कुछ निरर्थक शब्दों के साथ मिलाया गया है, जिससे पूरा पैसेज व्याकरण की दृष्टि से गलत और अर्थहीन हो जाता है—जो कि इसका पूरा उद्देश्य है।

एक जनरेटर का 'डिक्शनरी' इन लैटिन और लैटिन-जैसे शब्दों की एक बड़ी सूची है।

मूल सिसरो	स्क्रैम्बल किया हुआ लोरेम इप्सम
dolorem ipsum	Lorem ipsum dolor
quia dolor sit	quia dolor sit
amet, consectetur	amet, consectetur
adipisci velit	adipiscing elit

जनरेशन एल्गोरिथम

एक कॉन्फ़िगर करने योग्य जनरेटर हर बार एक ही 100-शब्दों का ब्लॉक नहीं उगल देता। यह नियमों के एक सरल सेट का उपयोग करके स्क्रैच से पैराग्राफ बनाता है।

1. वाक्य जनरेशन (Sentence Generation): एक वाक्य बनाने के लिए, एल्गोरिथम अपनी शब्द सूची से शब्दों की एक यादृच्छिक संख्या (मान लीजिए, 8 और 20 के बीच) चुनता है। यह उन्हें स्पेस से जोड़ता है, पहले शब्द को कैपिटलाइज़ करता है, और एक पीरियड जोड़ता है। इसे और फैंसी बनाने के लिए, यह कुछ शब्दों के बाद यादृच्छिक रूप से कॉमा डाल सकता है।

2. पैराग्राफ जनरेशन (Paragraph Generation): एक पैराग्राफ बनाने के लिए, एल्गोरिथम बस वाक्य जनरेटर को कई बार (मान लीजिए, 3 और 7 के बीच) यादृच्छिक रूप से कॉल करता है और परिणामी वाक्यों को जोड़ता है।

3. कॉन्फ़िगर करने योग्य आउटपुट (Configurable Output): जब आप '5 पैराग्राफ' मांगते हैं, तो टूल बस पैराग्राफ जनरेशन लूप को पांच बार चलाता है। कुछ जनरेटर अधिक नियंत्रण प्रदान करते हैं, जैसे शब्द या कैरेक्टर काउंट निर्दिष्ट करना, जिसमें बस तब तक वर्ड-पिकिंग लूप चलाना शामिल है जब तक कि लक्ष्य काउंट पूरा न हो जाए।

यहाँ कोर लॉजिक का एक छोटा जावास्क्रिप्ट-जैसा स्यूडो-कोड उदाहरण है:

// The dictionary of words
const LOREM_WORDS = ["lorem", "ipsum", "dolor", "sit", "amet", "consectetur", ...];

// Generates one sentence of a variable length
function generateSentence(minWords = 8, maxWords = 20) {
  const wordCount = Math.floor(Math.random() * (maxWords - minWords + 1)) + minWords;
  let words = [];
  for (let i = 0; i < wordCount; i++) {
    const randomIndex = Math.floor(Math.random() * LOREM_WORDS.length);
    words.push(LOREM_WORDS[randomIndex]);
  }
  let sentence = words.join(" ");
  // Capitalize first letter and add a period
  return sentence.charAt(0).toUpperCase() + sentence.slice(1) + ".";
}

// Generates one paragraph of a variable number of sentences
function generateParagraph(minSentences = 3, maxSentences = 7) {
  const sentenceCount = Math.floor(Math.random() * (maxSentences - minSentences + 1)) + minSentences;
  let sentences = [];
  for (let i = 0; i < sentenceCount; i++) {
    sentences.push(generateSentence());
  }
  return sentences.join(" ");
}

// Generate 3 paragraphs
for (let p = 0; p < 3; p++) {
  console.log(generateParagraph());
}

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

असल दुनिया की कहानियाँ

अति-उत्साही क्लाइंट

एक फ्रीलांस डिज़ाइनर, मारिया, एक नई आर्टिसनल बेकरी के लिए एक वेबसाइट बना रही थी। उसने एक भव्य होमपेज का मॉकअप बनाया, जिसमें "हमारी कहानी" और प्रोडक्ट डिस्क्रिप्शन सेक्शन के लिए लोरेम इप्सम का उपयोग किया गया। अपने काम पर गर्व करते हुए, उसने डिज़ाइन अप्रूवल के लिए क्लाइंट को एक लिंक भेजा, और अपने ईमेल में बताया कि टेक्स्ट सिर्फ एक प्लेसहोल्डर था। क्लाइंट, जो अपनी बेकरी चलाने में व्यस्त था, ने ईमेल पर सरसरी निगाह डाली और लिंक पर क्लिक कर दिया। एक घंटे बाद, मारिया को एक घबराया हुआ ईमेल मिला: "डिज़ाइन अच्छा है, लेकिन वेबसाइट लैटिन में है! हम 'dolor sit amet' नहीं बेचते! कृपया टेक्स्ट को तुरंत ठीक करें।" मारिया ने अगले 20 मिनट फोन पर उसे शांत करने और प्लेसहोल्डर टेक्स्ट का उद्देश्य फिर से समझाने में बिताए।

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

न टूटने वाले शब्द का मामला

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

सबक: लोरेम इप्सम छोटे, लैटिन-आधारित शब्दों का उपयोग करता है। यह सामान्य फ्लो की जांच के लिए बहुत अच्छा है लेकिन लेआउट के स्ट्रेस-टेस्टिंग के लिए भयानक है। हमेशा अपने UI को यथार्थवादी सबसे खराब स्थिति वाले कंटेंट के साथ टेस्ट करें, जैसे लंबे शब्द, छोटी हेडलाइन, या विभिन्न भाषाओं में टेक्स्ट।

प्रोडक्शन साइट की गड़बड़ी

एक जूनियर डेवलपर, क्लो, को एक लाइव ई-कॉमर्स साइट पर एक नया प्रोमोशनल बैनर जोड़ने का काम सौंपा गया था। यह एक जल्दबाजी का काम था, जिसे शुक्रवार को शाम 4 बजे अनुरोध किया गया था। उसने बैनर को कोड किया, उसे स्टाइल किया, और अलाइनमेंट की जांच के लिए कुछ लोरेम इप्सम डाल दिया। वीकेंड से पहले डिप्लॉय करने की हड़बड़ी में, उसने अपना कोड कमिट किया और उसे प्रोडक्शन में पुश कर दिया। अगले तीन घंटों तक, कंपनी के होमपेज पर एक प्रमुख बैनर दिखाई दिया जिसमें लिखा था: "हमारे नए स्प्रिंग कलेक्शन को देखें! Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."

सबक: प्लेसहोल्डर टेक्स्ट रेडियोएक्टिव है—यह कभी भी प्रोडक्शन तक नहीं पहुंचना चाहिए। अपनी डिप्लॉयमेंट प्रक्रिया में जांच लागू करें, जैसे एक सरल स्क्रिप्ट जो आपके कोडबेस में "lorem ipsum" की खोज करती है और यदि यह पाया जाता है तो बिल्ड को फेल कर देती है। यह शर्मनाक गलतियों के खिलाफ एक सस्ता और प्रभावी सेफ्टी नेट है।

आम गलतियाँ और जाल

• इसे बदलना भूल जाना। यह सबसे बड़ा पाप है। लोरेम इप्सम के साथ लाइव होने वाली साइट अव्यवसायिक और टूटी हुई लगती है। इसे ढूंढकर खत्म करने के लिए प्री-डिप्लॉयमेंट स्क्रिप्ट या एक मैनुअल चेकलिस्ट का उपयोग करें।
• क्लाइंट को भ्रमित होने देना। यदि आप यह नहीं समझाते कि यह क्या है, तो क्लाइंट निश्चित रूप से भ्रमित होंगे और सोचेंगे कि कुछ गड़बड़ है। एक अग्रिम व्याख्या सभी का समय और चिंता बचाती है।
• यह मान लेना कि यह वास्तविक कंटेंट की लंबाई का प्रतिनिधित्व करता है। 'Lorem ipsum dolor sit amet...' की एक पंक्ति एक वास्तविक हेडलाइन नहीं है। एक जेनरेट किया गया पैराग्राफ एक वास्तविक उपयोगकर्ता बायो के समान लंबाई का नहीं होता है। लचीलेपन को ध्यान में रखकर डिज़ाइन करें, क्योंकि वास्तविक कंटेंट अप्रत्याशित होता है।
• अंतर्राष्ट्रीयकरण (i18n) को अनदेखा करना। लोरेम इप्सम का कैरेक्टर सेट और शब्द संरचना लैटिन-आधारित है। यह यह नहीं बताएगा कि आपका डिज़ाइन चीनी (中文) के व्यापक कैरेक्टर्स, जर्मन के लंबे यौगिक शब्दों, या अरबी (عربى) के दाएं-से-बाएं फ्लो को कैसे हैंडल करेगा।
• UX टेस्टिंग के लिए इसका उपयोग करना। इसे अनदेखा करने के लिए डिज़ाइन किया गया है। यदि आप यह परीक्षण कर रहे हैं कि कोई उपयोगकर्ता निर्देशों का पालन कर सकता है या कॉल टू एक्शन को समझ सकता है, तो आपको यथार्थवादी, सार्थक टेक्स्ट का उपयोग करना चाहिए। उपयोगकर्ता-सामना करने वाले निर्देशों के लिए लोरेम इप्सम का उपयोग करना किसी को बिना लेबल वाला नक्शा सौंपने जैसा है।

यह आपके रडार पर क्यों होना चाहिए

एक डेवलपर, डिज़ाइनर, या यहाँ तक कि एक प्रोजेक्ट मैनेजर के रूप में, लोरेम इप्सम डिजिटल निर्माण प्रक्रिया का एक बुनियादी हिस्सा है। आपको इसके बारे में तब सोचना चाहिए जब आप ऐसी स्थिति में हों जहाँ कंटेंट को अंतिम रूप देने से पहले स्ट्रक्चर बनाने की आवश्यकता हो।

• फ्रंटएंड और UI डेवलपमेंट: जब आप एक React कंपोनेंट, एक CSS ग्रिड लेआउट, या एक साधारण HTML पेज बना रहे होते हैं, तो आपको यह देखने की ज़रूरत होती है कि टेक्स्ट कैसे फ्लो होता है। लोरेम इप्सम उन p टैग्स और divs को भरने के लिए आपका पसंदीदा तरीका है ताकि आप कॉपीराइटरों का इंतजार किए बिना स्टाइलिंग को सही कर सकें।
• UI/UX डिज़ाइन और वायरफ्रेमिंग: Figma, Sketch, या Adobe XD में, प्लेसहोल्डर टेक्स्ट का उपयोग यह सुनिश्चित करता है कि फीडबैक सेशन लेआउट, हायरार्की और यूज़र फ्लो पर केंद्रित रहें, बजाय इसके कि वे कॉपी-एडिटिंग सेशन में बदल जाएं।
• डेटाबेस सीडिंग: ऐप बनाते समय, आपको टेस्ट डेटा की आवश्यकता होती है। एक स्क्रिप्ट जो 1,000 नकली उपयोगकर्ता बनाती है, उनके "बायोग्राफी" फ़ील्ड को भरने के लिए लोरेम इप्सम का उपयोग कर सकती है, जिससे आपका डेवलपमेंट एनवायरनमेंट NULL या खाली स्ट्रिंग्स से भरे डेटाबेस की तुलना में बहुत अधिक यथार्थवादी लगता है।
• प्रिंट और ग्राफिक डिज़ाइन: इसका मूल उपयोग आज भी जीवित है। ब्रोशर, मैगज़ीन या बुक कवर डिज़ाइन करते समय, टाइपोग्राफर इसका उपयोग फ़ॉन्ट विकल्पों, पेयरिंग्स, लीडिंग (लाइन-हाइट), और कर्निंग (लेटर-स्पेसिंग) का मूल्यांकन करने के लिए करते हैं।

और गहराई में जाएं

• Wikipedia: Lorem Ipsum — लोरेम इप्सम के इतिहास, उत्पत्ति और उद्देश्य का निश्चित, अच्छी तरह से सोर्स किया गया ओवरव्यू।
• Cicero's "De finibus bonorum et malorum" — मूल लैटिन टेक्स्ट (अंग्रेजी अनुवाद के साथ) पढ़ें जिससे लोरेम इप्सम का जन्म हुआ। संबंधित पैसेज बुक 1, सेक्शन 1.9.32-33 में है।
• Lipsum.com — वेब पर सबसे पुराने लोरेम इप्सम जनरेटर में से एक, जिसमें इतिहास और आम गलतफहमियों की अच्छी व्याख्या है।
• "Designing with Real Content" by A List Apart — एक उत्कृष्ट लेख जो लोरेम इप्सम की सीमाओं पर चर्चा करता है और डिज़ाइन प्रक्रिया में यथासंभव शीघ्र यथार्थवादी कंटेंट का उपयोग करने की वकालत करता है।