<header>
  <h2>
	  <div style="float:right;margin:-2px">
		  <label class="pack-radio" style="height:2rem;width:3rem">
			<input type="radio" name="characterType" value="hiragana" ng-model="characterType"><span></span>
		  </label>
                  <span ng-click="toggleCharacterType('hiragana')"> Hiragana</span>
		  <label class="pack-radio" style="height:2rem;width:3rem">
			<input type="radio"  name="characterType" value="katakana" ng-model="characterType"><span></span>
		  </label>
                  <span ng-click="toggleCharacterType('katakana')"> Katakana</span>
      </div>
    Table
  </h2>  
</header>
<section role="kanatable">
  <table ng-if="orientation == 'portrait'">
    <tr>
      <td> <p class="romaji">a</p> <p ng-bind-template="{{characterType == 'hiragana' | iif : 'あ':'ア'}}" /> </td>
      <td> <p class="romaji">i</p> <p ng-bind-template="{{characterType == 'hiragana' | iif : 'い':'イ'}}" /> </td>
      <td> <p class="romaji">u</p> <p ng-bind-template="{{characterType == 'hiragana' | iif : 'う':'ウ'}}" /> </td>
      <td> <p class="romaji">e</p> <p ng-bind-template="{{characterType == 'hiragana' | iif : 'え':'エ'}}" /> </td>
      <td> <p class="romaji">o</p> <p ng-bind-template="{{characterType == 'hiragana' | iif : 'お':'オ'}}" /> </td>
    </tr>
    <tr>
      <td> <p class="romaji">ka</p> <p ng-bind-template="{{characterType == 'hiragana' | iif : 'か':'カ'}}" /> </td>
      <td> <p class="romaji">ki</p> <p ng-bind-template="{{characterType == 'hiragana' | iif : 'き':'キ'}}" /> </td>
      <td> <p class="romaji">ku</p> <p ng-bind-template="{{characterType == 'hiragana' | iif : 'く':'ク'}}" /> </td>
      <td> <p class="romaji">ke</p> <p ng-bind-template="{{characterType == 'hiragana' | iif : 'け':'ケ'}}" /> </td>
      <td> <p class="romaji">ko</p> <p ng-bind-template="{{characterType == 'hiragana' | iif : 'こ':'コ'}}" /> </td>
      <td> <p class="romaji">kya</p> <p ng-bind-template="{{characterType == 'hiragana' | iif : 'きゃ':'キャ'}}" style="color:#999999" /> </td>
      <td> <p class="romaji">kyu</p> <p ng-bind-template="{{characterType == 'hiragana' | iif : 'きゅ':'キュ'}}" style="color:#999999" /> </td>
      <td> <p class="romaji">kyo</p> <p ng-bind-template="{{characterType == 'hiragana' | iif : 'きょ':'キョ'}}" style="color:#999999" /> </td>
    </tr>
    <tr>
      <td> <p class="romaji">sa</p> <p ng-bind-template="{{characterType == 'hiragana' | iif : 'さ':'サ'}}" /> </td>
      <td> <p class="romaji">shi</p> <p ng-bind-template="{{characterType == 'hiragana' | iif : 'し':'シ'}}" /> </td>
      <td> <p class="romaji">su</p> <p ng-bind-template="{{characterType == 'hiragana' | iif : 'す':'ス'}}" /> </td>
      <td> <p class="romaji">se</p> <p ng-bind-template="{{characterType == 'hiragana' | iif : 'せ':'セ'}}" /> </td>
      <td> <p class="romaji">so</p> <p ng-bind-template="{{characterType == 'hiragana' | iif : 'そ':'ソ'}}" /> </td>
      <td> <p class="romaji">sha</p> <p ng-bind-template="{{characterType == 'hiragana' | iif : 'しゃ':'シャ'}}" style="color:#999999" /> </td>
      <td> <p class="romaji">shu</p> <p ng-bind-template="{{characterType == 'hiragana' | iif : 'しゅ':'シュ'}}" style="color:#999999" /> </td>
      <td> <p class="romaji">sho</p> <p ng-bind-template="{{characterType == 'hiragana' | iif : 'しょ':'ショ'}}" style="color:#999999" /> </td>
    </tr>
    <tr>
      <td> <p class="romaji">ta</p> <p ng-bind-template="{{characterType == 'hiragana' | iif : 'た':'タ'}}" /></td>
      <td> <p class="romaji">chi</p> <p ng-bind-template="{{characterType == 'hiragana' | iif : 'ち':'チ'}}" /></td>
      <td> <p class="romaji">tsu</p> <p ng-bind-template="{{characterType == 'hiragana' | iif : 'つ':'ツ'}}" /></td>
      <td> <p class="romaji">te</p> <p ng-bind-template="{{characterType == 'hiragana' | iif : 'て':'テ'}}" /></td>
      <td> <p class="romaji">to</p> <p ng-bind-template="{{characterType == 'hiragana' | iif : 'と':'ト'}}" /></td>
      <td> <p class="romaji">cha</p> <p ng-bind-template="{{characterType == 'hiragana' | iif : 'ちゃ':'チャ'}}" style="color:#999999" /> </td>
      <td> <p class="romaji">chu</p> <p ng-bind-template="{{characterType == 'hiragana' | iif : 'ちゅ':'チュ'}}" style="color:#999999" /> </td>
      <td> <p class="romaji">cho</p> <p ng-bind-template="{{characterType == 'hiragana' | iif : 'ちょ':'チョ'}}" style="color:#999999" /> </td>
    </tr>
    <tr>
      <td> <p class="romaji">na</p> <p ng-bind-template="{{characterType == 'hiragana' | iif : 'な':'ナ'}}" /></td>
      <td> <p class="romaji">ni</p> <p ng-bind-template="{{characterType == 'hiragana' | iif : 'に':'ニ'}}" /></td>
      <td> <p class="romaji">nu</p> <p ng-bind-template="{{characterType == 'hiragana' | iif : 'ぬ':'ヌ'}}" /></td>
      <td> <p class="romaji">ne</p> <p ng-bind-template="{{characterType == 'hiragana' | iif : 'ね':'ネ'}}" /></td>
      <td> <p class="romaji">no</p> <p ng-bind-template="{{characterType == 'hiragana' | iif : 'の':'ノ'}}" /></td>
      <td> <p class="romaji">nya</p> <p ng-bind-template="{{characterType == 'hiragana' | iif : 'にゃ':'ニャ'}}" style="color:#999999" /> </td>
      <td> <p class="romaji">nyu</p> <p ng-bind-template="{{characterType == 'hiragana' | iif : 'にゅ':'ニュ'}}" style="color:#999999" /> </td>
      <td> <p class="romaji">nyo</p> <p ng-bind-template="{{characterType == 'hiragana' | iif : 'にょ':'ニョ'}}" style="color:#999999" /> </td>
    </tr>
    <tr>
      <td> <p class="romaji">ha</p> <p ng-bind-template="{{characterType == 'hiragana' | iif : 'は':'ハ'}}" /></td>
      <td> <p class="romaji">hi</p> <p ng-bind-template="{{characterType == 'hiragana' | iif : 'ひ':'ヒ'}}" /></td>
      <td> <p class="romaji">fu</p> <p ng-bind-template="{{characterType == 'hiragana' | iif : 'ふ':'フ'}}" /></td>
      <td> <p class="romaji">he</p> <p ng-bind-template="{{characterType == 'hiragana' | iif : 'へ':'ヘ'}}" /></td>
      <td> <p class="romaji">ho</p> <p ng-bind-template="{{characterType == 'hiragana' | iif : 'ほ':'ホ'}}" /></td>
      <td> <p class="romaji">hya</p> <p ng-bind-template="{{characterType == 'hiragana' | iif : 'ひゃ':'ヒャ'}}" style="color:#999999" /> </td>
      <td> <p class="romaji">hyu</p> <p ng-bind-template="{{characterType == 'hiragana' | iif : 'ひゅ':'ヒュ'}}" style="color:#999999" /> </td>
      <td> <p class="romaji">hyo</p> <p ng-bind-template="{{characterType == 'hiragana' | iif : 'ひょ':'ヒョ'}}" style="color:#999999" /> </td>
    </tr>
    <tr>
      <td> <p class="romaji">ma</p> <p ng-bind-template="{{characterType == 'hiragana' | iif : 'ま':'マ'}}" /></td>
      <td> <p class="romaji">mi</p> <p ng-bind-template="{{characterType == 'hiragana' | iif : 'み':'ミ'}}" /></td>
      <td> <p class="romaji">mu</p> <p ng-bind-template="{{characterType == 'hiragana' | iif : 'む':'ム'}}" /></td>
      <td> <p class="romaji">me</p> <p ng-bind-template="{{characterType == 'hiragana' | iif : 'め':'メ'}}" /></td>
      <td> <p class="romaji">mo</p> <p ng-bind-template="{{characterType == 'hiragana' | iif : 'も':'モ'}}" /> </td>
      <td> <p class="romaji">mya</p> <p ng-bind-template="{{characterType == 'hiragana' | iif : 'みゃ':'ミャ'}}" style="color:#999999" /> </td>
      <td> <p class="romaji">myu</p> <p ng-bind-template="{{characterType == 'hiragana' | iif : 'みゅ':'ミュ'}}" style="color:#999999" /> </td>
      <td> <p class="romaji">myo</p> <p ng-bind-template="{{characterType == 'hiragana' | iif : 'みょ':'ミョ'}}" style="color:#999999" /> </td>
    </tr>
    <tr>
      <td> <p class="romaji">ya</p> <p ng-bind-template="{{characterType == 'hiragana' | iif : 'や':'ヤ'}}" /></td>
      <td>&nbsp;</td>
      <td> <p class="romaji">yu</p> <p ng-bind-template="{{characterType == 'hiragana' | iif : 'ゆ':'ユ'}}" /> </td>
      <td>&nbsp;</td>
      <td> <p class="romaji">yo</p> <p ng-bind-template="{{characterType == 'hiragana' | iif : 'よ':'ヨ'}}" /> </td>
    </tr>
    <tr>
      <td> <p class="romaji">ra</p> <p ng-bind-template="{{characterType == 'hiragana' | iif : 'ら':'ラ'}}" /></td>
      <td> <p class="romaji">ri</p> <p ng-bind-template="{{characterType == 'hiragana' | iif : 'り':'リ'}}" /></td>
      <td> <p class="romaji">ru</p> <p ng-bind-template="{{characterType == 'hiragana' | iif : 'る':'ル'}}" /></td>
      <td> <p class="romaji">re</p> <p ng-bind-template="{{characterType == 'hiragana' | iif : 'れ':'レ'}}" /></td>
      <td> <p class="romaji">ro</p> <p ng-bind-template="{{characterType == 'hiragana' | iif : 'ろ':'ロ'}}" /> </td>
      <td> <p class="romaji">rya</p> <p ng-bind-template="{{characterType == 'hiragana' | iif : 'りゃ':'リャ'}}" style="color:#999999" /> </td>
      <td> <p class="romaji">ryu</p> <p ng-bind-template="{{characterType == 'hiragana' | iif : 'りゅ':'リュ'}}" style="color:#999999" /> </td>
      <td> <p class="romaji">ryo</p> <p ng-bind-template="{{characterType == 'hiragana' | iif : 'りょ':'リョ'}}" style="color:#999999" /> </td>
    </tr>
    <tr>
      <td> <p class="romaji">wa</p> <p ng-bind-template="{{characterType == 'hiragana' | iif : 'わ':'ワ'}}" /></td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td> <p class="romaji">wo</p> <p ng-bind-template="{{characterType == 'hiragana' | iif : 'を':'ヲ'}}" /> </td>
    </tr>
    <tr>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td> <p class="romaji">n</p> <p ng-bind-template="{{characterType == 'hiragana' | iif : 'ん':'ン'}}" /></td>
    </tr>
    <tr>
      <td> <p class="romaji">ga</p> <p ng-bind-template="{{characterType == 'hiragana' | iif : 'が':'ガ'}}" /></td>
      <td> <p class="romaji">gi</p> <p ng-bind-template="{{characterType == 'hiragana' | iif : 'ぎ':'ギ'}}" /></td>
      <td> <p class="romaji">gu</p> <p ng-bind-template="{{characterType == 'hiragana' | iif : 'ぐ':'グ'}}" /></td>
      <td> <p class="romaji">ge</p> <p ng-bind-template="{{characterType == 'hiragana' | iif : 'げ':'ゲ'}}" /></td>
      <td> <p class="romaji">go</p> <p ng-bind-template="{{characterType == 'hiragana' | iif : 'ご':'ゴ'}}" /></td>
      <td> <p class="romaji">gya</p> <p ng-bind-template="{{characterType == 'hiragana' | iif : 'ぎゃ':'ギャ'}}" style="color:#999999" /> </td>
      <td> <p class="romaji">gyu</p> <p ng-bind-template="{{characterType == 'hiragana' | iif : 'ぎゅ':'ギュ'}}" style="color:#999999" /> </td>
      <td> <p class="romaji">gyo</p> <p ng-bind-template="{{characterType == 'hiragana' | iif : 'ぎょ':'ギョ'}}" style="color:#999999" /> </td>
    </tr>
    <tr>
      <td> <p class="romaji">za</p> <p ng-bind-template="{{characterType == 'hiragana' | iif : 'ざ':'ザ'}}" /></td>
      <td> <p class="romaji">ji</p> <p ng-bind-template="{{characterType == 'hiragana' | iif : 'じ':'ジ'}}" /></td>
      <td> <p class="romaji">zu</p> <p ng-bind-template="{{characterType == 'hiragana' | iif : 'ず':'ズ'}}" /></td>
      <td> <p class="romaji">ze</p> <p ng-bind-template="{{characterType == 'hiragana' | iif : 'ぜ':'ゼ'}}" /></td>
      <td> <p class="romaji">zo</p> <p ng-bind-template="{{characterType == 'hiragana' | iif : 'ぞ':'ゾ'}}" /></td>
      <td> <p class="romaji">ja</p> <p ng-bind-template="{{characterType == 'hiragana' | iif : 'じゃ':'ジャ'}}" style="color:#999999" /> </td>
      <td> <p class="romaji">ju</p> <p ng-bind-template="{{characterType == 'hiragana' | iif : 'じゅ':'ジュ'}}" style="color:#999999" /> </td>
      <td> <p class="romaji">jo</p> <p ng-bind-template="{{characterType == 'hiragana' | iif : 'じょ':'ジョ'}}" style="color:#999999" /> </td>
    </tr>
    <tr>
      <td> <p class="romaji">da</p> <p ng-bind-template="{{characterType == 'hiragana' | iif : 'だ':'ダ'}}" /></td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td> <p class="romaji">de</p> <p ng-bind-template="{{characterType == 'hiragana' | iif : 'で':'デ'}}" /></td>
      <td> <p class="romaji">do</p> <p ng-bind-template="{{characterType == 'hiragana' | iif : 'ど':'ド'}}" /></td>
    </tr>
    <tr>
      <td> <p class="romaji">ba</p> <p ng-bind-template="{{characterType == 'hiragana' | iif : 'ば':'バ'}}" /></td>
      <td> <p class="romaji">bi</p> <p ng-bind-template="{{characterType == 'hiragana' | iif : 'び':'ビ'}}" /></td>
      <td> <p class="romaji">bu</p> <p ng-bind-template="{{characterType == 'hiragana' | iif : 'ぶ':'ブ'}}" /></td>
      <td> <p class="romaji">be</p> <p ng-bind-template="{{characterType == 'hiragana' | iif : 'べ':'ベ'}}" /></td>
      <td> <p class="romaji">bo</p> <p ng-bind-template="{{characterType == 'hiragana' | iif : 'ぼ':'ボ'}}" /></td>
      <td> <p class="romaji">bya</p> <p ng-bind-template="{{characterType == 'hiragana' | iif : 'びゃ':'ビャ'}}" style="color:#999999" /> </td>
      <td> <p class="romaji">byu</p> <p ng-bind-template="{{characterType == 'hiragana' | iif : 'びゅ':'ビュ'}}" style="color:#999999" /> </td>
      <td> <p class="romaji">byo</p> <p ng-bind-template="{{characterType == 'hiragana' | iif : 'びょ':'ビョ'}}" style="color:#999999" /> </td>
    </tr>
    <tr>
      <td> <p class="romaji">pa</p> <p ng-bind-template="{{characterType == 'hiragana' | iif : 'ぱ':'パ'}}" /></td>
      <td> <p class="romaji">pi</p> <p ng-bind-template="{{characterType == 'hiragana' | iif : 'ぴ':'ピ'}}" /></td>
      <td> <p class="romaji">pu</p> <p ng-bind-template="{{characterType == 'hiragana' | iif : 'ぷ':'プ'}}" /></td>
      <td> <p class="romaji">pe</p> <p ng-bind-template="{{characterType == 'hiragana' | iif : 'ぺ':'ペ'}}" /></td>
      <td> <p class="romaji">po</p> <p ng-bind-template="{{characterType == 'hiragana' | iif : 'ぽ':'ポ'}}" /></td>
      <td> <p class="romaji">pya</p> <p ng-bind-template="{{characterType == 'hiragana' | iif : 'ぴゃ':'ピャ'}}" style="color:#999999" /> </td>
      <td> <p class="romaji">pyu</p> <p ng-bind-template="{{characterType == 'hiragana' | iif : 'ぴゅ':'ピュ'}}" style="color:#999999" /> </td>
      <td> <p class="romaji">pyo</p> <p ng-bind-template="{{characterType == 'hiragana' | iif : 'ぴょ':'ピョ'}}" style="color:#999999" /> </td>
    </tr>
  </table>

  <table ng-if="orientation == 'landscape'">
    <tr>
      <td> <p class="romaji">a</p> <p ng-bind-template="{{characterType == 'hiragana' | iif : 'あ':'ア'}}" /> </td>
      <td> <p class="romaji">ka</p> <p ng-bind-template="{{characterType == 'hiragana' | iif : 'か':'カ'}}" /> </td>
      <td> <p class="romaji">sa</p> <p ng-bind-template="{{characterType == 'hiragana' | iif : 'さ':'サ'}}" /> </td>
      <td> <p class="romaji">ta</p> <p ng-bind-template="{{characterType == 'hiragana' | iif : 'た':'タ'}}" /></td>
      <td> <p class="romaji">na</p> <p ng-bind-template="{{characterType == 'hiragana' | iif : 'な':'ナ'}}" /></td>
      <td> <p class="romaji">ha</p> <p ng-bind-template="{{characterType == 'hiragana' | iif : 'は':'ハ'}}" /></td>
      <td> <p class="romaji">ma</p> <p ng-bind-template="{{characterType == 'hiragana' | iif : 'ま':'マ'}}" /></td>
      <td> <p class="romaji">ya</p> <p ng-bind-template="{{characterType == 'hiragana' | iif : 'や':'ヤ'}}" /></td>
      <td> <p class="romaji">ra</p> <p ng-bind-template="{{characterType == 'hiragana' | iif : 'ら':'ラ'}}" /></td>
      <td> <p class="romaji">wa</p> <p ng-bind-template="{{characterType == 'hiragana' | iif : 'わ':'ワ'}}" /></td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td> <p class="romaji">ga</p> <p ng-bind-template="{{characterType == 'hiragana' | iif : 'が':'ガ'}}" /></td>
      <td> <p class="romaji">za</p> <p ng-bind-template="{{characterType == 'hiragana' | iif : 'ざ':'ザ'}}" /></td>
      <td> <p class="romaji">da</p> <p ng-bind-template="{{characterType == 'hiragana' | iif : 'だ':'ダ'}}" /></td>
      <td> <p class="romaji">ba</p> <p ng-bind-template="{{characterType == 'hiragana' | iif : 'ば':'バ'}}" /></td>
      <td> <p class="romaji">pa</p> <p ng-bind-template="{{characterType == 'hiragana' | iif : 'ぱ':'パ'}}" /></td>
    </tr>
    <tr>
      <td> <p class="romaji">i</p> <p ng-bind-template="{{characterType == 'hiragana' | iif : 'い':'イ'}}" /> </td>
      <td> <p class="romaji">ki</p> <p ng-bind-template="{{characterType == 'hiragana' | iif : 'き':'キ'}}" /> </td>
      <td> <p class="romaji">shi</p> <p ng-bind-template="{{characterType == 'hiragana' | iif : 'し':'シ'}}" /> </td>
      <td> <p class="romaji">chi</p> <p ng-bind-template="{{characterType == 'hiragana' | iif : 'ち':'チ'}}" /></td>
      <td> <p class="romaji">ni</p> <p ng-bind-template="{{characterType == 'hiragana' | iif : 'に':'ニ'}}" /></td>
      <td> <p class="romaji">hi</p> <p ng-bind-template="{{characterType == 'hiragana' | iif : 'ひ':'ヒ'}}" /></td>
      <td> <p class="romaji">mi</p> <p ng-bind-template="{{characterType == 'hiragana' | iif : 'み':'ミ'}}" /></td>
      <td>&nbsp;</td>
      <td> <p class="romaji">ri</p> <p ng-bind-template="{{characterType == 'hiragana' | iif : 'り':'リ'}}" /></td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td> <p class="romaji">gi</p> <p ng-bind-template="{{characterType == 'hiragana' | iif : 'ぎ':'ギ'}}" /></td>
      <td> <p class="romaji">ji</p> <p ng-bind-template="{{characterType == 'hiragana' | iif : 'じ':'ジ'}}" /></td>
      <td>&nbsp;</td>
      <td> <p class="romaji">bi</p> <p ng-bind-template="{{characterType == 'hiragana' | iif : 'び':'ビ'}}" /></td>
      <td> <p class="romaji">pi</p> <p ng-bind-template="{{characterType == 'hiragana' | iif : 'ぴ':'ピ'}}" /></td>
    </tr>
    <tr>
      <td> <p class="romaji">u</p> <p ng-bind-template="{{characterType == 'hiragana' | iif : 'う':'ウ'}}" /> </td>
      <td> <p class="romaji">ku</p> <p ng-bind-template="{{characterType == 'hiragana' | iif : 'く':'ク'}}" /> </td>
      <td> <p class="romaji">su</p> <p ng-bind-template="{{characterType == 'hiragana' | iif : 'す':'ス'}}" /> </td>
      <td> <p class="romaji">tsu</p> <p ng-bind-template="{{characterType == 'hiragana' | iif : 'つ':'ツ'}}" /></td>
      <td> <p class="romaji">nu</p> <p ng-bind-template="{{characterType == 'hiragana' | iif : 'ぬ':'ヌ'}}" /></td>
      <td> <p class="romaji">fu</p> <p ng-bind-template="{{characterType == 'hiragana' | iif : 'ふ':'フ'}}" /></td>
      <td> <p class="romaji">mu</p> <p ng-bind-template="{{characterType == 'hiragana' | iif : 'む':'ム'}}" /></td>
      <td> <p class="romaji">yu</p> <p ng-bind-template="{{characterType == 'hiragana' | iif : 'ゆ':'ユ'}}" /> </td>
      <td> <p class="romaji">ru</p> <p ng-bind-template="{{characterType == 'hiragana' | iif : 'る':'ル'}}" /></td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td> <p class="romaji">gu</p> <p ng-bind-template="{{characterType == 'hiragana' | iif : 'ぐ':'グ'}}" /></td>
      <td> <p class="romaji">zu</p> <p ng-bind-template="{{characterType == 'hiragana' | iif : 'ず':'ズ'}}" /></td>
      <td>&nbsp;</td>
      <td> <p class="romaji">bu</p> <p ng-bind-template="{{characterType == 'hiragana' | iif : 'ぶ':'ブ'}}" /></td>
      <td> <p class="romaji">pu</p> <p ng-bind-template="{{characterType == 'hiragana' | iif : 'ぷ':'プ'}}" /></td>
    </tr>
    <tr>
      <td> <p class="romaji">e</p> <p ng-bind-template="{{characterType == 'hiragana' | iif : 'え':'エ'}}" /> </td>
      <td> <p class="romaji">ke</p> <p ng-bind-template="{{characterType == 'hiragana' | iif : 'け':'ケ'}}" /> </td>
      <td> <p class="romaji">se</p> <p ng-bind-template="{{characterType == 'hiragana' | iif : 'せ':'セ'}}" /> </td>
      <td> <p class="romaji">te</p> <p ng-bind-template="{{characterType == 'hiragana' | iif : 'て':'テ'}}" /></td>
      <td> <p class="romaji">ne</p> <p ng-bind-template="{{characterType == 'hiragana' | iif : 'ね':'ネ'}}" /></td>
      <td> <p class="romaji">he</p> <p ng-bind-template="{{characterType == 'hiragana' | iif : 'へ':'ヘ'}}" /></td>
      <td> <p class="romaji">me</p> <p ng-bind-template="{{characterType == 'hiragana' | iif : 'め':'メ'}}" /></td>
      <td>&nbsp;</td>
      <td> <p class="romaji">re</p> <p ng-bind-template="{{characterType == 'hiragana' | iif : 'れ':'レ'}}" /></td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td> <p class="romaji">ge</p> <p ng-bind-template="{{characterType == 'hiragana' | iif : 'げ':'ゲ'}}" /></td>
      <td> <p class="romaji">ze</p> <p ng-bind-template="{{characterType == 'hiragana' | iif : 'ぜ':'ゼ'}}" /></td>
      <td> <p class="romaji">de</p> <p ng-bind-template="{{characterType == 'hiragana' | iif : 'で':'デ'}}" /></td>
      <td> <p class="romaji">be</p> <p ng-bind-template="{{characterType == 'hiragana' | iif : 'べ':'ベ'}}" /></td>
      <td> <p class="romaji">pe</p> <p ng-bind-template="{{characterType == 'hiragana' | iif : 'ぺ':'ペ'}}" /></td>
    </tr>
    <tr>
      <td> <p class="romaji">o</p> <p ng-bind-template="{{characterType == 'hiragana' | iif : 'お':'オ'}}" /> </td>
      <td> <p class="romaji">ko</p> <p ng-bind-template="{{characterType == 'hiragana' | iif : 'こ':'コ'}}" /> </td>
      <td> <p class="romaji">so</p> <p ng-bind-template="{{characterType == 'hiragana' | iif : 'そ':'ソ'}}" /> </td>
      <td> <p class="romaji">to</p> <p ng-bind-template="{{characterType == 'hiragana' | iif : 'と':'ト'}}" /></td>
      <td> <p class="romaji">no</p> <p ng-bind-template="{{characterType == 'hiragana' | iif : 'の':'ノ'}}" /></td>
      <td> <p class="romaji">ho</p> <p ng-bind-template="{{characterType == 'hiragana' | iif : 'ほ':'ホ'}}" /></td>
      <td> <p class="romaji">mo</p> <p ng-bind-template="{{characterType == 'hiragana' | iif : 'も':'モ'}}" /> </td>
      <td> <p class="romaji">yo</p> <p ng-bind-template="{{characterType == 'hiragana' | iif : 'よ':'ヨ'}}" /> </td>
      <td> <p class="romaji">ro</p> <p ng-bind-template="{{characterType == 'hiragana' | iif : 'ろ':'ロ'}}" /> </td>
      <td> <p class="romaji">wo</p> <p ng-bind-template="{{characterType == 'hiragana' | iif : 'を':'ヲ'}}" /> </td>
      <td> <p class="romaji">n</p> <p ng-bind-template="{{characterType == 'hiragana' | iif : 'ん':'ン'}}" /></td>
      <td>&nbsp;</td>
      <td> <p class="romaji">go</p> <p ng-bind-template="{{characterType == 'hiragana' | iif : 'ご':'ゴ'}}" /></td>
      <td> <p class="romaji">zo</p> <p ng-bind-template="{{characterType == 'hiragana' | iif : 'ぞ':'ゾ'}}" /></td>
      <td> <p class="romaji">do</p> <p ng-bind-template="{{characterType == 'hiragana' | iif : 'ど':'ド'}}" /></td>
      <td> <p class="romaji">bo</p> <p ng-bind-template="{{characterType == 'hiragana' | iif : 'ぼ':'ボ'}}" /></td>
      <td> <p class="romaji">po</p> <p ng-bind-template="{{characterType == 'hiragana' | iif : 'ぽ':'ポ'}}" /></td>
    </tr>
    <tr>
      <td colspan="10">&nbsp;</td>
    </tr>
    <tr>
      <td>&nbsp;</td>
      <td> <p class="romaji">kya</p> <p ng-bind-template="{{characterType == 'hiragana' | iif : 'きゃ':'キャ'}}" style="color:#999999" /> </td>
      <td> <p class="romaji">sha</p> <p ng-bind-template="{{characterType == 'hiragana' | iif : 'しゃ':'シャ'}}" style="color:#999999" /> </td>
      <td> <p class="romaji">cha</p> <p ng-bind-template="{{characterType == 'hiragana' | iif : 'ちゃ':'チャ'}}" style="color:#999999" /> </td>
      <td> <p class="romaji">nya</p> <p ng-bind-template="{{characterType == 'hiragana' | iif : 'にゃ':'ニャ'}}" style="color:#999999" /> </td>
      <td> <p class="romaji">hya</p> <p ng-bind-template="{{characterType == 'hiragana' | iif : 'ひゃ':'ヒャ'}}" style="color:#999999" /> </td>
      <td> <p class="romaji">mya</p> <p ng-bind-template="{{characterType == 'hiragana' | iif : 'みゃ':'ミャ'}}" style="color:#999999" /> </td>
      <td>&nbsp;</td>
      <td> <p class="romaji">rya</p> <p ng-bind-template="{{characterType == 'hiragana' | iif : 'りゃ':'リャ'}}" style="color:#999999" /> </td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td> <p class="romaji">gya</p> <p ng-bind-template="{{characterType == 'hiragana' | iif : 'ぎゃ':'ギャ'}}" style="color:#999999" /> </td>
      <td> <p class="romaji">ja</p> <p ng-bind-template="{{characterType == 'hiragana' | iif : 'じゃ':'ジャ'}}" style="color:#999999" /> </td>
      <td>&nbsp;</td>
      <td> <p class="romaji">bya</p> <p ng-bind-template="{{characterType == 'hiragana' | iif : 'びゃ':'ビャ'}}" style="color:#999999" /> </td>
      <td> <p class="romaji">pya</p> <p ng-bind-template="{{characterType == 'hiragana' | iif : 'ぴゃ':'ピャ'}}" style="color:#999999" /> </td>
    </tr>
    <tr>
      <td>&nbsp;</td>
      <td> <p class="romaji">kyu</p> <p ng-bind-template="{{characterType == 'hiragana' | iif : 'きゅ':'キュ'}}" style="color:#999999" /> </td>
      <td> <p class="romaji">shu</p> <p ng-bind-template="{{characterType == 'hiragana' | iif : 'しゅ':'シュ'}}" style="color:#999999" /> </td>
      <td> <p class="romaji">chu</p> <p ng-bind-template="{{characterType == 'hiragana' | iif : 'ちゅ':'チュ'}}" style="color:#999999" /> </td>
      <td> <p class="romaji">nyu</p> <p ng-bind-template="{{characterType == 'hiragana' | iif : 'にゅ':'ニュ'}}" style="color:#999999" /> </td>
      <td> <p class="romaji">hyu</p> <p ng-bind-template="{{characterType == 'hiragana' | iif : 'ひゅ':'ヒュ'}}" style="color:#999999" /> </td>
      <td> <p class="romaji">myu</p> <p ng-bind-template="{{characterType == 'hiragana' | iif : 'みゅ':'ミュ'}}" style="color:#999999" /> </td>
      <td>&nbsp;</td>
      <td> <p class="romaji">ryu</p> <p ng-bind-template="{{characterType == 'hiragana' | iif : 'りゅ':'リュ'}}" style="color:#999999" /> </td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td> <p class="romaji">gyu</p> <p ng-bind-template="{{characterType == 'hiragana' | iif : 'ぎゅ':'ギュ'}}" style="color:#999999" /> </td>
      <td> <p class="romaji">ju</p> <p ng-bind-template="{{characterType == 'hiragana' | iif : 'じゅ':'ジュ'}}" style="color:#999999" /> </td>
      <td>&nbsp;</td>
      <td> <p class="romaji">byu</p> <p ng-bind-template="{{characterType == 'hiragana' | iif : 'びゅ':'ビュ'}}" style="color:#999999" /> </td>
      <td> <p class="romaji">pyu</p> <p ng-bind-template="{{characterType == 'hiragana' | iif : 'ぴゅ':'ピュ'}}" style="color:#999999" /> </td>
    </tr>
    <tr>
      <td>&nbsp;</td>
      <td> <p class="romaji">kyo</p> <p ng-bind-template="{{characterType == 'hiragana' | iif : 'きょ':'キョ'}}" style="color:#999999" /> </td>
      <td> <p class="romaji">sho</p> <p ng-bind-template="{{characterType == 'hiragana' | iif : 'しょ':'ショ'}}" style="color:#999999" /> </td>
      <td> <p class="romaji">cho</p> <p ng-bind-template="{{characterType == 'hiragana' | iif : 'ちょ':'チョ'}}" style="color:#999999" /> </td>
      <td> <p class="romaji">nyo</p> <p ng-bind-template="{{characterType == 'hiragana' | iif : 'にょ':'ニョ'}}" style="color:#999999" /> </td>
      <td> <p class="romaji">hyo</p> <p ng-bind-template="{{characterType == 'hiragana' | iif : 'ひょ':'ヒョ'}}" style="color:#999999" /> </td>
      <td> <p class="romaji">myo</p> <p ng-bind-template="{{characterType == 'hiragana' | iif : 'みょ':'ミョ'}}" style="color:#999999" /> </td>
      <td>&nbsp;</td>
      <td> <p class="romaji">ryo</p> <p ng-bind-template="{{characterType == 'hiragana' | iif : 'りょ':'リョ'}}" style="color:#999999" /> </td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td> <p class="romaji">gyo</p> <p ng-bind-template="{{characterType == 'hiragana' | iif : 'ぎょ':'ギョ'}}" style="color:#999999" /> </td>
      <td> <p class="romaji">jo</p> <p ng-bind-template="{{characterType == 'hiragana' | iif : 'じょ':'ジョ'}}" style="color:#999999" /> </td>
      <td>&nbsp;</td>
      <td> <p class="romaji">byo</p> <p ng-bind-template="{{characterType == 'hiragana' | iif : 'びょ':'ビョ'}}" style="color:#999999" /> </td>
      <td> <p class="romaji">pyo</p> <p ng-bind-template="{{characterType == 'hiragana' | iif : 'ぴょ':'ピョ'}}" style="color:#999999" /> </td>
    </tr>
  </table>

  <p>&nbsp;</p>
  <p>&nbsp;</p>
</section>
