ruby-position

Controls where a ruby annotation is placed relative to its character (usually either 'over' or 'under').

It is documented as part of the CSS Ruby specification.

/* Usage Example */
ruby {
  /* Places the pronunciation guide below the character instead of above it */
  ruby-position: under;
}

/* Syntax */
ruby-position: alternate;
ruby-position: over;
ruby-position: under;
ruby-position: inter-character;

/* Global values */
ruby-position: inherit;
ruby-position: initial;
ruby-position: revert;
ruby-position: revert-layer;
ruby-position: unset;
Newly available Since 2024 92% global usage

Since 2024 this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.

84+
38+
18.2+
84+
Kinsta

Your first month is free

Managed WordPress hosting for faster sites.

Learn more

New CSS drops.

Join 600+ readers who've survived clearfix hacks.

ESC