rt 개체에 의하여 지정된 루비 텍스트의 위치를 반환하거나 설정한다.

인수
cssSelector : (스타일 선택자)
속성을 가질수 있는 엘레멘트()나 클라스(class) 이름 혹은 인식자(id)이다.

: (속성 문자열)
스타일 속성은 rt 개체에 의하여 지정된 루비 텍스트의 위치를 나타내는 문자열이다.

auto 디폴트이며, 루비 텍스트의 정렬방식을 브라우저가 결정한다. 아시아 표음문자(ideographic)의 경우 distribute-space 모드로, 영문 알파벳의 경우 center 모드가 추천된다.
left 루비 텍스트가 왼쪽에 정렬된다.
center 루비 텍스트가 중앙에 정렬된다.
베이스가 루비 텍스트보다 좁으면, 베이스가 루비 텍스트 폭의 중앙에 정렬된다.
right 루비 텍스트가 오른쪽에 정렬된다.
distribute-letter 루비 텍스트 너비가 베이스 너비보다 좁으면 루비 텍스트는 루비 베이스 너비에 고르게 분포된다. 만일 루비 텍스트 너비가 더 넓거나 같으면 루비 베이스가 루비 텍스트 너비의 중앙에 정렬된다.
distribute-space 루비 텍스트 너비가 베이스 너비보다 좁으면 루비 텍스트는 루비 베이스 너비에 고르게 분포된다. 만일 루비 텍스트 너비가 더 넓거나 같으면 루비 베이스가 루비 텍스트 너비의 중앙에 정렬된다.
line-edge 루비 텍스트가 줄 모서리에 인접하지 않으면 루비 텍스트는 중앙에 정렬된다. 줄에 인접하면 루비 텍스트의 사이드는 루비 베이트의 사이드와 맞춰진다.

이 속성은 currentStyle에서는 읽기전용이고, 그외의 개체에서는 읽기/쓰기이며, 디폴트값은 auto이다.

CSS(Cascading Style Sheets) 애트리뷰트는 상속되지 않는다.

특기

rubyAlign 속성은 ruby 개체에서 설정하고 rt 개체에서 정의한 루비 텍스트의 위치를 지정한다.

적용
개체scriptCSS IE 버전
참조
rubyAlign rubyPosition rubyOverhang

이 속성은 (영문)CSS3(Cascading Style Sheets Level 3)에서 정의되었다.


Ruby base (루비 베이스). Ruby text. (루비 텍스트)

rubyObj.style.rubyAlign=
<RUBY id=rubyObj style="ruby-align:center;color:blue">
Ruby base.
<RT style="color:red">Ruby text.</RT></RUBY>
<P>
<BUTTON onclick="rubyObj.style.rubyAlign='auto';showA.innerText=rubyObj.style.rubyAlign">auto</BUTTON>
<BUTTON onclick="rubyObj.style.rubyAlign='center';showA.innerText=rubyObj.style.rubyAlign">center</BUTTON>
<BUTTON onclick="rubyObj.style.rubyAlign='left';showA.innerText=rubyObj.style.rubyAlign">left</BUTTON>
<BUTTON onclick="rubyObj.style.rubyAlign='right';showA.innerText=rubyObj.style.rubyAlign">right</BUTTON>
<BUTTON onclick="rubyObj.style.rubyAlign='distribute-letter';showA.innerText=rubyObj.style.rubyAlign">distribute-letter</BUTTON>
<BUTTON onclick="rubyObj.style.rubyAlign='distribute-space';showA.innerText=rubyObj.style.rubyAlign">distribute-space</BUTTON>
<BUTTON onclick="rubyObj.style.rubyAlign='line-edge';showA.innerText=rubyObj.style.rubyAlign">line-edge</BUTTON>
</P>
<DIV>rubyObj.style.rubyAlign=<SPAN id=showA style="color:blue"></SPAN></DIV>