<!-- 
LICENSE

If you distribute this, you need to include in that distribution this source
code and a copy of this license.

DISCLAIMER

If you copy this, it's on an AS-IS basis: I'm not to be held responsible for
anything you do with it and I don't claim it's fit for any particular purpose.

AUTHOR

Allan Tokuda :: 徳田アラン
Began in 2009 Mar 23
Updated: 2010 May 24

BACKGROUND

I want to learn Japanese.
I want to read Japanese I haven't yet memorized.
I got sick of looking up non-digital (printed) kanji the hard way.

This is made for rapidly looking up kanji of which you do not know the reading
and are too impatient to look up in tables by stroke count or by radicals.
This lets me find the kanji I need in a matter of a few seconds.

This tool is for kanji you encounter *in print*.  It is NOT NECESSARY for 
digitized Kanji.  The Mozilla Firefox extension "Rikaichan" will look up 
kanji for you instantly when you hover your mouse over them.  
It goes beyond this, in fact, to look up entire phrases for you.

SOURCES

"A Guide to Reading and Writing Japanese (Revised Edition)" 
Charles E. Tuttle Company
Rutland, Vermont & Tokyo, Japan
Copyright 1959; 29th printing 1975

NOTES

- Definitions handling missing.
- Example phrase handling missing.

-->
<html>
<head>
<title>Strokewise Kanji Finder</title>

<script type="text/javascript">

dict = new Array(
"｜	2",
"フ	5",
"レ	6",
"ノ	1",
"、	3",
"一	4",
"二	4 4",
"三	4 4 4",
"四	23 5 123 1236 4",
"五	4 12 5 4",
"六	123 4 1 3",
"七	14 6",
"八	1 3",
"九	12 56",
"十	4 2",
"日	2 5 4 4",
"月	12 5 4 4",
"火	1 3 123 123",
"水	2 5 1 3",
"木	4 2 1 3",
"金	1 3 4 4 2 4 34 14",
"土	4 2 4",
"左	4 1 4 2 4",
"右	4 1 2 5 4",
"上	4 2 4",
"下	4 2 34",
"大	4 1 3",
"中	2 5 4 2",
"小	2 12 23",
"目	2 5 4 4 4",
"耳	4 2 4 4 4 2",
"口	2 5 4",
"手	14 4 4 2",
"足	2 5 4 4 2 12 346",
"人	1 3",
"子	5 2 4",
"女	6 1 4",
"先	1 4 2 4 1 6",
"生	1 4 4 2 4",
"赤	4 2 4 12 2 1 3",
"青	4 4 2 4 2 5 4 4",
"白	12 2 5 4 4",
"山	2 6 2, ",/* look up */
"川	12 2 2",
"田	2 5 2 4 4",
"森	4 2 1 3 4 2 1 3 4 2 1 3",
"雨	4 2 5 2 134 134 134 134",
"花	4 2 2 1 2 14 6",
"石	4 1 2 5 4",
"本	4 2 1 3 4",
"正	4 2 4 2 4",
"雲	4 123 5 2 134 134 134 134",
"円	2 5 2 4",
"王	4 4 2 4",
"音	123 4 23 12 4 2 5 4 4",
"何	1 2 4 2 2 5 4",
"夏	4 123 2 5 4 4 4 1 5 3",
"家	123 123 5 4 2 1 1 1 1 3",
"会	1 3 4 4 6 23",
"海	3 3 4 1 4 6 5 4 123 123",
"外	1 5 3 2 3",
"学	23 23 21 123 5 5 2 4",
"間	2 5 4 4 2 5 4 4 2 5 4 4",
"気	1 4 4 56 1 3",
"汽	3 3 4 1 4 4 56",
"休	1 2 4 2 1 3",
"牛	1 4 2 4",
"京	123 4 2 5 4 2 1 3",
"玉	4 4 2 4 3",
"空	123 123 5 1 3 4 2 4",
"犬	4 1 3 3",
"見	2 5 4 4 1 6",
"元	4 4 1 6",
"戸	4 12 5 4",
"古	4 2 2 5 4",
"工	4 2 4",
"光	2 4 1 3 1 6",
"行	1 1 2 4 4 2",
"考	4 2 4 1 4 56",
"校	4 2 1 3 123 4 1 3 1 3",
"高	123 4 2 5 4 2 5 2 5 4",
"合	1 3 4 2 5 4",
"谷	1 3 1 3 2 5 4",
"国	2 5 4 4 2 4 3 4",
"黒	2 5 4 4 4 2 4 123 123 123 123",
"今	1 3 34 5",
"作	1 2 1 2 4 4 4",
"糸	6 6 23 2 1 3",
"思	2 5 2 4 4 12 6 3 3",
"紙	6 6 23 123 123 123 1 2 4 4",
"字	123 123 5 5 2 4",
"時	2 5 4 4 4 2 4 4 2 234",
"車	4 2 5 4 4 4 2",
"秋	1 4 2 1 3 1 3 123 123",
"出	2 6 2 6 2",
"春	4 4 4 1 3 2 5 4 4",
"書	5 4 4 4 2 4 2 5 4 4",
"少	2 1 3 1",
"色	1 5 5 2 4 6",
"心	12 6 3 3",
"西	4 12 6 2 5 4",
"声	4 2 4 12 5 2 4",
"夕	1 5 3",
"切	4 6 5 1",
"雪	4 123 5 2 134 134 134 134",
"千	1 4 2",
"前	23 12 4 2 5 4 4 2 2",
"組	6 6 123 123 123 123 2 5 4 4 4",
"早	2 5 4 4 4 2",
"走	4 2 4 4 2 12 346",
"草	4 2 2 2 5 4 4 4 2",
"村	4 2 1 3 4 2 23",
"多	1 5 3 1 5 3",
"男	2 5 2 4 4 5 1",
"池	34 34 4 5 2 6",
"地	4 2 4 5 2 6",
"知	1 4 4 1 3 2 5 4",
"竹	1 2 4 1 4 2",
"虫	2 5 4 2 4 23",
"町	2 5 2 4 4 4 2",
"長	4 4 4 2 4 1 3", /* look up */
"鳥	123 5 4 4 4 56 123 123 123 123",
"朝	4 2 5 4 4 4 4 2 12 5 4 4",
"天	4 4 1 3",
"冬	1 5 3 3 3",
"東	4 2 5 4 4 1 3",
"道	34 2 346 3 1 4 2 5 4 4 4",
"読	123 4 4 4 2 5 4 4 2 4 123 5 12 6",
"南	4 2 2 5 3 1 4 4 2",
"入	1 3",
"年	1 4 2 4 4 2",
"馬	4 4 4 2 56 123 123 123 123",
"麦	4 4 2 4 1 5 3",
"半	3 1 4 4 2",
"百	4 12 2 5 4 4",
"父	1 3 1 3",
"風	12 56 14 2 5 4 2 4 23",
"分	1 3 5 1",
"文	123 4 1 3",
"米	4 1 3 2 1 3",
"歩	4 2 2 4 2 1 3 1",
"母	6 5 4 123 123",
"方	123 4 1 5",
"北	2 4 4 1 6",
"名	1 5 3 2 5 4",
"明	2 5 4 4 12 5 4 4",
"毛	14 4 4 6",
"門	2 5 4 4 2 5 4 4",
"夜	123 4 1 2 2 5 3 3",
"友	4 1 5 3",
"用	12 5 2 4 4",
"来	4 2 4 1 3 1 3",
"力	5 1",
"立	123 4 23 12 4",
"林	4 2 1 3 4 2 1 3",
"話	123 4 4 4 2 5 4 14 4 2 2 5 4",
"悪	4 2 5 4 2 2 4 12 6 3 3", /* crap */
"安	123 123 5 6 1 4",
"暗	2 5 4 4 123 4 23 12 4 2 5 4 4",
"意	123 4 23 12 4 2 5 4 4 12 6 3 3",
"引	5 4 56 2",
"運	123 5 4 2 5 4 4 4 2 234 125 346",
"駅	4 4 4 2 56 123 123 123 123 5 4 2 3",
"園	2 5 4 2 4 2 5 4 1 2 1 3",
"遠	4 2 4 2 5 4 1 2 1 3 234 125 346",
"屋	5 4 12 4 6 23 4 2 4",
"温	34 34 4 2 5 4 4 2 5 2 2 4",
"化	1 2 1 6",
"科	14 4 2 1 3 3 3 4 2",
"荷	4 2 2 1 2 4 2 2 5 4",
"歌	4 2 2 5 4 4 2 2 5 4 1 45 1 3",
"画	4 2 5 2 4 4 6 2",
"回	2 5 2 5 4 4",
"貝	2 5 4 4 4 1 3",
"界	2 5 2 4 4 1 3 12 2",
"開	2 5 4 4 2 5 4 4 4 4 12 2",
"絵	6 6 23 123 123 123 1 3 4 4 6 23",
"角	1 5 1 5 2 4 4",
"活	34 34 4 14 4 2 2 5 4",
"寒	123 123 5 4 2 2 4 4 1 3 3 3",
"感	12 4 4 2 5 4 23 1 123 12 6 23 23",
"岸	2 6 2 12 4 4 4 2",
"岩	2 6 2 4 1 2 5 4",
"顔	123 4 23 12 4 12 1 1 1 4 12 2 5 4 4 4 1 2",
"記	34 4 4 4 2 5 4 5 4 6",
"起	4 2 4 2 4 12 46 5 4 6",
"帰	2 12 5 4 4 123 5 2 5 2",
"期	4 2 2 4 4 4 12 23 12 5 4 4",
"客	123 123 5 1 5 3 2 5 4",
"究	123 123 5 1 3 12 456",
"急	1 5 5 4 4 12 6 23 23",
"級	6 6 23 2 12 23 12 5 3",
"球	",
"去	",
"魚	",
"教	",
"強	",
"橋	",
"局	",
"近	",
"銀	",
"苦	",
"君	",
"兄	",
"形	",
"計	",
"決	",
"県	",
"研	",
"原	",
"庫	",
"午	",
"後	",
"語	",
"公	",
"広	",
"交	",
"向	",
"黄	",
"号	",
"根	",
"才	",
"細	",
"算	",
"止	",
"仕	",
"市	",
"死	",
"使	",
"始	",
"指	",
"次	",
"寺	",
"自	",
"事	",
"持	",
"室	",
"実	",
"社	",
"者	",
"弱	",
"主	",
"取	",
"首	",
"受	",
"終	",
"週	",
"集	",
"住	",
"重	",
"所	",
"暑	",
"助	",
"昭	",
"勝	",
"乗	",
"場	",
"食	",
"申	",
"身	",
"新	",
"神	",
"深	",
"進	",
"親	",
"図	",
"数	",
"世	",
"星	",
"晴	",
"船	",
"全	",
"送	",
"太	",
"体	",
"待	",
"台	",
"第	",
"炭	",
"茶	",
"着	",
"注	",
"柱	",
"昼	",
"追	",
"通	",
"弟	",
"鉄	",
"店	",
"点	",
"電	",
"都	",
"度	",
"刀	",
"投	",
"島	",
"答	",
"頭	"
);

	var strokes = "";
	var directions = "diag_left down diag_right right right_down down_right".split(" ");

	startup = function() {
		updateString();
	}

	closeDirections = function () {
		document.getElementById("directionsContainer").innerHTML = "";
	}

	insert = function(n) {
		strokes=strokes+n;
		updateString();
	}
	backspace = function() {
		strokes=strokes.slice(0,-1);
		updateString();
	}

	updateString = function() {
		var strokeHTML = "";
		for (j in strokes) {
			d = directions[strokes[j]-1];
			strokeHTML = strokeHTML + '<img src="arrows/' + d + '.png" alt="' + d + '">';
		}
		if (strokeHTML == "") {
			document.getElementById("examples").innerHTML=
			'<h2>Introductory examples :: 初めの実例</h2><table>'+
			'<tr><td class="kanji">日</td><td><img src="arrows/down.png"><img src="arrows/right_down.png"><img src="arrows/right.png"><img src="arrows/right.png"> <td>Strokes are drawn in the standard Chinese order</td></tr>' +
			'<tr><td class="kanji">心</td><td><img src="arrows/diag_left.png"><img src="arrows/down_right.png"><img src="arrows/diag_right.png"><img src="arrows/diag_right.png"> <td>Small hooks and flicks are ignored</td></tr>' +
			'<tr><td class="kanji">女</td><td><img src="arrows/down_right.png"><img src="arrows/diag_left.png"><img src="arrows/right.png"> <td>Angles are flexible</td></tr>' +
			'<tr><td class="kanji">子</td><td><img src="arrows/right_down.png"><img src="arrows/down.png"><img src="arrows/right.png"> <td>The general stroke direction is all that matters</td></tr>' +
			'</table>';
		} else {
			document.getElementById("examples").innerHTML="";
		}
		document.getElementById("strokelist").innerHTML=strokeHTML;
		lookup(strokes);
	}

	
	lookup = function(inStrokes) {
		var exact = ""
		var start = ""
		var onrad = ""
		var cross = ""

		var kanji, strokes, info
		var debug = ""
		var exactCount = 0
		var exactItem

		if (inStrokes.length > 0) 
		{
			for (entry in dict) 
			{
				item = dict[entry].split("\t")

				kanji      = item[0];
				strokes    = item[1].split(" ");

				info = '<span class="match" onclick="define('+entry+')">'+kanji+'</span> '

				//Check for exact match
				if (strokes.length == inStrokes.length) {
					match = true;
					for (s in strokes) 
						if (strokes[s].indexOf(inStrokes[s]) == -1) 
							match = false;

					if (match) exact += info;
				}

				//Check for exact match at beginning of a kanji's stroke set
				else if (strokes.length > inStrokes.length) {
					match = true;
					for (s in inStrokes) 
						if (strokes[s].indexOf(inStrokes[s]) == -1) 
							match = false;

					if (match) start += info;
				}

				//Check for out-of-order matches and order results by how close they are
				

			}
		} 
		else 
		{
			/*
			exact += "<span class='notice'>hQèTX0</span>"
			start += "<span class='notice'>R0k0TX0</span>"
			onrad += "<span class='notice'>-Nk0TX0</span>"
			cross += "<span class='notice'>-Nk0TX0 (mid-radical)</span>"
			*/
		}

		document.getElementById("exact").innerHTML = exact;
		document.getElementById("start").innerHTML = start;

		if (exactCount == 1) 
		{
			define(exactItem);
		}
	}

	define = function(id) 
	{
		item = dict[id].split("\t")
		var kanji      = item[0]
		var strokes    = item[1].replace(" ","")

		var def = kanji;
		//var def = kanji+'<span class="index">#'+(id*1+1)+': '+strokes.length+' strokes ('+strokes+')</span>'
		document.getElementById("exact").innerHTML = def
	}


</script>
<style type="text/css">
	td {vertical-align: top;}
	body {font-family: Verdana; }
	td.button {background:#ddd;}
	td.button img {width:50px}
	td.button:hover{background:#bfb;}
	#matchlist span.match:hover {background: #bfb;}
	#workspace { padding-left: 25px; vertical-align: top; width: 100%;}
	#exact { font-size: 30pt; }
	#start { font-size: 30pt; }
	#strokelist { background: #cfc; padding: 0.5em; height: 25px; width: 100%;}
	#strokelist img {width: 25px; height: 25px;}
	#editing {margin-bottom: 15px;}
	#heading {border-bottom: 2px solid #ccc; margin-bottom: 2em; }
	#directions {background: #eee; margin-bottom: 20px; margin-top: -20px; padding: 1em; color: #777; font-size: 10pt; width: 600px;}
	#examples { font-size: 10pt; color: #888; }
	#examples td {color: #888; vertical-align: middle; padding-right: 1em;}
	#examples td.kanji {font-size: 30pt; }
	#examples img {height: 30px;}
	#examples table {padding-left: 20px; }
	#examples h2 {padding-left: 20px; font-size: 12pt; }
	#purpose {margin-left: 200px; font-family: Verdana; font-size: 8pt; font-style: italic;}
	#phrasebox {font-size: 20pt; float: right;}

        #rikaichan-window { background: #def; border: 1px solid black; padding: 0.5em; margin: 0.5em;}

</style>

</head>
<body onLoad="startup()">

<div id="heading">
<img src="logo.png" height="50"><br>
<span id="purpose">Fast lookup of Chinese/Japanese characters by stroke direction</span>
</div>

<div id="directionsContainer">
<div id="directions">
<div style="float:right;"><a href="javascript:closeDirections()">Close</a></div>
<br>To best use this site, you will want browser-based translation software such as 
<ul>
<li><a href="http://www.polarcloud.com/rikaichan/">rikaichan</a> (for <a href="http://www.firefox.com/">Mozilla Firefox</a>) or </li>
<li><a href="https://chrome.google.com/webstore/detail/jipdnfibhldikgcjhfnomkfpcebammhp">rikaikun</a> (for <a href="http://www.google.com/chrome">Google Chrome</a>),</li>
</ul>
and you will need a sense/intuition for <a href="http://en.wikipedia.org/wiki/Stroke_order">stroke order</a>.
</ol>
</div>
</div>


<table id="main"><tr>
<td>

	<table id="buttons">
		<tr>
			<td class="button" onclick="insert(4)"> <img src="arrows/right.png"> </td>
			<td class="button" onclick="insert(6)"> <img src="arrows/down_right.png"> </td>
		</tr>
		<tr>
			<td class="button" onclick="insert(2)"> <img src="arrows/down.png"> </td>
			<td class="button" onclick="insert(5)"> <img src="arrows/right_down.png"> </td>
		</tr>
		<tr>
			<td class="button" onclick="insert(1)"> <img src="arrows/diag_left.png"> </td>
			<td class="button" onclick="insert(3)"> <img src="arrows/diag_right.png"> </td>
		</tr>
	</table>

</td>
<td id="workspace">
	<div id="editing">
	<input type="button" value="Backspace" name="backspace" id="backspace" onClick="backspace()">
	<!--<input type="text" id="phrasebox"></input>-->
	</div>

	<div id="strokelist"></div>
	<div id="matchlist">
		<div id="examples"></div>
		<div id="exact"></div>
		<div id="start"></div>
	</div>
        <div id="rikaichan-window"></div>
</td>
</tr></table>

</body>
</html>