ruby-align property

Gets or sets a value that indicates how to align the ruby text content.

CSS3 Ruby Module, Section 4.2Internet Explorer 9

 

Syntax

ruby-align: auto | left | center | right | distribute-letter | distribute-space | line-edge

Property values

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

auto

Default. Browser determines how the ruby text is aligned. The recommended behavior for an ideographic (Asian character) ruby is to be aligned in the distribute-space mode. The recommended behavior for a Latin character ruby is to be aligned in the center mode.

left

Ruby text is left-aligned with the base.

center

Ruby text is centered within the width of the base. If the length of the base is smaller than the length of the ruby text, the base is centered within the width of the ruby text.

right

Ruby text is right-aligned with the base.

distribute-letter

Ruby text is evenly distributed across the width of the base if the width of the ruby text is smaller than the width of the base. If the width of the ruby text is at least the width of the base, the ruby text is center-aligned.

distribute-space

Ruby text is evenly distributed across the width of the base if the width of the ruby text is smaller than the width of the base. White space precedes the first and follows the last character in the ruby text, equal to half the kerning of the ruby text. If the width of the ruby text is at least the width of the base, the ruby text is centered.

line-edge

Ruby text is centered if it is not adjacent to a line edge. If it is adjacent to a line edge, the side of the ruby text lines up with the side of the base text.

CSS information

Applies ToAll elements
Mediavisual
Inheritedno
Initial Value

Standards information

Remarks

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

Examples

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

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


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

    .samplearea {
      width: 120px;
      text-align: center;
      height: 300px;
      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>rubyAlign Property Sample</h1>
  <p>This sample uses the <strong>rubyAlign</strong> property to set the alignment of the 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>rubyAlign</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>auto</a> | 
    <a>left</a> | 
    <a>center</a> | 
    <a>right</a> | 
    <a>distribute-letter</a> | 
    <a>distribute-space</a> | 
    <a>line-edge</a> ]</p>
  <script>
    var allAnchorElements = document.getElementsByTagName('a');

    for (var i = 0; i < allAnchorElements.length; i++) {
      allAnchorElements[i].addEventListener('click', fnSwitch, false);
    }

    function fnSwitch(evt) {
      document.getElementById('oRuby').style.rubyAlign = evt.srcElement.textContent;
    }
  </script>
</body>
</html>

See also

CSSStyleDeclaration
currentStyle
runtimeStyle
style
Reference
ruby-position
ruby-overhang

 

 

Show:
© 2014 Microsoft