CSS Ruby Layout is a module of CSS that provides the rendering model and formatting controls related to the display of ruby annotation. Ruby annotation is a form of interlinear annotation, consisting of short runs of text alongside the base text. They are typically used in East Asian documents to indicate pronunciation or to provide a short annotation.

Reference

CSS properties

Specifications

Specification Status Comment
CSS Ruby Layout Module Level 1 Working Draft Initial definition

Browser compatibility

ruby-align property

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidEdge MobileFirefox for AndroidOpera for AndroidiOS SafariSamsung Internet
Basic support
Experimental
Chrome No support NoEdge No support No
Notes
No support No
Notes
Notes Edge supports an earlier draft of CSS Ruby with non-standard values for this property: auto, left, center, right, distribute-letter, distribute-space, and line-edge.
Firefox Full support 38IE No support No
Notes
No support No
Notes
Notes Internet Explorer 9 and later supports an earlier draft of CSS Ruby with non-standard values for this property: auto, left, center, right, distribute-letter, distribute-space, and line-edge.
Opera No support NoSafari No support NoWebView Android No support NoChrome Android ? Edge Mobile ? Firefox Android Full support 38Opera Android No support NoSafari iOS No support NoSamsung Internet Android No support No

Legend

Full support  
Full support
No support  
No support
Compatibility unknown  
Compatibility unknown
Experimental. Expect behavior to change in the future.
Experimental. Expect behavior to change in the future.
See implementation notes.
See implementation notes.

ruby-position property

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidEdge MobileFirefox for AndroidOpera for AndroidiOS SafariSamsung Internet
Basic support
Experimental
Chrome No support NoEdge Full support 12Firefox Full support 38IE No support No
Notes
No support No
Notes
Notes Internet Explorer 9 and later support an old draft values: inline (equivalent of having display: inline on the ruby), and above (synonym of the modern over).
Opera ? Safari No support No
Notes
No support No
Notes
Notes Safari implements a non-standard, prefixed, version of ruby-position, -webkit-ruby-position: it has two properties: before and after (both equivalent, for ltr and rtl scripts to the standard over value used with ruby-align: start).
WebView Android No support NoChrome Android ? Edge Mobile Full support YesFirefox Android Full support 38Opera Android No support NoSafari iOS No support No
Notes
No support No
Notes
Notes Safari implements a non-standard, prefixed, version of ruby-position, -webkit-ruby-position: it has two properties: before and after (both equivalent, for ltr and rtl scripts to the standard over value used with ruby-align: start).
Samsung Internet Android No support No
inter-character
Experimental
Chrome No support NoEdge ? Firefox No support NoIE No support NoOpera ? Safari No support NoWebView Android No support NoChrome Android ? Edge Mobile No support NoFirefox Android No support NoOpera Android No support NoSafari iOS No support NoSamsung Internet Android No support No

Legend

Full support  
Full support
No support  
No support
Compatibility unknown  
Compatibility unknown
Experimental. Expect behavior to change in the future.
Experimental. Expect behavior to change in the future.
See implementation notes.
See implementation notes.

Document Tags and Contributors

Contributors to this page: fscholz, mfluehr, Sebastianz, teoli
Last updated by: fscholz,