하루의 기록

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

웹에서 후리가나 표시하기

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

웹 문서에 후리가나를 달고 싶은 경우에 <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로 만듬