सार संक्षेप (Quick Summary):
वेबसाइट, वर्डप्रेस या वेब ऐप्लिकेशन में हिंदी सामग्री प्रकाशित करते समय ब्राउज़र में प्रश्न चिह्न (????) दिखने, डेटाबेस करप्शन व फ़ॉन्ट रेंडरिंग समस्याओं का पूर्ण वेब डेवलपर समाधान।
💡 मूल कारण व परिचय (Overview & Context)
वेबसाइटों और ऑनलाइन पोर्टल्स पर भारतीय भाषाओं में काम करते समय डेवलपर्स को अक्सर तीन स्तरों पर समस्याओं का सामना करना पड़ता है: (1) ब्राउज़र में हिंदी की जगह ??? या अजीब सिंबल दिखना, (2) डेटाबेस में सेव करते समय हिंदी करप्ट होना, और (3) विभिन्न ब्राउज़रों में देवनागरी की मात्राओं का असमान दिखना। आधुनिक वेब मानकों (W3C) के अनुसार इसका संपूर्ण समाधान UTF-8 एन्कोडिंग और Google Fonts का सही एकीकरण है।
🛠️ चरणबद्ध समाधान प्रक्रिया (Step-by-Step Practical Guide)
1
HTML5 हेडर में UTF-8 Charset डिक्लेयर करें
-
▪
अपने सभी वेब पेजों की
<head>में सबसे पहली लाइन पर यह मेटा टैग लगाएँ: -
▪
<meta charset="UTF-8"> -
▪
सर्वर कॉन्फ़िगरेशन (Apache / Nginx / PHP) में हेडर भेजें:
header('Content-Type: text/html; charset=UTF-8');
2
MySQL डेटाबेस में utf8mb4 कोलेशन सेट करें
-
▪
सादे latin1 या पुराने utf8 के बजाय हमेशा utf8mb4 और कोलेशन utf8mb4_unicode_ci का प्रयोग करें।
-
▪
डेटाबेस कनेक्शन बनाते समय PHP PDO में लिखें:
charset=utf8mb4।
3
CSS में आधुनिक Google Devanagari वेब फ़ॉन्ट लोड करें
-
▪
Google Fonts से Hind या Noto Sans Devanagari लोड करें:
-
▪
@import url('https://fonts.googleapis.com/css2?family=Hind:wght@400;500;600;700&display=swap'); -
▪
CSS में
font-family: 'Hind', sans-serif;औरline-height: 1.55;दें ताकि मात्राओं के ऊपर-नीचे कटने की समस्या न हो।
🔍 जाँच कैसे करें कि वेब पेज पर हिंदी सही रेंडर हो रही है
परीक्षण हेतु शब्द (Test Sample):
DevTools (F12) खोलकर Network टैब में Response Headers देखें।
✅
सही स्थिति (Correct):
Response Header में <code>content-type: text/html; charset=UTF-8</code> दिखेगा और मोबाइल व डेस्कटॉप दोनों पर text स्पष्ट दिखेगा।
❌
यदि अभी भी समस्या हो (Troubleshooting):
यदि डेटाबेस से निकालने पर ????? दिखे, तो डेटाबेस कनेक्शन में <code>SET NAMES utf8mb4</code> एक्जीक्यूट करें।