<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3c.org/1999/xhtml">
<head>
<title>kanaverter [JavaScript]</title>
<style type='text/css'>
* {
margin:0;
padding:0;
}
#box {
background:#f5f5f5 url(logo.png) no-repeat 2px 4px;
width:490px;
height:250px;
padding:50px 5px 0 5px;
position:absolute;
left:50%;
top:50%;
margin-left:-251px;
margin-top:-151px;
border:1px solid #999;
}
#box div {
width:240px;
height:245px;
float:left;
}
#romaji_container {
margin-right:10px;
}
#kana_container {
}
#box div textarea {
font:12px arial;
border:1px solid #ddd;
width:232px;
padding:3px;
height:208px;
background:#fff;
overflow:auto;
}
#box div div textarea {
height:80px;
margin-bottom:5px;
}
#hirakata {
display:none;
}
h1 {
font:normal 20px georgia;
margin-top:5px;
padding-left:3px;
cursor:pointer;
}
h1:hover {
background:#ddd;
}
h2 {
font:normal 14px georgia;
}
#box #wl {
position:absolute;
top:5px;
right:5px;
color:#0000ff;
font:12px arial;
cursor:pointer;
width:auto;
height:auto;
float:none;
}
#box #wl #wn {
position:absolute;
top:20px;
right:0;
font:12px arial;
width:478px;
padding:5px;
border:1px solid #000;
height:auto;
float:none;
color:#000;
background:#fff;
display:none;
}
#box #wl:hover #wn {
display:block;
}
</style>
<!--[if IE]>
<style type='text/css'>
#box div textarea {
margin-top:-1px;
}
</style>
<![endif]-->
<script type='text/javascript'>
function is_array(obj) {
return obj.constructor==Array
}
function ctitle(where,title) {
nodes=eval(where+"_div").childNodes
nodes_length=nodes.length
for (var i=0;i<nodes_length;i++) {
node=nodes[i]
if (node.nodeName=="H1") node.innerHTML=title
}
}
function kanaside(what) {
nodes=kana_div.childNodes
nodes_length=nodes.length
for (var i=0;i<nodes_length;i++) {
node=nodes[i]
if (node.nodeName=="TEXTAREA") node.style.display=visibility_action[oppo[what]]
}
hk_div.style.display=visibility_action[what]
}
function pblur(what) {
if (what==infocus) {
if (what=="romaji") romaji_input=romaji_text.value
else if (what=="kana") romaji_output=romaji_text.value
}
else {
if (what=="romaji") romaji_output=romaji_text.value
}
}
function bpfocus(what,detail) {
if (detail===undefined) detail=what
if (eval(detail+"_text").value=="") pfocus(what)
else if (what!=infocus) eval(detail+"_text").select()
}
function pfocus(what) {
if (what!=infocus) {
whatnot=oppo[what]
ctitle(what,what.substr(0,1).toUpperCase()+what.substr(1)+" (input)")
ctitle(whatnot,whatnot.substr(0,1).toUpperCase()+whatnot.substr(1)+" (output)")
kanaside(what)
tfocus(what)
}
}
function tfocus(what) {
whatnot=oppo[what]
eval(what+"_text").focus()
if (what=="kana") romaji_text.value=romaji_output
else if (what=="romaji") romaji_text.value=romaji_input
infocus=what
}
function html_entity_decode(str) {
ta=document.createElement("textarea")
ta.innerHTML=str.replace(/</g,"<").replace(/>/g,">")
return ta.value
}
function convert_value(str,from,to) {
var strlen=str.length
var ftxt=""
if (to=="hira" || to=="kata") {
var ostr=str
var str=str.toLowerCase()
var ttxt=""
var ottxt=""
var ctxt
var octxt
var cctxt
var occtxt
var maybe
var ad
var crkanadb
for (var i=0;i<strlen;i++) {
ctxt=str.substr(i,1)
octxt=ostr.substr(i,1)
cctxt=ttxt+ctxt
occtxt=ottxt+octxt
maybe=false
ad=false
for (var ii=0;ii<eval("r"+to+"dbl");ii++) {
crkanadb=eval("r"+to+"db[ii]")
if (crkanadb==cctxt && !ad) {
ad=true
ftxt+=""+eval("r_"+to+"db[cctxt]")+";"
ttxt=""
ottxt=""
maybe=true
}
else if (crkanadb.substr(0,cctxt.length)==cctxt && !ad) {
ad=true
ttxt+=ctxt
ottxt+=octxt
maybe=true
}
}
if (!maybe) {
ad=false
for (var ii=0;ii<eval("r"+to+"dbl");ii++) {
crkanadb=eval("r"+to+"db[ii]")
if (crkanadb==ctxt && !ad) {
ad=true
ftxt+=occtxt.substr(0,1)+""+eval("r_"+to+"db[ctxt]")+";"
ttxt=""
ottxt=""
maybe=true
}
}
if (!maybe) {
ftxt+=ottxt
ttxt=ctxt
ottxt=octxt
}
}
}
//document.title="cc: "+cctxt+" c: "+ctxt+" t: "+ttxt
ftxt+=ottxt
ftxt=html_entity_decode(ftxt)
}
else if (to=="romaji") {
var ctxt
var ckana
var isit
for (var i=0;i<strlen;i++) {
ctxt=str.substr(i,1)
isit=false
for (var ii=0;ii<kkanadbl && !isit;ii++) {
ckana=kkanadb[ii]
if (html_entity_decode(""+ckana+";")==ctxt) isit=true
}
if (isit) ftxt+=k_kanadb[ckana]
else ftxt+=ctxt
}
}
return ftxt
}
function copy_value(from,to) {
if (from==infocus) {
ovalue=eval(from+"_text").value
nto=to.split(",")
tol=nto.length
for (var i=0;i<tol;i++) {
cto=nto[i]
if (ovalue!="") nvalue=convert_value(ovalue,from,cto)
else nvalue=""
eval(cto+"_text").value=nvalue
}
}
}
window.onload=function(){
box_div=document.getElementById("box")
romaji_div=document.getElementById("romaji_container")
kana_div=document.getElementById("kana_container")
hk_div=document.getElementById("hirakata")
romaji_text=document.getElementById("romaji")
kana_text=document.getElementById("kana")
hira_text=document.getElementById("hira")
kata_text=document.getElementById("kata")
if (navigator.appVersion.toLowerCase().indexOf("chrome")!=-1) {
hira_text.style.height="78px"
kata_text.style.height="78px"
}
oppo=new Array()
oppo["romaji"]="kana"
oppo["kana"]="romaji"
visibility_action=new Array()
visibility_action["romaji"]="block"
visibility_action["kana"]="none"
romaji_input=""
romaji_output=""
infocus=""
rhiradb=new Array("o","a","sa","ki","ma","ho","ha","yo","mu","mo","shi","si","nu","me","to","ko","ni","ta","na","ne","wa","le","re","se","ke","mi","no","tsu","tzu","tu","u","la","ra","chi","ci","ti","lo","ro","lu","ru","yu","ya","wo","li","ri","n'","e","so","te","he","ku","fu","hu","su","hi","ka","i")
rhiradbl=rhiradb.length
r_hiradb=new Array()
r_hiradb["o"]=362
r_hiradb["a"]=354
r_hiradb["sa"]=373
r_hiradb["ki"]=365
r_hiradb["ma"]=414
r_hiradb["ho"]=411
r_hiradb["ha"]=399
r_hiradb["yo"]=424
r_hiradb["mu"]=416
r_hiradb["mo"]=418
r_hiradb["shi"]=375
r_hiradb["si"]=375
r_hiradb["nu"]=396
r_hiradb["me"]=417
r_hiradb["to"]=392
r_hiradb["ko"]=371
r_hiradb["ni"]=395
r_hiradb["ta"]=383
r_hiradb["na"]=394
r_hiradb["ne"]=397
r_hiradb["wa"]=431
r_hiradb["le"]=428
r_hiradb["re"]=428
r_hiradb["se"]=379
r_hiradb["ke"]=369
r_hiradb["mi"]=415
r_hiradb["no"]=398
r_hiradb["tsu"]=388
r_hiradb["tzu"]=388
r_hiradb["tu"]=388
r_hiradb["u"]=358
r_hiradb["la"]=425
r_hiradb["ra"]=425
r_hiradb["chi"]=385
r_hiradb["ci"]=385
r_hiradb["ti"]=385
r_hiradb["lo"]=429
r_hiradb["ro"]=429
r_hiradb["lu"]=427
r_hiradb["ru"]=427
r_hiradb["yu"]=422
r_hiradb["ya"]=420
r_hiradb["wo"]=434
r_hiradb["li"]=426
r_hiradb["ri"]=426
r_hiradb["n'"]=435
r_hiradb["e"]=360
r_hiradb["so"]=381
r_hiradb["te"]=390
r_hiradb["he"]=408
r_hiradb["ku"]=367
r_hiradb["fu"]=405
r_hiradb["hu"]=405
r_hiradb["su"]=377
r_hiradb["hi"]=402
r_hiradb["ka"]=363
r_hiradb["i"]=356
rkatadb=new Array("ka","u","me","no","i","to","chi","ci","ti","o","mi","yo","mu","ke","wa","nu","so","n'","sa","na","te","yu","ko","e","ku","fu","hu","su","tsu","tzu","tu","shi","si","li","ri","lu","ru","le","re","hi","lo","ro","he","ho","ta","la","ra","wo","ki","ni","ha","se","ya","a","ma","ne")
rkatadbl=rkatadb.length
r_katadb=new Array()
r_katadb["ka"]=459
r_katadb["u"]=454
r_katadb["me"]=513
r_katadb["no"]=494
r_katadb["i"]=452
r_katadb["to"]=488
r_katadb["chi"]=481
r_katadb["ci"]=481
r_katadb["ti"]=481
r_katadb["o"]=458
r_katadb["mi"]=511
r_katadb["yo"]=520
r_katadb["mu"]=512
r_katadb["ke"]=465
r_katadb["wa"]=527
r_katadb["nu"]=492
r_katadb["so"]=477
r_katadb["n'"]=531
r_katadb["sa"]=469
r_katadb["na"]=490
r_katadb["te"]=486
r_katadb["yu"]=518
r_katadb["ko"]=467
r_katadb["e"]=456
r_katadb["ku"]=463
r_katadb["fu"]=501
r_katadb["hu"]=501
r_katadb["su"]=473
r_katadb["tsu"]=484
r_katadb["tzu"]=484
r_katadb["tu"]=484
r_katadb["shi"]=471
r_katadb["si"]=471
r_katadb["li"]=522
r_katadb["ri"]=522
r_katadb["lu"]=523
r_katadb["ru"]=523
r_katadb["le"]=524
r_katadb["re"]=524
r_katadb["hi"]=498
r_katadb["lo"]=525
r_katadb["ro"]=525
r_katadb["he"]=504
r_katadb["ho"]=507
r_katadb["ta"]=479
r_katadb["la"]=521
r_katadb["ra"]=521
r_katadb["wo"]=530
r_katadb["ki"]=461
r_katadb["ni"]=491
r_katadb["ha"]=495
r_katadb["se"]=475
r_katadb["ya"]=516
r_katadb["a"]=450
r_katadb["ma"]=510
r_katadb["ne"]=493
kkanadb=new Array("362","354","373","365","414","411","399","424","416","418","375","396","417","392","371","395","383","394","397","431","428","379","369","415","398","388","358","425","385","429","427","422","420","434","426","435","360","381","390","408","367","405","377","402","363","356")
kkanadbl=kkanadb.length
k_kanadb=new Array()
k_kanadb["362"]="o"
k_kanadb["354"]="a"
k_kanadb["373"]="sa"
k_kanadb["365"]="ki"
k_kanadb["414"]="ma"
k_kanadb["411"]="ho"
k_kanadb["399"]="ha"
k_kanadb["424"]="yo"
k_kanadb["416"]="mu"
k_kanadb["418"]="mo"
k_kanadb["375"]="shi"
k_kanadb["375"]="si"
k_kanadb["396"]="nu"
k_kanadb["417"]="me"
k_kanadb["392"]="to"
k_kanadb["371"]="ko"
k_kanadb["395"]="ni"
k_kanadb["383"]="ta"
k_kanadb["394"]="na"
k_kanadb["397"]="ne"
k_kanadb["431"]="wa"
k_kanadb["428"]="le"
k_kanadb["428"]="re"
k_kanadb["379"]="se"
k_kanadb["369"]="ke"
k_kanadb["415"]="mi"
k_kanadb["398"]="no"
k_kanadb["388"]="tsu"
k_kanadb["388"]="tzu"
k_kanadb["388"]="tu"
k_kanadb["358"]="u"
k_kanadb["425"]="la"
k_kanadb["425"]="ra"
k_kanadb["385"]="chi"
k_kanadb["385"]="ci"
k_kanadb["385"]="ti"
k_kanadb["429"]="lo"
k_kanadb["429"]="ro"
k_kanadb["427"]="lu"
k_kanadb["427"]="ru"
k_kanadb["422"]="yu"
k_kanadb["420"]="ya"
k_kanadb["434"]="wo"
k_kanadb["426"]="li"
k_kanadb["426"]="ri"
k_kanadb["435"]="n'"
k_kanadb["360"]="e"
k_kanadb["381"]="so"
k_kanadb["390"]="te"
k_kanadb["408"]="he"
k_kanadb["367"]="ku"
k_kanadb["405"]="fu"
k_kanadb["405"]="hu"
k_kanadb["377"]="su"
k_kanadb["402"]="hi"
k_kanadb["363"]="ka"
k_kanadb["356"]="i"
}
</script>
</head>
<body>
<div id='box'>
<div id='wl'>
Warning!
<div id='wn'>
This isn't a very good kana-romaji converter. For one thing, it's in a web browser and relies on the power of the user's computer. Second, it's also not complete. It only translates basic kanas. Kanas consisting of 2 signs simply don't exist in this web app. Instead I recommend JWPce for use as a text editor. It's simple and works perfectly.
</div>
</div>
<div id='romaji_container'>
<h1 onclick='pfocus("romaji")'>Romaji</h1>
<textarea id='romaji' onfocus='bpfocus("romaji")' onblur='pblur("romaji")' onkeyup='copy_value("romaji","hira,kata")'></textarea>
</div>
<div id='kana_container'>
<h1 onclick='pfocus("kana")'>Kana</h1>
<textarea id='kana' onfocus='pfocus("kana")' onblur='pblur("kana")' onkeyup='copy_value("kana","romaji")'></textarea>
<div id='hirakata'>
<h2>Hiragana:</h2>
<textarea id='hira' onfocus='bpfocus("kana","hira")'></textarea>
<h2>Katakana:</h2>
<textarea id='kata' onfocus='bpfocus("kana","kata")'></textarea>
</div>
</div>
</div>
</body>
</html>