पाठ ट्रंकेटर

«एक वर्ण» का वास्तव में क्या मतलब है

एक उपयोगकर्ता एक «वर्ण» देखता है जहाँ JavaScript तीन मान देखता है। स्ट्रिंग «👨‍👩‍👧‍👦» (चार लोगों का परिवार इमोजी) एक ग्राफीम क्लस्टर, Zero-Width Joiners (U+200D) से जुड़े सात Unicode कोड पॉइंट, और ग्यारह UTF-16 कोड यूनिट है। इसीलिए JavaScript में "👨‍👩‍👧‍👦".length === 11 है। आधिकारिक परिभाषा Unicode Standard Annex #29 «Unicode Text Segmentation» (वर्तमान संस्करण 15.0, सितंबर 2022) में रहती है, जो ग्राफीम क्लस्टर सीमाओं, शब्द सीमाओं और वाक्य सीमाओं को निर्दिष्ट करती है। आधुनिक JavaScript Intl.Segmenter के माध्यम से UAX #29 उजागर करता है, ECMAScript 2022 में मानकीकृत और Firefox 125 (अप्रैल 2024) के बाद से हर ब्राउज़र में भेजा गया; Chrome इसे संस्करण 87 (नवंबर 2020) से और Safari 14.1 (अप्रैल 2021) से। उपयोग करें new Intl.Segmenter('hi', { granularity: 'grapheme' }) मनुष्यों की तरह गिनने के लिए।

उन प्लेटफार्मों पर वर्ण सीमाएं जहां आप शिप करते हैं

• Google Search मेटा विवरण: कोई लागू सीमा नहीं, लेकिन SERP स्निपेट आमतौर पर डेस्कटॉप पर 155-160 वर्ण और मोबाइल पर लगभग 120 पर ट्रंकेट होता है। 2018 से Google के अपने दिशानिर्देशों ने जोर दिया है कि स्निपेट पृष्ठ पर कहीं से भी खींचा जा सकता है, न कि केवल <meta name="description"> टैग से।
• Twitter / X: नवंबर 2017 से मुफ्त खातों के लिए 280 वर्ण, मई 2023 से X Premium के लिए 25 000। विशेष गिनती नियम: कोई भी URL लंबाई की परवाह किए बिना 23 वर्ण के रूप में गिना जाता है, और CJK वर्ण प्रत्येक 2 के रूप में गिने जाते हैं।
• SMS: GSM 7-bit वर्णमाला (3GPP TS 23.038) में 160 वर्ण प्रति संदेश, गैर-GSM टेक्स्ट सहित अधिकांश इमोजी और गैर-लैटिन स्क्रिप्ट के लिए UCS-2 (UTF-16) में 70 वर्ण। मल्टी-पार्ट SMS प्रति भाग 153 / 67 का उपयोग करता है क्योंकि उपयोगकर्ता डेटा हेडर पेलोड के 7 वर्णों का उपभोग करता है।
• Open Graph विवरण (Facebook): 110-200 वर्णों की सिफारिश, ट्रंकेशन आमतौर पर 300 पर।
• Twitter Card विवरण: अधिकतम 200 वर्ण, उसके बाद इलिप्सिस के साथ ट्रंकेट।
• LinkedIn पोस्ट: कुल 3 000 वर्ण, लेकिन «अधिक देखें» ट्रंकेशन डेस्कटॉप पर लगभग 210 वर्णों पर ट्रिगर होता है।
• Web Push नोटिफिकेशन बॉडी: कोई औपचारिक सीमा नहीं, लेकिन iOS लगभग 110 वर्णों पर ट्रंकेट होता है और Android लगभग 200 दिखाता है।
• डेटाबेस VARCHAR(N): लीगेसी utf8 कोलेशन के साथ MySQL में, N बाइट्स है; utf8mb4 के साथ, N वर्ण है। PostgreSQL varchar(N) हमेशा वर्ण है।

शब्द सीमाएँ केवल split(' ') नहीं हैं

भोली शब्द-सीमा ट्रंकेटर /\s+/ पर इनपुट विभाजित करता है और पहले शब्द से पहले काटता है जो आपको सीमा से ऊपर धकेलता है। यह अंग्रेजी के लिए काम करता है। यह चीनी, जापानी, कोरियाई और थाई पर विफल हो जाता है, जिनमें से कोई भी शब्दों के बीच व्हाइटस्पेस का उपयोग नहीं करता: पूरा इनपुट एक «शब्द» के रूप में समाप्त होता है, इसलिए ट्रिमर या तो सब रखता है या सब काटता है। अरबी रिक्त स्थान का उपयोग करता है लेकिन अक्षर रूपों को उन तरीकों से जोड़ता है जो सीमा स्थितियों को बदलते हैं। granularity: 'word' के साथ Intl.Segmenter UAX #29 शब्द-सीमा एल्गोरिथम लागू करता है और हर भाषा के लिए सही कटौती उत्पन्न करता है। यह «शब्द-जैसे» खंडों (isWordLike: true लौटाता है) को विराम चिह्न और व्हाइटस्पेस खंडों से भी अलग करता है, इसलिए आप एक पास में खंडों पर अपने वर्ण बजट से पहले अंतिम शब्द सीमा पा सकते हैं।

CSS ट्रंकेशन: text-overflow और line-clamp

यदि लक्ष्य दृष्टिगत रूप से ट्रंकेट करना है जबकि DOM में पूरा टेक्स्ट रखना है (ताकि यह स्क्रीन रीडर्स, सर्च इंजन और कॉपी-पेस्ट के लिए उपलब्ध रहे), तो CSS का उपयोग करें। एक-लाइन ट्रंकेशन को एक साथ तीन गुणों की आवश्यकता होती है: overflow: hidden; white-space: nowrap; text-overflow: ellipsis;। text-overflow: ellipsis CSS Basic User Interface Module Level 4 (W3C Candidate Recommendation अगस्त 2021) में परिभाषित है और Firefox 7 (सितंबर 2011) से हर ब्राउज़र में भेजा गया है; Internet Explorer 6 के पास यह अगस्त 2001 जैसा पहले था। मल्टी-लाइन ट्रंकेशन display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; का उपयोग करता है। -webkit-line-clamp गुण WebKit 2009 का है और अब CSS Overflow Module Level 3 (W3C Working Draft) में परिभाषित है। बिना उपसर्ग वाला line-clamp Safari 18 (सितंबर 2024) और Firefox 125 (अप्रैल 2024) में भेजा गया है; हमेशा फ़ॉलबैक के रूप में -webkit- फ़ॉर्म शामिल करें। क्रिटिकल सीमा: CSS ट्रंकेशन विशुद्ध रूप से प्रस्तुति है। पूरा टेक्स्ट अभी भी HTML स्रोत में है, इसलिए SEO स्निपेट, ईमेल सारांश और JS-संचालित सर्च इंडेक्स सभी अनट्रंकेटेड स्ट्रिंग देखते हैं।

सामान्य गलतियाँ

• सीमाओं के लिए str.length का उपयोग करना। JavaScript का String.prototype.length UTF-16 कोड यूनिट लौटाता है, वर्ण नहीं। तीन अंगूठा-ऊपर इमोजी «👍👍👍» वाला एक स्टेटस length === 6 रिपोर्ट करता है; Twitter इसे 3 के रूप में गिनता है।
• सफिक्स लंबाई न घटाना। यदि आपका बजट 160 वर्ण है और आप … जोड़ते हैं, तो आपके टेक्स्ट बॉडी के पास काम करने के लिए 159 वर्ण हैं। कई भोले कार्यान्वयन सीमा से ऊपर स्ट्रिंग्स उत्पन्न करते हैं।
• CJK और थाई को व्हाइटस्पेस-विभाजित करना। अंतर-शब्द रिक्त स्थान के बिना भाषाएँ अविभाज्य हो जाती हैं। granularity: 'word' के साथ Intl.Segmenter का उपयोग करें।
• ट्रेलिंग विराम चिह्न को हटाने से पहले काटना। «नमस्ते, दुनिया!» 8 वर्णों तक छंटा हुआ भोले तरीके से «नमस्ते, द» बन जाता है, या «नमस्ते,…» यदि स्मार्ट हो, या «नमस्ते…» यदि और भी स्मार्ट हो और ट्रेलिंग कॉमा हटा दे।
• HTML टैग के अंदर ट्रंकेट करना। <a href="long-url">text</a> को 30 वर्णों पर ट्रंकेट करना एक अनबंद टैग के साथ एक स्ट्रिंग उत्पन्न करता है। या तो पहले HTML हटाएँ या DOM-जागरूक ट्रंकेटर का उपयोग करें।
• तीन डॉट्स बनाम एक एलिप्सिस। Unicode एलिप्सिस … (U+2026) एक वर्ण है, तीन डॉट्स ... तीन हैं। प्लेटफॉर्म के वर्ण काउंटर के लिए सही चुनें।
• क्लाइंट-साइड सत्यापन के लिए <input maxlength> पर भरोसा करना। HTML Living Standard UTF-16 कोड यूनिट गिनता है, इसलिए इमोजी पेस्ट करने वाला उपयोगकर्ता आपके Unicode-जागरूक बैकएंड वैलिडेटर की तुलना में एक अलग गिनती देखता है। सर्वर-साइड पर सत्यापित करें।

अधिक अक्सर पूछे जाने वाले प्रश्न

Twitter मेरे URL को 23 वर्णों के रूप में क्यों गिनता है, भले ही यह बहुत लंबा हो?

Twitter एनालिटिक्स और दुर्व्यवहार पहचान के लिए अपने t.co शॉर्टनर के माध्यम से हर URL को लपेटता है, इसलिए यह हर URL को शॉर्टनर की वर्स्ट-केस लंबाई पर बिल करता है: HTTPS के लिए 23 वर्ण। यदि आप 100-वर्ण URL लिखते हैं, तो यह Twitter के UI में 23 के रूप में गिना जाता है। वही नियम Twitter Card मेटाडेटा पर लागू होता है। ओपन-सोर्स लाइब्रेरी twitter-text (Twitter, MIT) सटीक नियम लागू करती है यदि आपको बाइट-परफेक्ट सिमुलेशन की आवश्यकता है।

क्या यह टूल अरबी और हिब्रू जैसी RTL भाषाओं का सम्मान करता है?

टेक्स्ट सामग्री इसके bidi (द्विदिश) मार्करों सहित संरक्षित है। ट्रंकेशन तार्किक-क्रम वर्णों पर संचालित होता है, इसलिए वर्ण 100 पर अरबी वाक्य काटना 100वें तार्किक वर्ण पर काटता है (वह जो एक स्क्रीन रीडर पहले घोषणा करेगा)। दाएँ-से-बाएँ प्रवाह के कारण प्रदर्शन क्रम दृष्टिगत रूप से उलट सकता है, लेकिन अंतर्निहित स्ट्रिंग सुसंगत है।

मेरा ट्रंकेटेड SMS 161 वर्णों पर अभी भी तीन भागों में क्यों विभाजित होता है?

SMS केवल-लैटिन टेक्स्ट के लिए 7-बिट GSM एन्कोडिंग का उपयोग करता है, एक सेगमेंट में 160 वर्ण फिट होते हैं। लेकिन GSM-7 के बाहर का कोई भी वर्ण, जिसमें ऑटोकरेक्ट से कर्ली «स्मार्ट» कोट्स (U+2018 / U+2019), Unicode एलिप्सिस (U+2026), या इमोजी शामिल हैं, पूरे संदेश को प्रति सेगमेंट 70 वर्ण पर UCS-2 एन्कोडिंग के लिए मजबूर करता है। यदि आपके ट्रंकेटेड 160-वर्ण संदेश में एक स्मार्ट कोट है, तो वाहक इसे तीन 70-वर्ण UCS-2 भागों में विभाजित करता है। SMS के लिए स्मार्ट कोट्स को ASCII कोट्स से बदलें।

क्या मैं टैग तोड़े बिना HTML-स्वरूपित टेक्स्ट को ट्रंकेट कर सकता हूँ?

वर्ण-गिनती कट के साथ सुरक्षित रूप से नहीं। या तो पहले HTML टैग हटाएँ (DOMParser या सर्वर-साइड पार्सर के माध्यम से), सादा टेक्स्ट ट्रंकेट करें, फिर वैकल्पिक रूप से फिर से लपेटें; या DOM-जागरूक ट्रंकेटर का उपयोग करें जो नोड ट्री को पार करता है और पूरे टेक्स्ट-नोड उपसर्गों को क्लोन करता है। HTML स्ट्रिंग पर शुद्ध रेगेक्स सुरक्षित नहीं है (HTML एक नियमित भाषा नहीं है)।

क्या कुछ सर्वर पर भेजा जाता है?

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