HTML에 요미가타다는 방법

원본의 출처는 http://harrys.co.kr/blog/lab/tag/%E6%BC%A2%E5%AD%97 여기 입니다


일본어 공부를 하다 보면 인터넷 상의 일본어를 읽을 때 読(よ)み方(がた)(읽는 방법)를 몰라서 어려움을 겪을 때가 많다. 본인의 블로그를 방문하는 사람들에게는 이런 불편함을 안겨주지 않도록 하자.

다음과 같은 태그를 사용하면 한자 위에 よみがた를 달아줄 수 있어 읽는 사람이 더 수월하게 읽을 수 있다.

<RUBY>
     <RB>漢字</RB>
     <RP>(</RP><RT style="font-size:70%;">かんじ</RT><RP>)</RP>
</RUBY>

즉, RB 태그 사이에는 よみがた를 달 한자를 써 주고, RT 태그 사이에는 よみがた를 달아주면 된다. RT 태그의 font-size 스타일을 이용하여 よみがた의 크기를 조절해 줄 수도 있다. 위의 태그를 적용시키면 아래와 같다.

漢字 (かんじ)

다만, 이 태그는 IE에서만 지원된다. 때문에 RP 태그 내부에 괄호를 넣어 주어서 IE에서는 괄호가 출력되지 않고 よみあが가 한자 위쪽에 달리도록 하고, 다른 브라우저에서는 괄호 안에 よみがた가 출력된다. 따라서 절대 RP 태그를 생략하면 안된다.