ruby-position 속성의 정의 및 사용법

ruby-position 속성은
루비 주석(ruby annotations)을 기준 문자(ruby base)의 어느 위치에 배치할지를 지정합니다.

루비 주석과 기준 문자
루비 주석과 기준 문자

데모

다음의 CSS 데모로 ruby-position 속성의 사용 방법을 확인해 보세요.

CSS 데모: ruby-position 데모 버튼을 클릭해 보세요!

형식 구문

CSS 
selector {
    ruby-position: over | under
}

구문

CSS 
/* 키워드 값 */
ruby-position: over;
ruby-position: under;

/* 전역 값 */
ruby-position: inherit;
ruby-position: initial;
ruby-position: revert;
ruby-position: revert-layer;
ruby-position: unset;

형식 정의

ruby-position 속성의 형식 정의
적용 요소 루비 주석 컨테이너(ruby annotations containers)
상속 예
애니메이션 아니오

값

알아두세요!
명세서에서는 ruby-position 속성의 값으로 alternate와 inter-character도 정의하고 있지만,
많은 브라우저에서 지원하지 않아, 여기에서는 다루지 않았습니다. 브라우저 호환성을 참조하세요.

ruby-position 속성의 값
over 대부분의 브라우저 스타일시트에서 기본값으로 설정되어 있습니다.
루비 주석을 기준 문자 위쪽에 배치합니다. writing-mode 속성이 세로쓰기에서도 기준 문자 위쪽에 배치합니다.
under 루비 주석을 기준 문자 아래쪽에 배치합니다. writing-mode 속성이 세로쓰기에서도 기준 문자 아래쪽에 배치합니다.

현재 이 글을 작성하는 시점 기준으로, 대부분의 브라우저에서는 writing-mode 속성과 ruby-position을 함께 사용할 경우 명세서에 정의된 위치(예: 세로쓰기에서 왼쪽 또는 오른쪽)가 제대로 반영되지 않습니다. 이로 인해 루비 주석이 기준 문자와 겹치거나, 예상과 다른 위치에 표시되는 문제가 발생할 수 있습니다.
따라서, 실무에서는 세로쓰기와의 병용을 피하는 것이 좋습니다.

예제

HTML 
<h4>ruby-position: over</h4>
<ruby class="ruby-position-over">漢字<rt>かんじ</rt></ruby>
<h4>ruby-position: under</h4>
<ruby class="ruby-position-under">漢字<rt>かんじ</rt></ruby>
CSS 
.ruby-position-over {
    ruby-position: over;
}
.ruby-position-under {
    ruby-position: under;
}
ruby {
    font-size: 2em;
}
실제 적용된 모습

마지막 업데이트 정보: 2025-05-01

ruby-position 속성의 브라우저 호환성
속성과 값
데스크탑 Chrome
Chrome
데스크탑데스크탑 Edge
Edge
데스크탑 Firefox
Firefox
Safari
Safari
ruby-position 84 84 38 18.2
over 84 84 38 18.2
under 84 84 38 18.2
alternate 지원하지 않음 지원하지 않음 88 지원하지 않음
inter-character 84
부분 지원		 84
부분 지원		 지원하지 않음 18.2

caniuse.com에서 더 자세한 정보를 확인해 보세요.

명세서

ruby-position 속성의 명세서 사양
명세서 사양
ruby-position CSS Ruby Annotation Layout Module Level 1
#rubypos

같이 보기