ruby-position property

Gets or sets a value that controls the position of the ruby text with respect to its base.

CSS3 Ruby Module, Section 4.1Internet Explorer 9

 

Syntax

ruby-position: above | inline

Property values

A variable of type String that specifies or receives one of the following values:

above

Default. Ruby text is positioned above the base text.

inline

Ruby text is positioned inline with the base text.

CSS information

Applies ToAll elements
Mediavisual
Inheritedno
Initial Value

Standards information

Remarks

The ruby-position property specifies the position of the ruby text defined by the rt object, and is set on the ruby object.

Examples

This example uses the ruby-position attribute and the ruby-position property to set the position of the ruby text. It uses an inline style sheet to set the ruby-position attribute to inline.

Code example: http://samples.msdn.microsoft.com/workshop/samples/author/dhtml/refs/rubyPosition.htm


<!DOCTYPE html>
<html>
<head>
  <title>rubyPosition Sample</title>
  <style>
    a {
      color: blue;
      text-decoration: underline;
      cursor: pointer;
    }

    .samplearea {
      width: 120px;
      text-align: center;
      height: 30px;
      background-color: #CFCFCF;
      border: 1px solid;
      border-top-color: #EFEFEF;
      border-left-color: #EFEFEF;
      border-right-color: #C0C0C0;
      border-bottom-color: #C0C0C0;
    }
  </style>
</head>

<body>
  <h1>rubyPosition Property Sample</h1>
  <p>This sample uses the <strong>rubyPosition</strong> property to set the position of ruby text.</p>
  <div class="samplearea">
    <ruby id="oRuby"><span style="font-family: Arial; font-size: 12pt;">Base text.</span>
      <rt><span style="font-family: Arial; font-size: 8pt; color: red;">Ruby text</span></rt>
    </ruby>
  </div>
  <p><em>The <strong>rubyPosition</strong> property supports the following possible values.  
     Select one of the values to apply it to the <strong>RUBY</strong> object through script.</em></p>
  <p>[ <a onclick="fnSwitch()">inline</a> | <a onclick="fnSwitch()">above</a> ]</p>
  <script>
    function fnSwitch() {
      document.getElementById('oRuby').style.rubyPosition = event.srcElement.innerText;
    }
  </script>
</body>
</html>

See also

CSSStyleDeclaration
currentStyle
runtimeStyle
style
Reference
ruby-align
ruby-overhang

 

 

Show:
© 2014 Microsoft