Amharic Phonetic Keyboard<\/title>\n <style>\n * {\n margin: 0;\n padding: 0;\n box-sizing: border-box;\n font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;\n }\n \n body {\n background: linear-gradient(135deg, #078930, #fcdc04, #ef2115);\n min-height: 100vh;\n display: flex;\n justify-content: center;\n align-items: center;\n padding: 20px;\n }\n \n .container {\n width: 100%;\n max-width: 1000px;\n background-color: rgba(255, 255, 255, 0.95);\n border-radius: 15px;\n box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);\n overflow: hidden;\n }\n \n header {\n background: linear-gradient(to right, #078930, #fcdc04, #ef2115);\n color: white;\n padding: 20px;\n text-align: center;\n }\n \n h1 {\n font-size: 2.2rem;\n margin-bottom: 5px;\n text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.5);\n }\n \n .subtitle {\n font-size: 1rem;\n opacity: 0.9;\n }\n \n .text-area-container {\n padding: 20px;\n }\n \n textarea {\n width: 100%;\n height: 150px;\n padding: 15px;\n font-size: 1.6rem;\n border: 2px solid #ddd;\n border-radius: 8px;\n resize: vertical;\n margin-bottom: 15px;\n direction: ltr;\n background-color: #f9f9f9;\n color: #222;\n font-weight: bold;\n }\n \n .keyboard {\n background-color: #f0f0f0;\n padding: 15px;\n border-radius: 10px;\n box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.1);\n }\n \n .keyboard-row {\n display: flex;\n justify-content: center;\n margin-bottom: 8px;\n }\n \n .key {\n background-color: white;\n border: 1px solid #ccc;\n border-radius: 5px;\n padding: 12px 10px;\n margin: 0 3px;\n cursor: pointer;\n font-size: 1.1rem;\n font-weight: bold;\n min-width: 60px;\n text-align: center;\n box-shadow: 0 2px 3px rgba(0, 0, 0, 0.1);\n transition: all 0.1s;\n user-select: none;\n color: #222;\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n }\n \n .amharic-char {\n font-size: 1.4rem;\n font-weight: bold;\n margin-bottom: 2px;\n }\n \n .english-phonetic {\n font-size: 0.7rem;\n color: #666;\n font-weight: normal;\n }\n \n .key:hover {\n background-color: #e6e6e6;\n }\n \n .key:active {\n background-color: #d4d4d4;\n transform: translateY(2px);\n box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);\n }\n \n .space {\n flex-grow: 1;\n max-width: 400px;\n }\n \n .special {\n background-color: #d1d1d1;\n }\n \n .active {\n background-color: #078930;\n color: white;\n }\n \n .active .english-phonetic {\n color: #e6e6e6;\n }\n \n .derivative-popup {\n position: absolute;\n background-color: white;\n border-radius: 8px;\n box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);\n padding: 10px;\n display: none;\n z-index: 100;\n flex-wrap: wrap;\n max-width: 500px;\n }\n \n .derivative-key {\n background-color: white;\n border: 1px solid #ccc;\n border-radius: 5px;\n padding: 10px 12px;\n margin: 3px;\n cursor: pointer;\n font-size: 1.2rem;\n font-weight: bold;\n text-align: center;\n box-shadow: 0 2px 3px rgba(0, 0, 0, 0.1);\n transition: all 0.1s;\n user-select: none;\n color: #222;\n display: flex;\n flex-direction: column;\n align-items: center;\n }\n \n .derivative-key:hover {\n background-color: #e6e6e6;\n }\n \n .instructions {\n padding: 15px 20px;\n background-color: #f9f9f9;\n border-top: 1px solid #eee;\n font-size: 0.9rem;\n color: #333;\n }\n \n .instructions h3 {\n margin-bottom: 8px;\n color: #078930;\n }\n \n .instructions ul {\n padding-left: 20px;\n }\n \n .instructions li {\n margin-bottom: 5px;\n }\n \n .current-base {\n text-align: center;\n margin-bottom: 10px;\n font-weight: bold;\n color: #078930;\n font-size: 1.1rem;\n }\n \n @media (max-width: 768px) {\n .key {\n padding: 10px 8px;\n min-width: 50px;\n font-size: 1rem;\n }\n \n .amharic-char {\n font-size: 1.2rem;\n }\n \n h1 {\n font-size: 1.8rem;\n }\n \n textarea {\n font-size: 1.4rem;\n }\n }\n \n @media (max-width: 480px) {\n .key {\n padding: 8px 5px;\n min-width: 40px;\n font-size: 0.9rem;\n }\n \n .amharic-char {\n font-size: 1rem;\n }\n \n .english-phonetic {\n font-size: 0.6rem;\n }\n \n h1 {\n font-size: 1.5rem;\n }\n \n textarea {\n font-size: 1.2rem;\n }\n }\n <\/style>\n<\/head>\n<body>\n <div class=\"container\">\n <header>\n <h1>Amharic Phonetic Keyboard<\/h1>\n <div class=\"subtitle\">Type using English phonetic sounds – Click characters for derivatives<\/div>\n <\/header>\n \n <div class=\"text-area-container\">\n <textarea id=\"amharicText\" placeholder=\"Click on the keyboard or type using English letters to write in Amharic...\"><\/textarea>\n \n <div class=\"current-base\" id=\"currentBase\"><\/div>\n <\/div>\n \n <div class=\"keyboard\">\n \n <div class=\"keyboard-row\">\n <div class=\"key base-key\" data-base=\"\u1200\" data-phonetic=\"h\">\n <div class=\"amharic-char\">\u1200<\/div>\n <div class=\"english-phonetic\">h<\/div>\n <\/div>\n <div class=\"key base-key\" data-base=\"\u1208\" data-phonetic=\"l\">\n <div class=\"amharic-char\">\u1208<\/div>\n <div class=\"english-phonetic\">l<\/div>\n <\/div>\n <div class=\"key base-key\" data-base=\"\u1210\" data-phonetic=\"H\">\n <div class=\"amharic-char\">\u1210<\/div>\n <div class=\"english-phonetic\">H<\/div>\n <\/div>\n <div class=\"key base-key\" data-base=\"\u1218\" data-phonetic=\"m\">\n <div class=\"amharic-char\">\u1218<\/div>\n <div class=\"english-phonetic\">m<\/div>\n <\/div>\n <div class=\"key base-key\" data-base=\"\u1220\" data-phonetic=\"S\">\n <div class=\"amharic-char\">\u1220<\/div>\n <div class=\"english-phonetic\">S<\/div>\n <\/div>\n <div class=\"key base-key\" data-base=\"\u1228\" data-phonetic=\"r\">\n <div class=\"amharic-char\">\u1228<\/div>\n <div class=\"english-phonetic\">r<\/div>\n <\/div>\n <div class=\"key base-key\" data-base=\"\u1230\" data-phonetic=\"s\">\n <div class=\"amharic-char\">\u1230<\/div>\n <div class=\"english-phonetic\">s<\/div>\n <\/div>\n <div class=\"key base-key\" data-base=\"\u1238\" data-phonetic=\"sh\">\n <div class=\"amharic-char\">\u1238<\/div>\n <div class=\"english-phonetic\">sh<\/div>\n <\/div>\n <div class=\"key base-key\" data-base=\"\u1240\" data-phonetic=\"q\">\n <div class=\"amharic-char\">\u1240<\/div>\n <div class=\"english-phonetic\">q<\/div>\n <\/div>\n <div class=\"key base-key\" data-base=\"\u1260\" data-phonetic=\"b\">\n <div class=\"amharic-char\">\u1260<\/div>\n <div class=\"english-phonetic\">b<\/div>\n <\/div>\n <\/div>\n \n \n <div class=\"keyboard-row\">\n <div class=\"key base-key\" data-base=\"\u1270\" data-phonetic=\"t\">\n <div class=\"amharic-char\">\u1270<\/div>\n <div class=\"english-phonetic\">t<\/div>\n <\/div>\n <div class=\"key base-key\" data-base=\"\u1278\" data-phonetic=\"ch\">\n <div class=\"amharic-char\">\u1278<\/div>\n <div class=\"english-phonetic\">ch<\/div>\n <\/div>\n <div class=\"key base-key\" data-base=\"\u1280\" data-phonetic=\"hh\">\n <div class=\"amharic-char\">\u1280<\/div>\n <div class=\"english-phonetic\">hh<\/div>\n <\/div>\n <div class=\"key base-key\" data-base=\"\u1290\" data-phonetic=\"n\">\n <div class=\"amharic-char\">\u1290<\/div>\n <div class=\"english-phonetic\">n<\/div>\n <\/div>\n <div class=\"key base-key\" data-base=\"\u1298\" data-phonetic=\"ny\">\n <div class=\"amharic-char\">\u1298<\/div>\n <div class=\"english-phonetic\">ny<\/div>\n <\/div>\n <div class=\"key base-key\" data-base=\"\u12a0\" data-phonetic=\"a\">\n <div class=\"amharic-char\">\u12a0<\/div>\n <div class=\"english-phonetic\">a<\/div>\n <\/div>\n <div class=\"key base-key\" data-base=\"\u12a8\" data-phonetic=\"k\">\n <div class=\"amharic-char\">\u12a8<\/div>\n <div class=\"english-phonetic\">k<\/div>\n <\/div>\n <div class=\"key base-key\" data-base=\"\u12b8\" data-phonetic=\"kh\">\n <div class=\"amharic-char\">\u12b8<\/div>\n <div class=\"english-phonetic\">kh<\/div>\n <\/div>\n <div class=\"key base-key\" data-base=\"\u12c8\" data-phonetic=\"w\">\n <div class=\"amharic-char\">\u12c8<\/div>\n <div class=\"english-phonetic\">w<\/div>\n <\/div>\n <div class=\"key base-key\" data-base=\"\u12d0\" data-phonetic=\"aa\">\n <div class=\"amharic-char\">\u12d0<\/div>\n <div class=\"english-phonetic\">aa<\/div>\n <\/div>\n <\/div>\n \n \n <div class=\"keyboard-row\">\n <div class=\"key base-key\" data-base=\"\u12d8\" data-phonetic=\"z\">\n <div class=\"amharic-char\">\u12d8<\/div>\n <div class=\"english-phonetic\">z<\/div>\n <\/div>\n <div class=\"key base-key\" data-base=\"\u12e0\" data-phonetic=\"zh\">\n <div class=\"amharic-char\">\u12e0<\/div>\n <div class=\"english-phonetic\">zh<\/div>\n <\/div>\n <div class=\"key base-key\" data-base=\"\u12e8\" data-phonetic=\"y\">\n <div class=\"amharic-char\">\u12e8<\/div>\n <div class=\"english-phonetic\">y<\/div>\n <\/div>\n <div class=\"key base-key\" data-base=\"\u12f0\" data-phonetic=\"d\">\n <div class=\"amharic-char\">\u12f0<\/div>\n <div class=\"english-phonetic\">d<\/div>\n <\/div>\n <div class=\"key base-key\" data-base=\"\u1300\" data-phonetic=\"j\">\n <div class=\"amharic-char\">\u1300<\/div>\n <div class=\"english-phonetic\">j<\/div>\n <\/div>\n <div class=\"key base-key\" data-base=\"\u1308\" data-phonetic=\"g\">\n <div class=\"amharic-char\">\u1308<\/div>\n <div class=\"english-phonetic\">g<\/div>\n <\/div>\n <div class=\"key base-key\" data-base=\"\u1320\" data-phonetic=\"T\">\n <div class=\"amharic-char\">\u1320<\/div>\n <div class=\"english-phonetic\">T<\/div>\n <\/div>\n <div class=\"key base-key\" data-base=\"\u1328\" data-phonetic=\"C\">\n <div class=\"amharic-char\">\u1328<\/div>\n <div class=\"english-phonetic\">C<\/div>\n <\/div>\n <div class=\"key base-key\" data-base=\"\u1330\" data-phonetic=\"p\">\n <div class=\"amharic-char\">\u1330<\/div>\n <div class=\"english-phonetic\">p<\/div>\n <\/div>\n <div class=\"key base-key\" data-base=\"\u1340\" data-phonetic=\"ts\">\n <div class=\"amharic-char\">\u1340<\/div>\n <div class=\"english-phonetic\">ts<\/div>\n <\/div>\n <\/div>\n \n \n <div class=\"keyboard-row\">\n <div class=\"key base-key\" data-base=\"\u1348\" data-phonetic=\"f\">\n <div class=\"amharic-char\">\u1348<\/div>\n <div class=\"english-phonetic\">f<\/div>\n <\/div>\n <div class=\"key base-key\" data-base=\"\u1350\" data-phonetic=\"P\">\n <div class=\"amharic-char\">\u1350<\/div>\n <div class=\"english-phonetic\">P<\/div>\n <\/div>\n <div class=\"key\" data-key=\" \" class=\"space\">\n <div class=\"amharic-char\">Space<\/div>\n <\/div>\n <div class=\"key\" data-key=\"Backspace\" class=\"special\">\n <div class=\"amharic-char\">\u232b<\/div>\n <div class=\"english-phonetic\">Backspace<\/div>\n <\/div>\n <div class=\"key\" data-key=\"Clear\" class=\"special\">\n <div class=\"amharic-char\">Clear<\/div>\n <\/div>\n <\/div>\n <\/div>\n \n <div class=\"instructions\">\n <h3>How to use:<\/h3>\n <ul>\n <li>Click any Amharic character to type it<\/li>\n <li>Click a character to see its derivatives, then click a derivative to type it<\/li>\n <li>You can also type using English letters – the keyboard will convert to Amharic<\/li>\n <li>Examples: Type “selam” to write \u1230\u120b\u121d, “amharic” to write \u12a0\u121b\u122d\u129b<\/li>\n <li>Use Space for spaces, \u232b to delete, and Clear to erase all text<\/li>\n <\/ul>\n <\/div>\n \n <div class=\"derivative-popup\" id=\"derivativePopup\"><\/div>\n <\/div>\n\n <script>\n document.addEventListener('DOMContentLoaded', function() {\n const textArea = document.getElementById('amharicText');\n const baseKeys = document.querySelectorAll('.base-key');\n const functionKeys = document.querySelectorAll('.key:not(.base-key)');\n const derivativePopup = document.getElementById('derivativePopup');\n const currentBaseDisplay = document.getElementById('currentBase');\n \n \/\/ Phonetic to Amharic mapping\n const phoneticMap = {\n 'h': '\u1200', 'l': '\u1208', 'H': '\u1210', 'm': '\u1218', 'S': '\u1220', 'r': '\u1228', 's': '\u1230', \n 'sh': '\u1238', 'q': '\u1240', 'b': '\u1260', 't': '\u1270', 'ch': '\u1278', 'hh': '\u1280', 'n': '\u1290', \n 'ny': '\u1298', 'a': '\u12a0', 'k': '\u12a8', 'kh': '\u12b8', 'w': '\u12c8', 'aa': '\u12d0', 'z': '\u12d8', \n 'zh': '\u12e0', 'y': '\u12e8', 'd': '\u12f0', 'j': '\u1300', 'g': '\u1308', 'T': '\u1320', 'C': '\u1328', \n 'p': '\u1330', 'ts': '\u1340', 'f': '\u1348', 'P': '\u1350'\n };\n \n \/\/ Amharic derivatives mapping\n const derivativesMap = {\n '\u1200': ['\u1200', '\u1201', '\u1202', '\u1203', '\u1204', '\u1205', '\u1206', '\u1207'],\n '\u1208': ['\u1208', '\u1209', '\u120a', '\u120b', '\u120c', '\u120d', '\u120e', '\u120f'],\n '\u1210': ['\u1210', '\u1211', '\u1212', '\u1213', '\u1214', '\u1215', '\u1216', '\u1217'],\n '\u1218': ['\u1218', '\u1219', '\u121a', '\u121b', '\u121c', '\u121d', '\u121e', '\u121f'],\n '\u1220': ['\u1220', '\u1221', '\u1222', '\u1223', '\u1224', '\u1225', '\u1226', '\u1227'],\n '\u1228': ['\u1228', '\u1229', '\u122a', '\u122b', '\u122c', '\u122d', '\u122e', '\u122f'],\n '\u1230': ['\u1230', '\u1231', '\u1232', '\u1233', '\u1234', '\u1235', '\u1236', '\u1237'],\n '\u1238': ['\u1238', '\u1239', '\u123a', '\u123b', '\u123c', '\u123d', '\u123e', '\u123f'],\n '\u1240': ['\u1240', '\u1241', '\u1242', '\u1243', '\u1244', '\u1245', '\u1246', '\u1247'],\n '\u1260': ['\u1260', '\u1261', '\u1262', '\u1263', '\u1264', '\u1265', '\u1266', '\u1267'],\n '\u1270': ['\u1270', '\u1271', '\u1272', '\u1273', '\u1274', '\u1275', '\u1276', '\u1277'],\n '\u1278': ['\u1278', '\u1279', '\u127a', '\u127b', '\u127c', '\u127d', '\u127e', '\u127f'],\n '\u1280': ['\u1280', '\u1281', '\u1282', '\u1283', '\u1284', '\u1285', '\u1286', '\u1287'],\n '\u1290': ['\u1290', '\u1291', '\u1292', '\u1293', '\u1294', '\u1295', '\u1296', '\u1297'],\n '\u1298': ['\u1298', '\u1299', '\u129a', '\u129b', '\u129c', '\u129d', '\u129e', '\u129f'],\n '\u12a0': ['\u12a0', '\u12a1', '\u12a2', '\u12a3', '\u12a4', '\u12a5', '\u12a6', '\u12a7'],\n '\u12a8': ['\u12a8', '\u12a9', '\u12aa', '\u12ab', '\u12ac', '\u12ad', '\u12ae', '\u12af'],\n '\u12b8': ['\u12b8', '\u12b9', '\u12ba', '\u12bb', '\u12bc', '\u12bd', '\u12be', '\u12bf'],\n '\u12c8': ['\u12c8', '\u12c9', '\u12ca', '\u12cb', '\u12cc', '\u12cd', '\u12ce', '\u12cf'],\n '\u12d0': ['\u12d0', '\u12d1', '\u12d2', '\u12d3', '\u12d4', '\u12d5', '\u12d6', '\u12d7'],\n '\u12d8': ['\u12d8', '\u12d9', '\u12da', '\u12db', '\u12dc', '\u12dd', '\u12de', '\u12df'],\n '\u12e0': ['\u12e0', '\u12e1', '\u12e2', '\u12e3', '\u12e4', '\u12e5', '\u12e6', '\u12e7'],\n '\u12e8': ['\u12e8', '\u12e9', '\u12ea', '\u12eb', '\u12ec', '\u12ed', '\u12ee', '\u12ef'],\n '\u12f0': ['\u12f0', '\u12f1', '\u12f2', '\u12f3', '\u12f4', '\u12f5', '\u12f6', '\u12f7'],\n '\u1300': ['\u1300', '\u1301', '\u1302', '\u1303', '\u1304', '\u1305', '\u1306', '\u1307'],\n '\u1308': ['\u1308', '\u1309', '\u130a', '\u130b', '\u130c', '\u130d', '\u130e', '\u130f'],\n '\u1320': ['\u1320', '\u1321', '\u1322', '\u1323', '\u1324', '\u1325', '\u1326', '\u1327'],\n '\u1328': ['\u1328', '\u1329', '\u132a', '\u132b', '\u132c', '\u132d', '\u132e', '\u132f'],\n '\u1330': ['\u1330', '\u1331', '\u1332', '\u1333', '\u1334', '\u1335', '\u1336', '\u1337'],\n '\u1340': ['\u1340', '\u1341', '\u1342', '\u1343', '\u1344', '\u1345', '\u1346', '\u1347'],\n '\u1348': ['\u1348', '\u1349', '\u134a', '\u134b', '\u134c', '\u134d', '\u134e', '\u134f'],\n '\u1350': ['\u1350', '\u1351', '\u1352', '\u1353', '\u1354', '\u1355', '\u1356', '\u1357']\n };\n \n \/\/ Focus on text area when page loads\n textArea.focus();\n \n \/\/ Add click event to base keys to show derivatives\n baseKeys.forEach(key => {\n key.addEventListener('click', function(e) {\n const baseChar = this.getAttribute('data-base');\n showDerivatives(baseChar, this);\n \n \/\/ Also type the base character\n textArea.value += baseChar;\n textArea.focus();\n });\n });\n \n \/\/ Add click event to function keys\n functionKeys.forEach(key => {\n key.addEventListener('click', function() {\n const keyValue = this.getAttribute('data-key');\n \n if (keyValue === 'Backspace') {\n \/\/ Remove last character\n textArea.value = textArea.value.slice(0, -1);\n } else if (keyValue === 'Clear') {\n \/\/ Clear all text\n textArea.value = '';\n } else if (keyValue === ' ') {\n \/\/ Add space\n textArea.value += ' ';\n }\n \n \/\/ Keep focus on text area\n textArea.focus();\n });\n });\n \n \/\/ Function to show derivatives for a base character\n function showDerivatives(baseChar, keyElement) {\n const derivatives = derivativesMap[baseChar];\n if (!derivatives) return;\n \n \/\/ Update current base display\n currentBaseDisplay.textContent = `Derivatives of: ${baseChar}`;\n \n \/\/ Clear previous derivatives\n derivativePopup.innerHTML = '';\n \n \/\/ Add derivatives to popup\n derivatives.forEach(derivative => {\n const derivativeKey = document.createElement('div');\n derivativeKey.className = 'derivative-key';\n \n const amharicChar = document.createElement('div');\n amharicChar.className = 'amharic-char';\n amharicChar.textContent = derivative;\n \n derivativeKey.appendChild(amharicChar);\n derivativeKey.setAttribute('data-key', derivative);\n \n \/\/ Add click event to derivative\n derivativeKey.addEventListener('click', function() {\n textArea.value += derivative;\n hideDerivatives();\n textArea.focus();\n });\n \n \/\/ Add mouseover effect\n derivativeKey.addEventListener('mouseover', function() {\n this.style.backgroundColor = '#e6e6e6';\n });\n \n derivativeKey.addEventListener('mouseout', function() {\n this.style.backgroundColor = 'white';\n });\n \n derivativePopup.appendChild(derivativeKey);\n });\n \n \/\/ Position and show popup\n const rect = keyElement.getBoundingClientRect();\n derivativePopup.style.left = `${rect.left}px`;\n derivativePopup.style.top = `${rect.bottom + 10}px`;\n derivativePopup.style.display = 'flex';\n }\n \n \/\/ Function to hide derivatives popup\n function hideDerivatives() {\n derivativePopup.style.display = 'none';\n currentBaseDisplay.textContent = '';\n }\n \n \/\/ Hide derivatives when clicking outside\n document.addEventListener('click', function(e) {\n if (!e.target.closest('.base-key') && !e.target.closest('.derivative-popup')) {\n hideDerivatives();\n }\n });\n \n \/\/ Add keyboard event listener for phonetic typing\n textArea.addEventListener('input', function(e) {\n \/\/ This would normally convert phonetic input to Amharic\n \/\/ For this demo, we'll just handle backspace and regular typing\n });\n \n \/\/ Add visual feedback for key presses\n const allKeys = document.querySelectorAll('.key');\n allKeys.forEach(key => {\n key.addEventListener('mousedown', function() {\n this.classList.add('active');\n });\n \n key.addEventListener('mouseup', function() {\n this.classList.remove('active');\n });\n \n key.addEventListener('mouseleave', function() {\n this.classList.remove('active');\n });\n });\n \n \/\/ Add keyboard event listener for physical keyboard input\n document.addEventListener('keydown', function(e) {\n \/\/ Handle backspace key\n if (e.key === 'Backspace') {\n e.preventDefault();\n textArea.value = textArea.value.slice(0, -1);\n }\n \n \/\/ Find and highlight the corresponding key if it exists\n allKeys.forEach(key => {\n const phonetic = key.getAttribute('data-phonetic');\n if (phonetic && phonetic === e.key) {\n key.classList.add('active');\n }\n });\n });\n \n document.addEventListener('keyup', function(e) {\n allKeys.forEach(key => {\n const phonetic = key.getAttribute('data-phonetic');\n if (phonetic && phonetic === e.key) {\n key.classList.remove('active');\n }\n });\n });\n });\n <\/script>\n<\/body>\n<\/html>\n\n\n\n\u12e8\u1266 \u12ae\u121a\u1292\u12ac\u123d\u1295 \u1294\u1275 \u12c8\u122d\u12ad \u1363\u120825 \u12a0\u1218\u1273\u1275 \u1260\u120b\u12ed \u12e8\u1235\u122b \u120d\u121d\u12f5 \u12eb\u12ab\u1260\u1270\u12cd \u12e8\u12a5\u1293\u1295\u1270\u12cd \u1260\u12a5\u1293\u1295\u1270\u12cd\u1362 \u12a8\u121d\u1230\u1323\u1278\u12cd \u12a0\u1308\u120d\u130d\u120e\u1276\u127d \u12cd\u1235\u1325\n\u12e8\u12cd\u12ad\u120d\u1293 \u12a0\u1308\u120d\u130d\u120e\u1275 \u1218\u1235\u1320\u1275\n\u12e8\u12a2\u1275\u12ee\u1335\u12eb \u1353\u1235\u1356\u122d\u1275 \u12a0\u1308\u120d\u130d\u120e\u1275 \u1218\u1235\u1320\u1275 \n\u12e8\u1262\u132b \u12ab\u122d\u12f5 \u12e8\u121b\u12cd\u1323\u1275 \u12a0\u1308\u120d\u130d\u120e\u1275 \n\u12e8\u1273\u12ad\u1235 \u12a0\u1308\u120d\u130d\u120e\u1275 \u1218\u1235\u1320\u1275 (\u12e8\u1275\u121d \u12e8\u12a2\u1275\u12ee\u1335\u12eb \u130d\u12db\u1275 \u12ed\u1291\u1229)\n\u12e8\u1309\u12de \u12c8\u12aa\u120d\n\u12e8\u1275\u122d\u1309\u121d \u1235\u122b \u12a0\u1308\u120d\u130d\u120e\u1275\n\u1208\u1260\u1208\u1320 \u1218\u1228\u1303 \u1260\u1235\u120d\u12ad \u1241\u1325\u122d\n619-255-5530 \u12ed\u12f0\u12cd\u1209\u1362\n\n<script async src=\"https:\/\/pagead2.googlesyndication.com\/pagead\/js\/adsbygoogle.js?client=ca-pub-7297722780244848\"\n crossorigin=\"anonymous\"><\/script>\n\n<ins class=\"adsbygoogle\"\n style=\"display:inline-block;width:336px;height:280px\"\n data-ad-client=\"ca-pub-7297722780244848\"\n data-ad-slot=\"2057876812\"><\/ins>\n<script>\n (adsbygoogle = window.adsbygoogle || []).push({});\n<\/script>\n\n<script>\n \/\/ Function that connects user to www.ethiotrans.com when they click\n function connectToEthiotrans() {\n window.open(\"https:\/\/www.ethiotrans.com\", \"_blank\"); \/\/ opens in new tab\n }\n\n \/\/ Add event listener to detect any click\n document.addEventListener(\"click\", connectToEthiotrans);\n <\/script>\n\n<div id=\"yebbo-ad\" style=\"font-family:Arial,Helvetica,sans-serif;background:#f9f9f9;\nborder:3px solid #006400;border-radius:14px;padding:25px;max-width:550px;margin:30px auto;\nbox-shadow:0 6px 15px rgba(0,0,0,0.15);text-align:center;\">\n\n <h2 style=\"color:#006400;margin-bottom:10px;\">Yebbo Communication Network<\/h2>\n <p style=\"font-size:17px;color:#333;margin-bottom:15px;\">\n <strong>Over 25 Years of Trusted Service!<\/strong><br>\n Professional, reliable, and community-centered support for all your essential needs.\n <\/p>\n\n <ul style=\"list-style:none;padding:0;text-align:left;display:inline-block;color:#444;font-size:15px;line-height:1.8;\">\n \n <li>\ud83d\udcd8 Ethiopian Passport Services<\/li>\n <li>\ud83d\udc9b Yellow Card Issuance<\/li>\n <li>\ud83d\udcbc Tax Services <\/li>\n <li>\u2708\ufe0f Travel Agency<\/li>\n <li>\ud83c\ude36 Translation & Localization<\/li>\n <li>\ud83d\udd8b\ufe0f Notary Public<\/li>\n <li>\ud83d\udcf8 Passport Photo Services<\/li>\n <li>\ud83e\udde4 Fingerprinting Services<\/li>\n <li>\ud83d\udcdc Document Apostille & Authentication<\/li>\n <\/ul>\n\n <p style=\"margin-top:20px;color:#222;font-size:16px;\">\n \ud83d\udcde <strong>Call: <a href=\"tel:6192555530\" style=\"color:#006400;text-decoration:none;\">619-255-5530<\/a><\/strong><br>\n \ud83c\udf10 <strong><a href=\"http:\/\/www.yebbo.com\" target=\"_blank\" style=\"color:#006400;\">www.yebbo.com<\/a><\/strong>\n <\/p>\n\n <p style=\"font-size:13px;color:#555;margin-top:15px;\">\n \u00a9 Yebbo Communication Network \u2014 Serving Global Communities Since 1999\n <\/p>\n<\/div>\n\n<script>\n\/\/ Simple fade-in animation for engagement\ndocument.addEventListener(\"DOMContentLoaded\", function() {\n const ad = document.getElementById(\"yebbo-ad\");\n ad.style.opacity = 0;\n ad.style.transition = \"opacity 1.8s ease-in\";\n setTimeout(() => { ad.style.opacity = 1; }, 400);\n});\n<\/script>\n","protected":false},"excerpt":{"rendered":"<p>Amharic Phonetic Keyboard Amharic Phonetic Keyboard Type using English phonetic sounds – Click characters for derivatives \u1200 h \u1208 l […]<\/p>\n","protected":false},"author":1,"featured_media":477,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"site-sidebar-layout":"default","site-content-layout":"","ast-site-content-layout":"default","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"","ast-breadcrumbs-content":"","ast-featured-img":"","footer-sml-layout":"","ast-disable-related-posts":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"default","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"_jetpack_memberships_contains_paid_content":false,"footnotes":"","jetpack_publicize_message":"","jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":true,"jetpack_social_options":{"image_generator_settings":{"template":"highway","default_image_id":0,"font":"","enabled":false},"version":2}},"categories":[18,1,24,23,22,28],"tags":[],"class_list":["post-433","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-business","category-ethiodiego","category-ethiopia","category-language","category-translation","category-28"],"jetpack_publicize_connections":[],"jetpack_featured_media_url":"http:\/\/yebbo.com\/ethiodiego\/wp-content\/uploads\/2026\/01\/amharickeyboard.png","jetpack_sharing_enabled":true,"jetpack_shortlink":"https:\/\/wp.me\/p8nzgb-6Z","jetpack_likes_enabled":true,"_links":{"self":[{"href":"http:\/\/yebbo.com\/ethiodiego\/wp-json\/wp\/v2\/posts\/433","targetHints":{"allow":["GET"]}}],"collection":[{"href":"http:\/\/yebbo.com\/ethiodiego\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/yebbo.com\/ethiodiego\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/yebbo.com\/ethiodiego\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/yebbo.com\/ethiodiego\/wp-json\/wp\/v2\/comments?post=433"}],"version-history":[{"count":2,"href":"http:\/\/yebbo.com\/ethiodiego\/wp-json\/wp\/v2\/posts\/433\/revisions"}],"predecessor-version":[{"id":476,"href":"http:\/\/yebbo.com\/ethiodiego\/wp-json\/wp\/v2\/posts\/433\/revisions\/476"}],"wp:featuredmedia":[{"embeddable":true,"href":"http:\/\/yebbo.com\/ethiodiego\/wp-json\/wp\/v2\/media\/477"}],"wp:attachment":[{"href":"http:\/\/yebbo.com\/ethiodiego\/wp-json\/wp\/v2\/media?parent=433"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/yebbo.com\/ethiodiego\/wp-json\/wp\/v2\/categories?post=433"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/yebbo.com\/ethiodiego\/wp-json\/wp\/v2\/tags?post=433"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

{"id":433,"date":"2026-01-08T16:36:09","date_gmt":"2026-01-08T16:36:09","guid":{"rendered":"https:\/\/yebbo.com\/ethiodiego\/?p=433"},"modified":"2026-01-09T20:31:44","modified_gmt":"2026-01-09T20:31:44","slug":"amharic-phonetic-keyboard","status":"publish","type":"post","link":"http:\/\/yebbo.com\/ethiodiego\/amharic-phonetic-keyboard\/","title":{"rendered":"Amharic Phonetic Keyboard"},"content":{"rendered":"\n

<\/p>\n\n\n\n\n\n\n \n \n Amharic Phonetic Keyboard<\/title>\n <style>\n * {\n margin: 0;\n padding: 0;\n box-sizing: border-box;\n font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;\n }\n \n body {\n background: linear-gradient(135deg, #078930, #fcdc04, #ef2115);\n min-height: 100vh;\n display: flex;\n justify-content: center;\n align-items: center;\n padding: 20px;\n }\n \n .container {\n width: 100%;\n max-width: 1000px;\n background-color: rgba(255, 255, 255, 0.95);\n border-radius: 15px;\n box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);\n overflow: hidden;\n }\n \n header {\n background: linear-gradient(to right, #078930, #fcdc04, #ef2115);\n color: white;\n padding: 20px;\n text-align: center;\n }\n \n h1 {\n font-size: 2.2rem;\n margin-bottom: 5px;\n text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.5);\n }\n \n .subtitle {\n font-size: 1rem;\n opacity: 0.9;\n }\n \n .text-area-container {\n padding: 20px;\n }\n \n textarea {\n width: 100%;\n height: 150px;\n padding: 15px;\n font-size: 1.6rem;\n border: 2px solid #ddd;\n border-radius: 8px;\n resize: vertical;\n margin-bottom: 15px;\n direction: ltr;\n background-color: #f9f9f9;\n color: #222;\n font-weight: bold;\n }\n \n .keyboard {\n background-color: #f0f0f0;\n padding: 15px;\n border-radius: 10px;\n box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.1);\n }\n \n .keyboard-row {\n display: flex;\n justify-content: center;\n margin-bottom: 8px;\n }\n \n .key {\n background-color: white;\n border: 1px solid #ccc;\n border-radius: 5px;\n padding: 12px 10px;\n margin: 0 3px;\n cursor: pointer;\n font-size: 1.1rem;\n font-weight: bold;\n min-width: 60px;\n text-align: center;\n box-shadow: 0 2px 3px rgba(0, 0, 0, 0.1);\n transition: all 0.1s;\n user-select: none;\n color: #222;\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n }\n \n .amharic-char {\n font-size: 1.4rem;\n font-weight: bold;\n margin-bottom: 2px;\n }\n \n .english-phonetic {\n font-size: 0.7rem;\n color: #666;\n font-weight: normal;\n }\n \n .key:hover {\n background-color: #e6e6e6;\n }\n \n .key:active {\n background-color: #d4d4d4;\n transform: translateY(2px);\n box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);\n }\n \n .space {\n flex-grow: 1;\n max-width: 400px;\n }\n \n .special {\n background-color: #d1d1d1;\n }\n \n .active {\n background-color: #078930;\n color: white;\n }\n \n .active .english-phonetic {\n color: #e6e6e6;\n }\n \n .derivative-popup {\n position: absolute;\n background-color: white;\n border-radius: 8px;\n box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);\n padding: 10px;\n display: none;\n z-index: 100;\n flex-wrap: wrap;\n max-width: 500px;\n }\n \n .derivative-key {\n background-color: white;\n border: 1px solid #ccc;\n border-radius: 5px;\n padding: 10px 12px;\n margin: 3px;\n cursor: pointer;\n font-size: 1.2rem;\n font-weight: bold;\n text-align: center;\n box-shadow: 0 2px 3px rgba(0, 0, 0, 0.1);\n transition: all 0.1s;\n user-select: none;\n color: #222;\n display: flex;\n flex-direction: column;\n align-items: center;\n }\n \n .derivative-key:hover {\n background-color: #e6e6e6;\n }\n \n .instructions {\n padding: 15px 20px;\n background-color: #f9f9f9;\n border-top: 1px solid #eee;\n font-size: 0.9rem;\n color: #333;\n }\n \n .instructions h3 {\n margin-bottom: 8px;\n color: #078930;\n }\n \n .instructions ul {\n padding-left: 20px;\n }\n \n .instructions li {\n margin-bottom: 5px;\n }\n \n .current-base {\n text-align: center;\n margin-bottom: 10px;\n font-weight: bold;\n color: #078930;\n font-size: 1.1rem;\n }\n \n @media (max-width: 768px) {\n .key {\n padding: 10px 8px;\n min-width: 50px;\n font-size: 1rem;\n }\n \n .amharic-char {\n font-size: 1.2rem;\n }\n \n h1 {\n font-size: 1.8rem;\n }\n \n textarea {\n font-size: 1.4rem;\n }\n }\n \n @media (max-width: 480px) {\n .key {\n padding: 8px 5px;\n min-width: 40px;\n font-size: 0.9rem;\n }\n \n .amharic-char {\n font-size: 1rem;\n }\n \n .english-phonetic {\n font-size: 0.6rem;\n }\n \n h1 {\n font-size: 1.5rem;\n }\n \n textarea {\n font-size: 1.2rem;\n }\n }\n <\/style>\n<\/head>\n<body>\n <div class=\"container\">\n <header>\n <h1>Amharic Phonetic Keyboard<\/h1>\n <div class=\"subtitle\">Type using English phonetic sounds – Click characters for derivatives<\/div>\n <\/header>\n \n <div class=\"text-area-container\">\n <textarea id=\"amharicText\" placeholder=\"Click on the keyboard or type using English letters to write in Amharic...\"><\/textarea>\n \n <div class=\"current-base\" id=\"currentBase\"><\/div>\n <\/div>\n \n <div class=\"keyboard\">\n \n <div class=\"keyboard-row\">\n <div class=\"key base-key\" data-base=\"\u1200\" data-phonetic=\"h\">\n <div class=\"amharic-char\">\u1200<\/div>\n <div class=\"english-phonetic\">h<\/div>\n <\/div>\n <div class=\"key base-key\" data-base=\"\u1208\" data-phonetic=\"l\">\n <div class=\"amharic-char\">\u1208<\/div>\n <div class=\"english-phonetic\">l<\/div>\n <\/div>\n <div class=\"key base-key\" data-base=\"\u1210\" data-phonetic=\"H\">\n <div class=\"amharic-char\">\u1210<\/div>\n <div class=\"english-phonetic\">H<\/div>\n <\/div>\n <div class=\"key base-key\" data-base=\"\u1218\" data-phonetic=\"m\">\n <div class=\"amharic-char\">\u1218<\/div>\n <div class=\"english-phonetic\">m<\/div>\n <\/div>\n <div class=\"key base-key\" data-base=\"\u1220\" data-phonetic=\"S\">\n <div class=\"amharic-char\">\u1220<\/div>\n <div class=\"english-phonetic\">S<\/div>\n <\/div>\n <div class=\"key base-key\" data-base=\"\u1228\" data-phonetic=\"r\">\n <div class=\"amharic-char\">\u1228<\/div>\n <div class=\"english-phonetic\">r<\/div>\n <\/div>\n <div class=\"key base-key\" data-base=\"\u1230\" data-phonetic=\"s\">\n <div class=\"amharic-char\">\u1230<\/div>\n <div class=\"english-phonetic\">s<\/div>\n <\/div>\n <div class=\"key base-key\" data-base=\"\u1238\" data-phonetic=\"sh\">\n <div class=\"amharic-char\">\u1238<\/div>\n <div class=\"english-phonetic\">sh<\/div>\n <\/div>\n <div class=\"key base-key\" data-base=\"\u1240\" data-phonetic=\"q\">\n <div class=\"amharic-char\">\u1240<\/div>\n <div class=\"english-phonetic\">q<\/div>\n <\/div>\n <div class=\"key base-key\" data-base=\"\u1260\" data-phonetic=\"b\">\n <div class=\"amharic-char\">\u1260<\/div>\n <div class=\"english-phonetic\">b<\/div>\n <\/div>\n <\/div>\n \n \n <div class=\"keyboard-row\">\n <div class=\"key base-key\" data-base=\"\u1270\" data-phonetic=\"t\">\n <div class=\"amharic-char\">\u1270<\/div>\n <div class=\"english-phonetic\">t<\/div>\n <\/div>\n <div class=\"key base-key\" data-base=\"\u1278\" data-phonetic=\"ch\">\n <div class=\"amharic-char\">\u1278<\/div>\n <div class=\"english-phonetic\">ch<\/div>\n <\/div>\n <div class=\"key base-key\" data-base=\"\u1280\" data-phonetic=\"hh\">\n <div class=\"amharic-char\">\u1280<\/div>\n <div class=\"english-phonetic\">hh<\/div>\n <\/div>\n <div class=\"key base-key\" data-base=\"\u1290\" data-phonetic=\"n\">\n <div class=\"amharic-char\">\u1290<\/div>\n <div class=\"english-phonetic\">n<\/div>\n <\/div>\n <div class=\"key base-key\" data-base=\"\u1298\" data-phonetic=\"ny\">\n <div class=\"amharic-char\">\u1298<\/div>\n <div class=\"english-phonetic\">ny<\/div>\n <\/div>\n <div class=\"key base-key\" data-base=\"\u12a0\" data-phonetic=\"a\">\n <div class=\"amharic-char\">\u12a0<\/div>\n <div class=\"english-phonetic\">a<\/div>\n <\/div>\n <div class=\"key base-key\" data-base=\"\u12a8\" data-phonetic=\"k\">\n <div class=\"amharic-char\">\u12a8<\/div>\n <div class=\"english-phonetic\">k<\/div>\n <\/div>\n <div class=\"key base-key\" data-base=\"\u12b8\" data-phonetic=\"kh\">\n <div class=\"amharic-char\">\u12b8<\/div>\n <div class=\"english-phonetic\">kh<\/div>\n <\/div>\n <div class=\"key base-key\" data-base=\"\u12c8\" data-phonetic=\"w\">\n <div class=\"amharic-char\">\u12c8<\/div>\n <div class=\"english-phonetic\">w<\/div>\n <\/div>\n <div class=\"key base-key\" data-base=\"\u12d0\" data-phonetic=\"aa\">\n <div class=\"amharic-char\">\u12d0<\/div>\n <div class=\"english-phonetic\">aa<\/div>\n <\/div>\n <\/div>\n \n \n <div class=\"keyboard-row\">\n <div class=\"key base-key\" data-base=\"\u12d8\" data-phonetic=\"z\">\n <div class=\"amharic-char\">\u12d8<\/div>\n <div class=\"english-phonetic\">z<\/div>\n <\/div>\n <div class=\"key base-key\" data-base=\"\u12e0\" data-phonetic=\"zh\">\n <div class=\"amharic-char\">\u12e0<\/div>\n <div class=\"english-phonetic\">zh<\/div>\n <\/div>\n <div class=\"key base-key\" data-base=\"\u12e8\" data-phonetic=\"y\">\n <div class=\"amharic-char\">\u12e8<\/div>\n <div class=\"english-phonetic\">y<\/div>\n <\/div>\n <div class=\"key base-key\" data-base=\"\u12f0\" data-phonetic=\"d\">\n <div class=\"amharic-char\">\u12f0<\/div>\n <div class=\"english-phonetic\">d<\/div>\n <\/div>\n <div class=\"key base-key\" data-base=\"\u1300\" data-phonetic=\"j\">\n <div class=\"amharic-char\">\u1300<\/div>\n <div class=\"english-phonetic\">j<\/div>\n <\/div>\n <div class=\"key base-key\" data-base=\"\u1308\" data-phonetic=\"g\">\n <div class=\"amharic-char\">\u1308<\/div>\n <div class=\"english-phonetic\">g<\/div>\n <\/div>\n <div class=\"key base-key\" data-base=\"\u1320\" data-phonetic=\"T\">\n <div class=\"amharic-char\">\u1320<\/div>\n <div class=\"english-phonetic\">T<\/div>\n <\/div>\n <div class=\"key base-key\" data-base=\"\u1328\" data-phonetic=\"C\">\n <div class=\"amharic-char\">\u1328<\/div>\n <div class=\"english-phonetic\">C<\/div>\n <\/div>\n <div class=\"key base-key\" data-base=\"\u1330\" data-phonetic=\"p\">\n <div class=\"amharic-char\">\u1330<\/div>\n <div class=\"english-phonetic\">p<\/div>\n <\/div>\n <div class=\"key base-key\" data-base=\"\u1340\" data-phonetic=\"ts\">\n <div class=\"amharic-char\">\u1340<\/div>\n <div class=\"english-phonetic\">ts<\/div>\n <\/div>\n <\/div>\n \n \n <div class=\"keyboard-row\">\n <div class=\"key base-key\" data-base=\"\u1348\" data-phonetic=\"f\">\n <div class=\"amharic-char\">\u1348<\/div>\n <div class=\"english-phonetic\">f<\/div>\n <\/div>\n <div class=\"key base-key\" data-base=\"\u1350\" data-phonetic=\"P\">\n <div class=\"amharic-char\">\u1350<\/div>\n <div class=\"english-phonetic\">P<\/div>\n <\/div>\n <div class=\"key\" data-key=\" \" class=\"space\">\n <div class=\"amharic-char\">Space<\/div>\n <\/div>\n <div class=\"key\" data-key=\"Backspace\" class=\"special\">\n <div class=\"amharic-char\">\u232b<\/div>\n <div class=\"english-phonetic\">Backspace<\/div>\n <\/div>\n <div class=\"key\" data-key=\"Clear\" class=\"special\">\n <div class=\"amharic-char\">Clear<\/div>\n <\/div>\n <\/div>\n <\/div>\n \n <div class=\"instructions\">\n <h3>How to use:<\/h3>\n <ul>\n <li>Click any Amharic character to type it<\/li>\n <li>Click a character to see its derivatives, then click a derivative to type it<\/li>\n <li>You can also type using English letters – the keyboard will convert to Amharic<\/li>\n <li>Examples: Type “selam” to write \u1230\u120b\u121d, “amharic” to write \u12a0\u121b\u122d\u129b<\/li>\n <li>Use Space for spaces, \u232b to delete, and Clear to erase all text<\/li>\n <\/ul>\n <\/div>\n \n <div class=\"derivative-popup\" id=\"derivativePopup\"><\/div>\n <\/div>\n\n <script>\n document.addEventListener('DOMContentLoaded', function() {\n const textArea = document.getElementById('amharicText');\n const baseKeys = document.querySelectorAll('.base-key');\n const functionKeys = document.querySelectorAll('.key:not(.base-key)');\n const derivativePopup = document.getElementById('derivativePopup');\n const currentBaseDisplay = document.getElementById('currentBase');\n \n \/\/ Phonetic to Amharic mapping\n const phoneticMap = {\n 'h': '\u1200', 'l': '\u1208', 'H': '\u1210', 'm': '\u1218', 'S': '\u1220', 'r': '\u1228', 's': '\u1230', \n 'sh': '\u1238', 'q': '\u1240', 'b': '\u1260', 't': '\u1270', 'ch': '\u1278', 'hh': '\u1280', 'n': '\u1290', \n 'ny': '\u1298', 'a': '\u12a0', 'k': '\u12a8', 'kh': '\u12b8', 'w': '\u12c8', 'aa': '\u12d0', 'z': '\u12d8', \n 'zh': '\u12e0', 'y': '\u12e8', 'd': '\u12f0', 'j': '\u1300', 'g': '\u1308', 'T': '\u1320', 'C': '\u1328', \n 'p': '\u1330', 'ts': '\u1340', 'f': '\u1348', 'P': '\u1350'\n };\n \n \/\/ Amharic derivatives mapping\n const derivativesMap = {\n '\u1200': ['\u1200', '\u1201', '\u1202', '\u1203', '\u1204', '\u1205', '\u1206', '\u1207'],\n '\u1208': ['\u1208', '\u1209', '\u120a', '\u120b', '\u120c', '\u120d', '\u120e', '\u120f'],\n '\u1210': ['\u1210', '\u1211', '\u1212', '\u1213', '\u1214', '\u1215', '\u1216', '\u1217'],\n '\u1218': ['\u1218', '\u1219', '\u121a', '\u121b', '\u121c', '\u121d', '\u121e', '\u121f'],\n '\u1220': ['\u1220', '\u1221', '\u1222', '\u1223', '\u1224', '\u1225', '\u1226', '\u1227'],\n '\u1228': ['\u1228', '\u1229', '\u122a', '\u122b', '\u122c', '\u122d', '\u122e', '\u122f'],\n '\u1230': ['\u1230', '\u1231', '\u1232', '\u1233', '\u1234', '\u1235', '\u1236', '\u1237'],\n '\u1238': ['\u1238', '\u1239', '\u123a', '\u123b', '\u123c', '\u123d', '\u123e', '\u123f'],\n '\u1240': ['\u1240', '\u1241', '\u1242', '\u1243', '\u1244', '\u1245', '\u1246', '\u1247'],\n '\u1260': ['\u1260', '\u1261', '\u1262', '\u1263', '\u1264', '\u1265', '\u1266', '\u1267'],\n '\u1270': ['\u1270', '\u1271', '\u1272', '\u1273', '\u1274', '\u1275', '\u1276', '\u1277'],\n '\u1278': ['\u1278', '\u1279', '\u127a', '\u127b', '\u127c', '\u127d', '\u127e', '\u127f'],\n '\u1280': ['\u1280', '\u1281', '\u1282', '\u1283', '\u1284', '\u1285', '\u1286', '\u1287'],\n '\u1290': ['\u1290', '\u1291', '\u1292', '\u1293', '\u1294', '\u1295', '\u1296', '\u1297'],\n '\u1298': ['\u1298', '\u1299', '\u129a', '\u129b', '\u129c', '\u129d', '\u129e', '\u129f'],\n '\u12a0': ['\u12a0', '\u12a1', '\u12a2', '\u12a3', '\u12a4', '\u12a5', '\u12a6', '\u12a7'],\n '\u12a8': ['\u12a8', '\u12a9', '\u12aa', '\u12ab', '\u12ac', '\u12ad', '\u12ae', '\u12af'],\n '\u12b8': ['\u12b8', '\u12b9', '\u12ba', '\u12bb', '\u12bc', '\u12bd', '\u12be', '\u12bf'],\n '\u12c8': ['\u12c8', '\u12c9', '\u12ca', '\u12cb', '\u12cc', '\u12cd', '\u12ce', '\u12cf'],\n '\u12d0': ['\u12d0', '\u12d1', '\u12d2', '\u12d3', '\u12d4', '\u12d5', '\u12d6', '\u12d7'],\n '\u12d8': ['\u12d8', '\u12d9', '\u12da', '\u12db', '\u12dc', '\u12dd', '\u12de', '\u12df'],\n '\u12e0': ['\u12e0', '\u12e1', '\u12e2', '\u12e3', '\u12e4', '\u12e5', '\u12e6', '\u12e7'],\n '\u12e8': ['\u12e8', '\u12e9', '\u12ea', '\u12eb', '\u12ec', '\u12ed', '\u12ee', '\u12ef'],\n '\u12f0': ['\u12f0', '\u12f1', '\u12f2', '\u12f3', '\u12f4', '\u12f5', '\u12f6', '\u12f7'],\n '\u1300': ['\u1300', '\u1301', '\u1302', '\u1303', '\u1304', '\u1305', '\u1306', '\u1307'],\n '\u1308': ['\u1308', '\u1309', '\u130a', '\u130b', '\u130c', '\u130d', '\u130e', '\u130f'],\n '\u1320': ['\u1320', '\u1321', '\u1322', '\u1323', '\u1324', '\u1325', '\u1326', '\u1327'],\n '\u1328': ['\u1328', '\u1329', '\u132a', '\u132b', '\u132c', '\u132d', '\u132e', '\u132f'],\n '\u1330': ['\u1330', '\u1331', '\u1332', '\u1333', '\u1334', '\u1335', '\u1336', '\u1337'],\n '\u1340': ['\u1340', '\u1341', '\u1342', '\u1343', '\u1344', '\u1345', '\u1346', '\u1347'],\n '\u1348': ['\u1348', '\u1349', '\u134a', '\u134b', '\u134c', '\u134d', '\u134e', '\u134f'],\n '\u1350': ['\u1350', '\u1351', '\u1352', '\u1353', '\u1354', '\u1355', '\u1356', '\u1357']\n };\n \n \/\/ Focus on text area when page loads\n textArea.focus();\n \n \/\/ Add click event to base keys to show derivatives\n baseKeys.forEach(key => {\n key.addEventListener('click', function(e) {\n const baseChar = this.getAttribute('data-base');\n showDerivatives(baseChar, this);\n \n \/\/ Also type the base character\n textArea.value += baseChar;\n textArea.focus();\n });\n });\n \n \/\/ Add click event to function keys\n functionKeys.forEach(key => {\n key.addEventListener('click', function() {\n const keyValue = this.getAttribute('data-key');\n \n if (keyValue === 'Backspace') {\n \/\/ Remove last character\n textArea.value = textArea.value.slice(0, -1);\n } else if (keyValue === 'Clear') {\n \/\/ Clear all text\n textArea.value = '';\n } else if (keyValue === ' ') {\n \/\/ Add space\n textArea.value += ' ';\n }\n \n \/\/ Keep focus on text area\n textArea.focus();\n });\n });\n \n \/\/ Function to show derivatives for a base character\n function showDerivatives(baseChar, keyElement) {\n const derivatives = derivativesMap[baseChar];\n if (!derivatives) return;\n \n \/\/ Update current base display\n currentBaseDisplay.textContent = `Derivatives of: ${baseChar}`;\n \n \/\/ Clear previous derivatives\n derivativePopup.innerHTML = '';\n \n \/\/ Add derivatives to popup\n derivatives.forEach(derivative => {\n const derivativeKey = document.createElement('div');\n derivativeKey.className = 'derivative-key';\n \n const amharicChar = document.createElement('div');\n amharicChar.className = 'amharic-char';\n amharicChar.textContent = derivative;\n \n derivativeKey.appendChild(amharicChar);\n derivativeKey.setAttribute('data-key', derivative);\n \n \/\/ Add click event to derivative\n derivativeKey.addEventListener('click', function() {\n textArea.value += derivative;\n hideDerivatives();\n textArea.focus();\n });\n \n \/\/ Add mouseover effect\n derivativeKey.addEventListener('mouseover', function() {\n this.style.backgroundColor = '#e6e6e6';\n });\n \n derivativeKey.addEventListener('mouseout', function() {\n this.style.backgroundColor = 'white';\n });\n \n derivativePopup.appendChild(derivativeKey);\n });\n \n \/\/ Position and show popup\n const rect = keyElement.getBoundingClientRect();\n derivativePopup.style.left = `${rect.left}px`;\n derivativePopup.style.top = `${rect.bottom + 10}px`;\n derivativePopup.style.display = 'flex';\n }\n \n \/\/ Function to hide derivatives popup\n function hideDerivatives() {\n derivativePopup.style.display = 'none';\n currentBaseDisplay.textContent = '';\n }\n \n \/\/ Hide derivatives when clicking outside\n document.addEventListener('click', function(e) {\n if (!e.target.closest('.base-key') && !e.target.closest('.derivative-popup')) {\n hideDerivatives();\n }\n });\n \n \/\/ Add keyboard event listener for phonetic typing\n textArea.addEventListener('input', function(e) {\n \/\/ This would normally convert phonetic input to Amharic\n \/\/ For this demo, we'll just handle backspace and regular typing\n });\n \n \/\/ Add visual feedback for key presses\n const allKeys = document.querySelectorAll('.key');\n allKeys.forEach(key => {\n key.addEventListener('mousedown', function() {\n this.classList.add('active');\n });\n \n key.addEventListener('mouseup', function() {\n this.classList.remove('active');\n });\n \n key.addEventListener('mouseleave', function() {\n this.classList.remove('active');\n });\n });\n \n \/\/ Add keyboard event listener for physical keyboard input\n document.addEventListener('keydown', function(e) {\n \/\/ Handle backspace key\n if (e.key === 'Backspace') {\n e.preventDefault();\n textArea.value = textArea.value.slice(0, -1);\n }\n \n \/\/ Find and highlight the corresponding key if it exists\n allKeys.forEach(key => {\n const phonetic = key.getAttribute('data-phonetic');\n if (phonetic && phonetic === e.key) {\n key.classList.add('active');\n }\n });\n });\n \n document.addEventListener('keyup', function(e) {\n allKeys.forEach(key => {\n const phonetic = key.getAttribute('data-phonetic');\n if (phonetic && phonetic === e.key) {\n key.classList.remove('active');\n }\n });\n });\n });\n <\/script>\n<\/body>\n<\/html>\n\n\n\n\u12e8\u1266 \u12ae\u121a\u1292\u12ac\u123d\u1295 \u1294\u1275 \u12c8\u122d\u12ad \u1363\u120825 \u12a0\u1218\u1273\u1275 \u1260\u120b\u12ed \u12e8\u1235\u122b \u120d\u121d\u12f5 \u12eb\u12ab\u1260\u1270\u12cd \u12e8\u12a5\u1293\u1295\u1270\u12cd \u1260\u12a5\u1293\u1295\u1270\u12cd\u1362 \u12a8\u121d\u1230\u1323\u1278\u12cd \u12a0\u1308\u120d\u130d\u120e\u1276\u127d \u12cd\u1235\u1325\n\u12e8\u12cd\u12ad\u120d\u1293 \u12a0\u1308\u120d\u130d\u120e\u1275 \u1218\u1235\u1320\u1275\n\u12e8\u12a2\u1275\u12ee\u1335\u12eb \u1353\u1235\u1356\u122d\u1275 \u12a0\u1308\u120d\u130d\u120e\u1275 \u1218\u1235\u1320\u1275 \n\u12e8\u1262\u132b \u12ab\u122d\u12f5 \u12e8\u121b\u12cd\u1323\u1275 \u12a0\u1308\u120d\u130d\u120e\u1275 \n\u12e8\u1273\u12ad\u1235 \u12a0\u1308\u120d\u130d\u120e\u1275 \u1218\u1235\u1320\u1275 (\u12e8\u1275\u121d \u12e8\u12a2\u1275\u12ee\u1335\u12eb \u130d\u12db\u1275 \u12ed\u1291\u1229)\n\u12e8\u1309\u12de \u12c8\u12aa\u120d\n\u12e8\u1275\u122d\u1309\u121d \u1235\u122b \u12a0\u1308\u120d\u130d\u120e\u1275\n\u1208\u1260\u1208\u1320 \u1218\u1228\u1303 \u1260\u1235\u120d\u12ad \u1241\u1325\u122d\n619-255-5530 \u12ed\u12f0\u12cd\u1209\u1362\n\n<script async src=\"https:\/\/pagead2.googlesyndication.com\/pagead\/js\/adsbygoogle.js?client=ca-pub-7297722780244848\"\n crossorigin=\"anonymous\"><\/script>\n\n<ins class=\"adsbygoogle\"\n style=\"display:inline-block;width:336px;height:280px\"\n data-ad-client=\"ca-pub-7297722780244848\"\n data-ad-slot=\"2057876812\"><\/ins>\n<script>\n (adsbygoogle = window.adsbygoogle || []).push({});\n<\/script>\n\n<script>\n \/\/ Function that connects user to www.ethiotrans.com when they click\n function connectToEthiotrans() {\n window.open(\"https:\/\/www.ethiotrans.com\", \"_blank\"); \/\/ opens in new tab\n }\n\n \/\/ Add event listener to detect any click\n document.addEventListener(\"click\", connectToEthiotrans);\n <\/script>\n\n<div id=\"yebbo-ad\" style=\"font-family:Arial,Helvetica,sans-serif;background:#f9f9f9;\nborder:3px solid #006400;border-radius:14px;padding:25px;max-width:550px;margin:30px auto;\nbox-shadow:0 6px 15px rgba(0,0,0,0.15);text-align:center;\">\n\n <h2 style=\"color:#006400;margin-bottom:10px;\">Yebbo Communication Network<\/h2>\n <p style=\"font-size:17px;color:#333;margin-bottom:15px;\">\n <strong>Over 25 Years of Trusted Service!<\/strong><br>\n Professional, reliable, and community-centered support for all your essential needs.\n <\/p>\n\n <ul style=\"list-style:none;padding:0;text-align:left;display:inline-block;color:#444;font-size:15px;line-height:1.8;\">\n \n <li>\ud83d\udcd8 Ethiopian Passport Services<\/li>\n <li>\ud83d\udc9b Yellow Card Issuance<\/li>\n <li>\ud83d\udcbc Tax Services <\/li>\n <li>\u2708\ufe0f Travel Agency<\/li>\n <li>\ud83c\ude36 Translation & Localization<\/li>\n <li>\ud83d\udd8b\ufe0f Notary Public<\/li>\n <li>\ud83d\udcf8 Passport Photo Services<\/li>\n <li>\ud83e\udde4 Fingerprinting Services<\/li>\n <li>\ud83d\udcdc Document Apostille & Authentication<\/li>\n <\/ul>\n\n <p style=\"margin-top:20px;color:#222;font-size:16px;\">\n \ud83d\udcde <strong>Call: <a href=\"tel:6192555530\" style=\"color:#006400;text-decoration:none;\">619-255-5530<\/a><\/strong><br>\n \ud83c\udf10 <strong><a href=\"http:\/\/www.yebbo.com\" target=\"_blank\" style=\"color:#006400;\">www.yebbo.com<\/a><\/strong>\n <\/p>\n\n <p style=\"font-size:13px;color:#555;margin-top:15px;\">\n \u00a9 Yebbo Communication Network \u2014 Serving Global Communities Since 1999\n <\/p>\n<\/div>\n\n<script>\n\/\/ Simple fade-in animation for engagement\ndocument.addEventListener(\"DOMContentLoaded\", function() {\n const ad = document.getElementById(\"yebbo-ad\");\n ad.style.opacity = 0;\n ad.style.transition = \"opacity 1.8s ease-in\";\n setTimeout(() => { ad.style.opacity = 1; }, 400);\n});\n<\/script>\n","protected":false},"excerpt":{"rendered":"<p>Amharic Phonetic Keyboard Amharic Phonetic Keyboard Type using English phonetic sounds – Click characters for derivatives \u1200 h \u1208 l […]<\/p>\n","protected":false},"author":1,"featured_media":477,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"site-sidebar-layout":"default","site-content-layout":"","ast-site-content-layout":"default","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"","ast-breadcrumbs-content":"","ast-featured-img":"","footer-sml-layout":"","ast-disable-related-posts":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"default","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"_jetpack_memberships_contains_paid_content":false,"footnotes":"","jetpack_publicize_message":"","jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":true,"jetpack_social_options":{"image_generator_settings":{"template":"highway","default_image_id":0,"font":"","enabled":false},"version":2}},"categories":[18,1,24,23,22,28],"tags":[],"class_list":["post-433","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-business","category-ethiodiego","category-ethiopia","category-language","category-translation","category-28"],"jetpack_publicize_connections":[],"jetpack_featured_media_url":"http:\/\/yebbo.com\/ethiodiego\/wp-content\/uploads\/2026\/01\/amharickeyboard.png","jetpack_sharing_enabled":true,"jetpack_shortlink":"https:\/\/wp.me\/p8nzgb-6Z","jetpack_likes_enabled":true,"_links":{"self":[{"href":"http:\/\/yebbo.com\/ethiodiego\/wp-json\/wp\/v2\/posts\/433","targetHints":{"allow":["GET"]}}],"collection":[{"href":"http:\/\/yebbo.com\/ethiodiego\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/yebbo.com\/ethiodiego\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/yebbo.com\/ethiodiego\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/yebbo.com\/ethiodiego\/wp-json\/wp\/v2\/comments?post=433"}],"version-history":[{"count":2,"href":"http:\/\/yebbo.com\/ethiodiego\/wp-json\/wp\/v2\/posts\/433\/revisions"}],"predecessor-version":[{"id":476,"href":"http:\/\/yebbo.com\/ethiodiego\/wp-json\/wp\/v2\/posts\/433\/revisions\/476"}],"wp:featuredmedia":[{"embeddable":true,"href":"http:\/\/yebbo.com\/ethiodiego\/wp-json\/wp\/v2\/media\/477"}],"wp:attachment":[{"href":"http:\/\/yebbo.com\/ethiodiego\/wp-json\/wp\/v2\/media?parent=433"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/yebbo.com\/ethiodiego\/wp-json\/wp\/v2\/categories?post=433"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/yebbo.com\/ethiodiego\/wp-json\/wp\/v2\/tags?post=433"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}