CSS ルビレイアウト

CSS ルビレイアウト (CSS Ruby Layout) CSS のモジュールの一つで、ルビ表記の表示に関するレンダリングモデルや整形の制御を提供します。ルビ表記は行間の表記の一種で、ベーステキストに沿った短いテキストで構成されます。これらはふつう東アジアの文書で、発音を示したり、短い説明を提供したりするために使用されます。

リファレンス

プロパティ

仕様書

仕様書 状態 備考
CSS Ruby Layout Module Level 1 草案 初回定義

ブラウザーの対応

ruby-align プロパティ

Update compatibility data on GitHub
デスクトップモバイル
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewAndroid 版 ChromeAndroid 版 FirefoxAndroid 版 OperaiOSのSafariSamsung Internet
ruby-align
実験的
Chrome 未対応 なしEdge 未対応 なしFirefox 完全対応 38IE 未対応 なし
補足
未対応 なし
補足
補足 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 未対応 なしSafari 未対応 なしWebView Android 未対応 なしChrome Android 未対応 なしFirefox Android 完全対応 38Opera Android 未対応 なしSafari iOS 未対応 なしSamsung Internet Android 未対応 なし

凡例

完全対応  
完全対応
未対応  
未対応
実験的。動作が変更される可能性があります。
実験的。動作が変更される可能性があります。
実装ノートを参照してください。
実装ノートを参照してください。

ruby-position プロパティ

Update compatibility data on GitHub
デスクトップモバイル
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewAndroid 版 ChromeAndroid 版 FirefoxAndroid 版 OperaiOSのSafariSamsung Internet
ruby-position
実験的
Chrome 未対応 なしEdge 未対応 12 — 79Firefox 完全対応 38IE 未対応 なし
補足
未対応 なし
補足
補足 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 未対応 なし
補足
未対応 なし
補足
補足 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 未対応 なしChrome Android 未対応 なしFirefox Android 完全対応 38Opera Android 未対応 なしSafari iOS 未対応 なし
補足
未対応 なし
補足
補足 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 未対応 なし
inter-character
実験的
Chrome 未対応 なしEdge 未対応 なしFirefox 未対応 なしIE 未対応 なしOpera 未対応 なしSafari 未対応 なしWebView Android 未対応 なしChrome Android 未対応 なしFirefox Android 未対応 なしOpera Android 未対応 なしSafari iOS 未対応 なしSamsung Internet Android 未対応 なし

凡例

完全対応  
完全対応
未対応  
未対応
実験的。動作が変更される可能性があります。
実験的。動作が変更される可能性があります。
実装ノートを参照してください。
実装ノートを参照してください。