ruby-positionBaseline · Newly available
The ruby-position CSS property sets the position of a ruby annotation in relation to its base text. Annotations can display over, under, or interleaved with the base text.
Works in the latest version of every major browser, but older devices may not support it yet. Baseline since Dec 11, 2024.
Browser support
DesktopChrome
1–83Not supported
84+Supportedsince Jul 27, 2020
Current: 155Edge
12–83Not supported
84+Supportedsince Jul 16, 2020
Current: 154Firefox
1–37Not supported
38+Supportedsince May 12, 2015
Current: 157Safari
1–18.1Not supported
18.2+Supportedsince Dec 11, 2024
Current: 27MobileChrome Android
18–83Not supported
84+Supportedsince Jul 27, 2020
Current: 155Firefox Android
4–37Not supported
38+Supportedsince May 12, 2015
Current: 157Safari iOS
1–18.1Not supported
18.2+Supportedsince Dec 11, 2024
Current: 27How to use
Every current browser supports this, but it only became Baseline on Dec 11, 2024. Use it as a progressive enhancement, or keep a fallback if you support older devices.
Example
Full syntax and examples are on MDN: ruby-position.
Feature detection
CSS · check before using
@supports (ruby-position: initial) {
/* styles that rely on ruby-position */
}
/* or in JavaScript */
if (CSS.supports("ruby-position", "initial")) {
// use it
}Documentation (MDN)
Specification
Sub-features
Support for each part of the feature (4). The overall table above shows when the whole feature works.
| Sub-feature | Chrome | Edge | Firefox | Safari | Chrome Android | Firefox Android | Safari iOS |
|---|---|---|---|---|---|---|---|
| ruby-position | 84 | 84 | 38 | 18.2 | 84 | 38 | 18.2 |
| ruby-position.inter-character | ✕ | ✕ | ✕ | ✕ | ✕ | ✕ | ✕ |
| ruby-position.over | 84 | 84 | 38 | 18.2 | 84 | 38 | 18.2 |
| ruby-position.under | 84 | 84 | 38 | 18.2 | 84 | 38 | 18.2 |