ric unit
ricは「root international character」の略で、ルート要素のフォントにおけるCJK（中国語・日本語・韓国語）文字の幅を基準とするCSS長さ単位です。ic単位がその要素自身のフォントを基準とするのに対し、ricは常にルート要素のフォントを基準にします。日本語テキストの行長設定など、CJK文字幅ベースのレイアウト設計に最適な単位です。
概要
ricは「root international character」の略で、ルート要素のフォントにおけるCJK（中国語・日本語・韓国語）文字の幅を基準とするCSS長さ単位です。ic単位がその要素自身のフォントを基準とするのに対し、ricは常にルート要素のフォントを基準にします。日本語テキストの行長設定など、CJK文字幅ベースのレイアウト設計に最適な単位です。
対応ブラウザ
デスクトップ
Chrome 111+
Edge 111+
Safari 17.2+
Firefox 147+
モバイル
Chrome Android 111+
Safari iOS 17.2+
Firefox Android 147+
基本構文
CSS
.text-column {
max-width: 40ric;
/* 全角文字40文字分の幅 */
}
.indent {
text-indent: 1ric;
}実務での使いどころ
-
日本語テキストの行長設定
全角文字の幅を基準にテキストカラムの最大幅を設定し、日本語の可読性に最適な行長を実現します。
注意点
- CJKフォントが読み込まれる前はフォールバックフォントのic幅が使用されるため、FOUT時のレイアウトシフトに注意してください。
アクセシビリティ
- ric単位による適切な行長設定（35〜45文字程度）は、日本語テキストの可読性とアクセシビリティの向上に寄与します。