'ruby-align' Example : ruby align : CSS Attributes and Javascript Style Properties HTML CSS TUTORIALS

HTML CSS TUTORIALS » CSS Attributes and Javascript Style Properties » ruby align »

'ruby-align' Example



    
<html>
<body>
<p>
Click in the following div element to change the ruby alignment to the left.
</p>
<div style="background-color:#EEEEEE; 
            width:200; 
            cursor:hand" 
     onclick="myRuby.style.rubyAlign='left'">
<ruby id="myRuby" style="ruby-align:right">
    <span style="font-family:Verdana; font-size:16pt">
    base text
    </span>
    <rt>
    <span style="font-family:Times New Roman; font-size: 14pt; color:red">
    ruby text
    </span>
</ruby>
</div>
</body>
</HTML>