{"id":182,"date":"2026-04-09T16:05:06","date_gmt":"2026-04-09T16:05:06","guid":{"rendered":"https:\/\/keyboardflow.com\/?page_id=182"},"modified":"2026-04-09T16:05:06","modified_gmt":"2026-04-09T16:05:06","slug":"punjabi","status":"publish","type":"page","link":"https:\/\/keyboardflow.com\/index.php\/punjabi\/","title":{"rendered":"PUNJABI"},"content":{"rendered":"\n\n<style>\n:root {\n    --kb-bg: #1e293b;\n    --key-main: #ffffff;\n    --key-text: #0f172a;\n    --accent: #ef4444; \/* Distinct red for Punjabi accent *\/\n    --accent-soft: #fee2e2;\n    --key-shadow: #cbd5e1;\n}\n\n.app-container {\n    width: 98%;\n    max-width: 1400px;\n    background: #f8fafc;\n    border-radius: 12px;\n    padding: 15px;\n    margin: 20px auto;\n    box-shadow: 0 4px 6px -1px rgb(0 0 0 \/ 0.1);\n}\n\n.keyboard {\n    background: var(--kb-bg);\n    padding: 15px;\n    border-radius: 12px;\n    display: flex;\n    flex-direction: column;\n    gap: 6px;\n    user-select: none;\n}\n\n.row {\n    display: flex;\n    justify-content: center;\n    gap: 5px;\n}\n\n.key {\n    flex: 1;\n    min-width: 40px;\n    max-width: 70px;\n    height: 55px;\n    background: var(--key-main);\n    border-radius: 6px;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    position: relative;\n    cursor: pointer;\n    border-bottom: 3px solid var(--key-shadow);\n    transition: all 0.1s ease;\n}\n\n.key.active-press {\n    transform: translateY(2px);\n    border-bottom-width: 1px;\n    background: var(--accent-soft);\n}\n\n.key.modifier {\n    background: #e2e8f0;\n    font-size: 12px;\n    max-width: 100px;\n    font-weight: bold;\n}\n\n.key.space {\n    max-width: 500px;\n    flex: 4;\n}\n\n.eng {\n    position: absolute;\n    top: 3px;\n    right: 5px;\n    font-size: 10px;\n    color: #94a3b8;\n}\n\n.normal {\n    font-size: 20px;\n    font-weight: 600;\n    color: var(--key-text);\n}\n\n.shift-val {\n    position: absolute;\n    bottom: 3px;\n    left: 5px;\n    font-size: 11px;\n    color: var(--accent);\n}\n\ntextarea#punjabiInput {\n    width: 100%;\n    margin-top: 20px;\n    height: 250px;\n    font-size: 28px;\n    padding: 20px;\n    border: 2px solid #e2e8f0;\n    border-radius: 8px;\n    font-family: 'Arial Unicode MS', sans-serif;\n    line-height: 1.6;\n}\n<\/style>\n\n<div class=\"app-container\">\n    <div id=\"pkb\" class=\"keyboard\"><\/div>\n    <textarea id=\"punjabiInput\" placeholder=\"\u0a07\u0a71\u0a25\u0a47 \u0a1f\u0a3e\u0a08\u0a2a \u0a15\u0a30\u0a4b...\"><\/textarea>\n<\/div>\n\n<script>\ndocument.addEventListener('DOMContentLoaded', function () {\n\n\/\/ Punjabi (Gurmukhi) Inscript Mapping\nconst imap = {\n    '1':['\u0a67','!'],'2':['\u0a68','@'],'3':['\u0a69','#'],'4':['\u0a6a','$'],\n    '5':['\u0a6b','%'],'6':['\u0a6c','^'],'7':['\u0a6d','&'],'8':['\u0a6e','*'],\n    '9':['\u0a6f','('],'0':['\u0a66',')'],'-':['-','_'],'=':['=','+'],\n\n    'q':['\u0a4c','\u0a14'],'w':['\u0a48','\u0a10'],'e':['\u0a3e','\u0a06'],'r':['\u0a40','\u0a08'],\n    't':['\u0a42','\u0a0a'],'y':['\u0a2c','\u0a2d'],'u':['\u0a39','\u0a19'],'i':['\u0a15','\u0a16'],\n    'o':['\u0a24','\u0a25'],'p':['\u0a1c','\u0a1d'],'[':['\u0a21','\u0a22'],']':['\u0a1e','\u0a1e'],'\\\\':['\\u0a4d',''],\n\n    'a':['\u0a4b','\u0a13'],'s':['\u0a47','\u0a0f'],'d':['\u0a4d','\u0a05'],'f':['\u0a3f','\u0a07'],\n    'g':['\u0a41','\u0a09'],'h':['\u0a2a','\u0a2b'],'j':['\u0a30','\u0a5c'],'k':['\u0a15','\u0a17'],\n    'l':['\u0a24','\u0a26'],';':['\u0a1a','\u0a1b'],\"'\":['\u0a1f','\u0a20'],\n\n    'z':['\u0a47','\u0a10'],'x':['\u0a70','\u0a03'],'c':['\u0a2e','\u0a23'],'v':['\u0a28','\u0a28'],\n    'b':['\u0a35','\u0a35'],'n':['\u0a32','\u0a32\u0a3c'],'m':['\u0a38','\u0a36'],\n\n    ',':['\u0a2f','\u0a75'],'.':['\u0964','\u0965'],'\/':['\u0a2f','?']\n};\n\nconst rows = [\n    ['1','2','3','4','5','6','7','8','9','0','-','=','backspace'],\n    ['tab','q','w','e','r','t','y','u','i','o','p','[',']'],\n    ['caps','a','s','d','f','g','h','j','k','l',';',\"'\",'enter'],\n    ['shift','z','x','c','v','b','n','m',',','.','\/','shift'],\n    ['space']\n];\n\nconst kb = document.getElementById('pkb');\nconst input = document.getElementById('punjabiInput');\n\nrows.forEach(row => {\n    const rowDiv = document.createElement('div');\n    rowDiv.className = 'row';\n\n    row.forEach(key => {\n        const keyDiv = document.createElement('div');\n        keyDiv.className = 'key';\n        keyDiv.dataset.key = key.toLowerCase();\n\n        if (['backspace','tab','caps','enter','shift'].includes(key))\n            keyDiv.classList.add('modifier');\n        if (key === 'space') keyDiv.classList.add('space');\n\n        if (imap[key]) {\n            keyDiv.innerHTML = `\n                <span class=\"eng\">${key.toUpperCase()}<\/span>\n                <span class=\"normal\">${imap[key][0]}<\/span>\n                <span class=\"shift-val\">${imap[key][1]}<\/span>\n            `;\n        } else {\n            keyDiv.innerHTML = `<span>${key.toUpperCase()}<\/span>`;\n        }\n\n        keyDiv.addEventListener('mousedown', (e) => {\n            e.preventDefault();\n            handleKey(key, e.shiftKey);\n        });\n\n        rowDiv.appendChild(keyDiv);\n    });\n    kb.appendChild(rowDiv);\n});\n\nfunction handleKey(key, shift) {\n    const start = input.selectionStart;\n    const end = input.selectionEnd;\n    let char = '';\n\n    if (imap[key]) {\n        char = shift ? imap[key][1] : imap[key][0];\n    } else if (key === 'space') char = ' ';\n    else if (key === 'enter') char = '\\n';\n    else if (key === 'backspace') {\n        if (start === end) {\n            input.setRangeText('', start - 1, end, 'end');\n        } else {\n            input.setRangeText('', start, end, 'end');\n        }\n        input.focus();\n        return;\n    }\n\n    if (char) {\n        input.setRangeText(char, start, end, 'end');\n    }\n\n    input.focus();\n    input.scrollTop = input.scrollHeight;\n}\n\nwindow.addEventListener('keydown', (e) => {\n    const key = e.key.toLowerCase();\n    \n    \/\/ Check if it's a typing key or control key we handle\n    if (imap[key] || key === ' ' || key === 'enter' || key === 'backspace') {\n        if (document.activeElement === input) {\n            e.preventDefault();\n            handleKey(key === ' ' ? 'space' : key, e.shiftKey);\n        }\n    }\n\n    const el = document.querySelector(`.key[data-key=\"${key}\"]`);\n    if (el) el.classList.add('active-press');\n});\n\nwindow.addEventListener('keyup', (e) => {\n    const key = e.key.toLowerCase();\n    const el = document.querySelector(`.key[data-key=\"${key}\"]`);\n    if (el) el.classList.remove('active-press');\n});\n\n});\n<\/script>\n\n\n\n\n\n<div class=\"guide-container\" style=\"margin-top: 50px; border-top: 2px solid #e2e8f0; padding-top: 30px; font-family: 'Segoe UI', sans-serif;\">\n    \n    <section style=\"text-align: center; margin-bottom: 40px;\">\n        <h2 style=\"color: #0f172a; font-size: 28px; margin-bottom: 10px;\">How to Use the Punjabi Virtual Keyboard<\/h2>\n        <p style=\"color: #64748b; max-width: 800px; margin: 0 auto;\">A professional-grade interface designed for seamless Punjabi (Gurmukhi) digital composition without the need for specialized hardware or complex language pack installations.<\/p>\n    <\/section>\n\n    <div style=\"display: grid; grid-template-columns: 1fr 1fr; gap: 40px; margin-bottom: 40px;\">\n        <div style=\"background: #ffffff; padding: 25px; border-radius: 12px; border: 1px solid #e2e8f0;\">\n            <h3 style=\"color: #3b82f6; display: flex; align-items: center; gap: 10px;\">\n                <span style=\"font-size: 24px;\">\u2328\ufe0f<\/span> How It Works\n            <\/h3>\n            <p style=\"color: #475569; line-height: 1.6;\">The interface maps the Gurmukhi script to your standard QWERTY layout for intuitive typing:<\/p>\n            <ul style=\"list-style: none; padding: 0; color: #475569;\">\n                <li style=\"margin-bottom: 12px; display: flex; align-items: start; gap: 10px;\">\n                    <strong style=\"min-width: 100px; color: #1e293b;\">Top-Right:<\/strong> <span>The English reference key on your physical keyboard.<\/span>\n                <\/li>\n                <li style=\"margin-bottom: 12px; display: flex; align-items: start; gap: 10px;\">\n                    <strong style=\"min-width: 100px; color: #1e293b;\">Center:<\/strong> <span>Primary Punjabi character (Consonants or vowels).<\/span>\n                <\/li>\n                <li style=\"margin-bottom: 12px; display: flex; align-items: start; gap: 10px;\">\n                    <strong style=\"min-width: 100px; color: #1e293b;\">Bottom-Left:<\/strong> <span>Shift-activated character (Aspirated letters or nasalization signs like Tippi).<\/span>\n                <\/li>\n            <\/ul>\n        <\/div>\n\n        <div style=\"background: #ffffff; padding: 25px; border-radius: 12px; border: 1px solid #e2e8f0;\">\n            <h3 style=\"color: #3b82f6; display: flex; align-items: center; gap: 10px;\">\n                <span style=\"font-size: 24px;\">\ud83d\udca1<\/span> Punjabi Typing Tips\n            <\/h3>\n            <div style=\"color: #475569; line-height: 1.6;\">\n                <p><strong>Laga Matra (Vowel Signs):<\/strong> Type the base consonant first, followed by the vowel sign (e.g., \u0a15 + \u0a3e = \u0a15\u0a3e).<\/p>\n                <p><strong>Nasalization &#038; Stress:<\/strong> Use the dedicated keys for <strong>Bindi<\/strong>, <strong>Tippi<\/strong>, or <strong>Adhak<\/strong> to modify consonant sounds as required by Punjabi grammar.<\/p>\n                <p><strong>Dual Mode:<\/strong> Switch effortlessly between manual clicking and physical keyboard input for a high-speed workflow.<\/p>\n            <\/div>\n        <\/div>\n    <\/div>\n\n    <section style=\"margin-bottom: 40px; background: #f8fafc; padding: 30px; border-radius: 12px;\">\n        <h3 style=\"text-align: center; color: #1e293b; margin-top: 0;\">Key Advantages<\/h3>\n        <div style=\"display: flex; justify-content: space-around; flex-wrap: wrap; gap: 20px; text-align: center;\">\n            <div style=\"flex: 1; min-width: 200px;\">\n                <div style=\"font-size: 30px; margin-bottom: 10px;\">\ud83c\udf93<\/div>\n                <h4 style=\"margin: 0; color: #0f172a;\">Gurmukhi Guide<\/h4>\n                <p style=\"font-size: 14px; color: #64748b;\">Visual map helps beginners master the layout of the Gurmukhi script.<\/p>\n            <\/div>\n            <div style=\"flex: 1; min-width: 200px;\">\n                <div style=\"font-size: 30px; margin-bottom: 10px;\">\ud83d\ude80<\/div>\n                <h4 style=\"margin: 0; color: #0f172a;\">Instant Setup<\/h4>\n                <p style=\"font-size: 14px; color: #64748b;\">No system configuration or language installation needed\u2014works in any browser.<\/p>\n            <\/div>\n            <div style=\"flex: 1; min-width: 200px;\">\n                <div style=\"font-size: 30px; margin-bottom: 10px;\">\ud83d\udd12<\/div>\n                <h4 style=\"margin: 0; color: #0f172a;\">Local &#038; Secure<\/h4>\n                <p style=\"font-size: 14px; color: #64748b;\">Keystrokes are processed only on your device; no data is sent to the cloud.<\/p>\n            <\/div>\n        <\/div>\n    <\/section>\n\n    <footer style=\"background: #1e293b; color: #94a3b8; padding: 25px; border-radius: 12px; font-size: 13px; line-height: 1.6;\">\n        <div style=\"display: flex; align-items: center; gap: 15px; margin-bottom: 10px;\">\n            <span style=\"background: #3b82f6; color: white; padding: 2px 8px; border-radius: 4px; font-weight: bold; font-size: 11px;\">DISCLAIMER<\/span>\n            <span style=\"color: #f8fafc; font-weight: 600;\">Privacy &#038; Terms<\/span>\n        <\/div>\n        <p style=\"margin: 0;\">\n            This tool is provided for <strong>educational and practice purposes only<\/strong>. While highly optimized, the layout may vary slightly from official InScript or Raavi font layouts. \n            <strong>Privacy Note:<\/strong> This is a &#8220;Client-Side&#8221; application. Your text remains in your browser session and is cleared upon refresh or closing the tab.\n        <\/p>\n    <\/footer>\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>How to Use the Punjabi Virtual Keyboard A professional-grade interface designed for seamless Punjabi (Gurmukhi) digital composition without the need for specialized hardware or complex language pack installations. \u2328\ufe0f How It Works The interface maps the Gurmukhi script to your standard QWERTY layout for intuitive typing: Top-Right: The English reference key on your physical keyboard&#8230;.<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_kad_post_transparent":"","_kad_post_title":"","_kad_post_layout":"","_kad_post_sidebar_id":"","_kad_post_content_style":"","_kad_post_vertical_padding":"","_kad_post_feature":"","_kad_post_feature_position":"","_kad_post_header":false,"_kad_post_footer":false,"_kad_post_classname":"","footnotes":""},"class_list":["post-182","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/keyboardflow.com\/index.php\/wp-json\/wp\/v2\/pages\/182","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/keyboardflow.com\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/keyboardflow.com\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/keyboardflow.com\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/keyboardflow.com\/index.php\/wp-json\/wp\/v2\/comments?post=182"}],"version-history":[{"count":1,"href":"https:\/\/keyboardflow.com\/index.php\/wp-json\/wp\/v2\/pages\/182\/revisions"}],"predecessor-version":[{"id":183,"href":"https:\/\/keyboardflow.com\/index.php\/wp-json\/wp\/v2\/pages\/182\/revisions\/183"}],"wp:attachment":[{"href":"https:\/\/keyboardflow.com\/index.php\/wp-json\/wp\/v2\/media?parent=182"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}