rcap unit
rcapは、ルート要素のcap単位の値に等しいフォント相対長さの単位です。cap-heightは大文字ラテン文字の高さにほぼ等しく、rcapはこれをルート要素基準で計算します。typographicバーティカルリズムの設計や、テキストの高さに合わせたアイコンやインジケーターのサイズ調整に適しています。
概要
rcapは、ルート要素のcap単位の値に等しいフォント相対長さの単位です。cap-heightは大文字ラテン文字の高さにほぼ等しく、rcapはこれをルート要素基準で計算します。typographicバーティカルリズムの設計や、テキストの高さに合わせたアイコンやインジケーターのサイズ調整に適しています。
対応ブラウザ
デスクトップ
Chrome 118+
Edge 118+
Safari 17.2+
Firefox 147+
モバイル
Chrome Android 118+
Safari iOS 17.2+
Firefox Android 147+
基本構文
CSS
.icon {
width: 1rcap;
height: 1rcap;
}
.indicator {
margin-top: 0.5rcap;
}実務での使いどころ
-
テキスト高さ基準のサイズ調整
大文字テキストの高さを基準にアイコンや装飾要素のサイズを設定し、視覚的な一貫性を確保します。
注意点
- ブラウザのフォントレンダリングによってcap-heightの計算が異なる場合があるため、クロスブラウザでの差異に注意してください。
アクセシビリティ
- rcap単位はルート要素のフォントサイズに連動するため、ユーザーのフォントサイズ変更に適切に追従します。