CSS को आधे अक्षर पर लगाना? JavaScript का स्मार्ट ट्रिक

क्या CSS को आधे अक्षर पर लगाया जा सकता है? JavaScript का स्मार्ट ट्रिक समझें

क्या आपने कभी सोचा है कि अक्षर 'A' के बाएं आधे हिस्से को लाल और दाएं आधे हिस्से को नीला कैसे करें? या टेक्स्ट का ऊपरी हिस्सा पारदर्शी और निचला हिस्सा सामान्य रखें? अगर आपने Stack Overflow पर "Is it possible to apply CSS to half of a character?" सवाल देखा है, तो आप अकेले नहीं हैं। इस सवाल को हज़ारों बार देखा गया है, और इसका जवाब वेब डेवलपर्स के लिए एक बड़ी चुनौती है।

पहली नज़र में लगता है कि CSS सिर्फ पूरे एलिमेंट पर काम करता है। लेकिन JavaScript और कुछ ट्रिक्स की मदद से हम ब्राउज़र को धोखा दे सकते हैं और "आधे-अधूरे" स्टाइल का भ्रम पैदा कर सकते हैं। आज हम तीन काम के तरीके सीखेंगे: टेक्स्ट को डुप्लिकेट करने से लेकर SVG और clip-path के उपयोग तक। चलिए शुरू करते हैं!

CSS अक्षर को "काट" क्यों नहीं सकता?

कोड में जाने से पहले, समस्या की जड़ समझते हैं। CSS ब्लॉक (बॉक्स) के साथ काम करता है। हर अक्षर टेक्स्ट फ्लो का हिस्सा है, और ब्राउज़र इसे एक इकाई के रूप में रेंडर करता है। कोई half-color या half-background प्रॉपर्टी नहीं है। यहां तक कि ::before और ::after जैसे pseudo-elements भी पूरे एलिमेंट पर काम करते हैं, उसकी सामग्री पर नहीं।

लेकिन इसका मतलब यह नहीं कि समस्या हल नहीं हो सकती। हम JavaScript से टेक्स्ट को विभाजित करके हर आधे हिस्से पर अलग-अलग स्टाइल लगा सकते हैं। बस पढ़ने में आसानी और सिमैंटिक्स का ध्यान रखना ज़रूरी है।

तरीका 1: clip-path के साथ टेक्स्ट डुप्लिकेट करना (CSS + JS)

Stack Overflow पर सबसे लोकप्रिय ट्रिक है—टेक्स्ट की दो कॉपी एक-दूसरे पर रखना और clip-path से हर आधे हिस्से को काटना। आइए इसे JavaScript में लागू करें।

चरण 1. HTML संरचना

<div class="half-text" data-text="नमस्ते दुनिया!"></div>

चरण 2. JavaScript लॉजिक

const container = document.querySelector('.half-text');\nconst text = container.dataset.text;\n\n// टेक्स्ट की दो कॉपी बनाएं\nconst leftPart = document.createElement('span');\nleftPart.textContent = text;\nleftPart.className = 'half left';\n\nconst rightPart = document.createElement('span');\nrightPart.textContent = text;\nrightPart.className = 'half right';\n\ncontainer.appendChild(leftPart);\ncontainer.appendChild(rightPart);

चरण 3. CSS स्टाइल

.half-text {\n  position: relative;\n  font-size: 48px;\n  font-weight: bold;\n  display: inline-block;\n}\n\n.half {\n  position: absolute;\n  top: 0;\n  left: 0;\n}\n\n.half.left {\n  color: #ff6b6b;\n  clip-path: inset(0 50% 0 0); /* बायां आधा */\n}\n\n.half.right {\n  color: #4ecdc4;\n  clip-path: inset(0 0 0 50%); /* दायां आधा */\n}

नतीजा: हर अक्षर बिल्कुल बीच में बंटा हुआ है। clip-path अक्षरों को एक खड़ी रेखा से काटता है। यह ट्रिक मोनोस्पेस फॉन्ट के साथ बेहतरीन काम करती है, लेकिन सामान्य फॉन्ट में थोड़ा खिसकाव हो सकता है—इसे letter-spacing: 0 से ठीक किया जा सकता है।

तरीका 2: टेक्स्ट को अक्षरों में बांटना (एडवांस्ड JS)

अगर आपको पूरे ब्लॉक पर नहीं, बल्कि हर अक्षर पर अलग-अलग स्टाइल लगानी है (जैसे 'A' का ऊपरी आधा हरा, निचला पीला), तो हर अक्षर के साथ अलग-अलग काम करना होगा। यहां JavaScript से टेक्स्ट स्टाइलिंग काम आती है।

आइडिया

हम स्ट्रिंग को अक्षरों की एक सूची में बांटते हैं, हर अक्षर को एक अलग <span> में रखते हैं, और फिर हर स्पैन को डुप्लिकेट करके clip-path लगाते हैं।

function splitTextToHalf(selector) {\n  const element = document.querySelector(selector);\n  const originalText = element.textContent;\n  element.innerHTML = '';\n\n  // हर अक्षर के लिए कंटेनर बनाएं\n  for (let char of originalText) {\n    const wrapper = document.createElement('span');\n    wrapper.className = 'char-wrapper';\n    \n    const leftSpan = document.createElement('span');\n    leftSpan.textContent = char;\n    leftSpan.className = 'char-half left';\n    \n    const rightSpan = document.createElement('span');\n    rightSpan.textContent = char;\n    rightSpan.className = 'char-half right';\n    \n    wrapper.appendChild(leftSpan);\n    wrapper.appendChild(rightSpan);\n    element.appendChild(wrapper);\n  }\n}

इस तरीके से हर अक्षर पर अलग-अलग स्टाइल लगाई जा सकती है—जैसे ग्रेडिएंट, अलग रंग, या एनिमेशन।