CSS ruby-position Property

Description

This ruby-position property is used by the parent of elements with display: ruby-text to control the position of the ruby text with respect to its base.

  • Initial valuebefore
  • Applies toThe parent of elements with display: ruby-text
  • InheritedYes
  • MediaVisual
  • Computed valueSpecified value
  • AnimatableNo
  • CSS VersionCSS3
  • JavaScript syntaxobject.style.rubyPosition

Syntax

Formal syntax: [ over | under | inter-character ] && [ right | left ]

ruby-position: over right;
ruby-position: over left;
ruby-position: under right;
ruby-position: under left;
ruby-position: inter-character right;
ruby-position: inter-character left;

Values

  • overThe ruby text appears over the base in horizontal text.
  • underThe ruby text appears under the base in horizontal text.
  • inter-characterThe ruby text appears on the right of the base in horizontal text.
  • rightThe ruby text appears on the right side of the base in vertical text.
  • leftThe ruby text appears on the left side of the base in vertical text.

Example

.class {
   ruby-position: under right; 
}

Browser Support

noFirefoxnoExplorernoChromenoSafarinoOpera

Last updated on 23rd March 2014 By Rene Spronk

View All CSS Properties

Errors? Please help to keep this list up to date, If you find any errors, please contact us, so that we can get them fixed.