하루의 기록

소프트웨어 개발과 독서와 이런 저런 관심사 늘어놓기

웹에서 후리가나 표시하기

일본어에서 한자 읽는 법을 한자 위에 작게 히라가나로 표기 하는 것을 후리가나라고 한다.

웹 문서에 후리가나를 달고 싶은 경우에 <ruby> 와 <rt> 태그를 사용할 수 있다. 위키피디아를 보면 후리가나용 인쇄 활자를 미국에서는 루비 타입이라는 호칭으로 불렀다고 하는데 태그명도 여기서 유래한듯 한다.

나츠메 소세키의 하이쿠1에 후리가나를 붙여 보았다.

<p>
  <ruby><rt>なん</rt></ruby>となく
  <ruby><rt>さむ</rt></ruby>いと<ruby><rt>われ</rt></ruby><ruby><rt>おも</rt>ふのみ</ruby>
  - <ruby><rt>なつ</rt><rt></rt><rt>そう</rt><rt>せき</rt></ruby>
</p>

なんとなく さむいとわれおもふのみ - なつそうせき

왠지 모르게 춥구나 하고 나는 생각이 들 뿐 - 나츠메 소세키

한자의 독음에 해당하는 히라가나를 <rt> 태그로 감싸면 되는데 후리가나에 해당하지 않는 히라가나까지 <ruby> 태그로 감싸면 후리가나 표기가 이상해진다.

아래는 문장 전체를 <ruby> 태그로 감싼 경우이다.

<p>
  <ruby><rt>わたし</rt>は
    今日<rt>きょう</rt>
    日本語<rt>にほんご</rt>を
    勉強<rt>べんきょう</rt>
    します。
  </ruby>
</p>

今日에 해당하는 독음인 きょう가 は今日에 걸쳐서 표시된다.

わたしは 今日きょう 日本語にほんごを 勉強べんきょう します。

아래와 같이 수정해야 잘 나온다.

<p>
    <ruby><rt>わたし</rt></ruby><ruby>今日<rt>きょう</rt></ruby>
    <ruby>日本語<rt>にほんご</rt></ruby><ruby>勉強<rt>べんきょう</rt></ruby>
    します。
  </ruby>
</p>

わたし今日きょう 日本語にほんご勉強べんきょう します。

<ruby> 태그가 지원되지 않는 웹브라우저를 위해 <rp> 태그로 폴백 처리2를 할 수 있다.

<ruby><rp>(</rp><rt>かん</rt><rp>)</rp><rp>(</rp><rt></rt><rp>)</rp>
</ruby>

<ruby> 태그가 지원되는 경우에는 (かん)() 로, 그렇지 않은 경우에는 漢(かん)字(じ)로 표시된다.

최신 웹 브라우저에서는 대부분 <ruby> 태그가 지원된다고 하니 경우에 따라 <rp> 태그를 사용할지 결정하면 되겠다.


  1. 박성민, 『하루하루 하이쿠』, 시와서, 2003, p. 140.
  2. <rp>: The Ruby Fallback Parenthesis element - Examples
이전 글: 블로깅의 가치
© 2014-2025 Jahyun Oh / Gatsby로 만듬