Export (0) Print
Expand All

ruby-overhang property

Gets or sets a value that indicates whether, and on which side, ruby text is allowed to partially overhang any adjacent text in addition to its own base, when the ruby text is wider than the ruby base.

CSS3 Ruby Module, Section 4.3Internet Explorer 9

 

Syntax

ruby-overhang: auto | whitespace | none

Property values

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

auto

Default. Ruby text overhangs any other text adjacent to the base text.

whitespace

Ruby text overhangs only white-space characters.

none

Ruby text overhangs only text adjacent to its base.

CSS information

Applies ToAll elements
Mediavisual
Inheritedno
Initial Value

Standards information

Remarks

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

Examples

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

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


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

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

<body>
  <h1>rubyOverhang Property Sample</h1>
  <p>This sample uses the <strong>rubyOverhang</strong> property to set the overhang 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>rubyOverhang</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(this)">auto</a> | <a onclick="fnSwitch(this)">end</a> | 
    <a onclick="fnSwitch(this)">none</a> | <a onclick="fnSwitch(this)">start</a> ]
  </p>
  <script>
    function fnSwitch(target) {
      console.log(target.textContent);
      document.getElementById('oRuby').style.rubyOverhang = target.textContent;
      console.log(document.getElementById('oRuby').style.rubyOverhang);
    }
  </script>
</body>
</html>

See also

CSSStyleDeclaration
currentStyle
runtimeStyle
style
Reference
ruby-align
ruby-position

 

 

Show:
© 2014 Microsoft