Newly available 条件付きOK。主要ブラウザで対応済みだが、古いバージョンでは未対応の場合がある。フォールバックを検討。

ric unit

ricは「root international character」の略で、ルート要素のフォントにおけるCJK（中国語・日本語・韓国語）文字の幅を基準とするCSS長さ単位です。ic単位がその要素自身のフォントを基準とするのに対し、ricは常にルート要素のフォントを基準にします。日本語テキストの行長設定など、CJK文字幅ベースのレイアウト設計に最適な単位です。

単位CJK

対応ブラウザ

機能 デスクトップ モバイル
Chrome
Edge
Firefox
Safari
Chrome Android
Safari iOS
css.types.length.ric
111
111
147
17.2
111
17.2
1+対応 (バージョン) 未対応 ※注釈あり サブ機能の解説は MDN Web Docs (CC BY-SA 2.5)

基本構文

CSS 
.text-column {
  max-width: 40ric;
  /* Width equivalent to 40 full-width characters */
}
.indent {
  text-indent: 1ric;
}

ライブデモ

full-width40characterwidth

CSS full-width40characterwidth demo.

プレビュー全画面表示

characterbottom

CSS characterbottom demo.

プレビュー全画面表示

containerwidth

CSS containerwidth demo.

プレビュー全画面表示

実務での使いどころ

  • 日本語テキストの行長設定

    全角文字の幅を基準にテキストカラムの最大幅を設定し、日本語の可読性に最適な行長を実現します。

注意点

  • CJKフォントが読み込まれる前はフォールバックフォントのic幅が使用されるため、FOUT時のレイアウトシフトに注意してください。

アクセシビリティ

  • ric単位による適切な行長設定（35〜45文字程度）は、日本語テキストの可読性とアクセシビリティの向上に寄与します。

参考リンク