Widely availableA strong fit for CJK-oriented layouts where character-based sizing should reflect ideograph width rather than Latin metrics.
Units and functions Widely available

ic unit

The ic unit approximates the size of a CJK ideographic character. It is useful when spacing and sizing should follow East Asian text conventions more closely.

UnitsCJKTypography

Overview

The ic unit approximates the size of a CJK ideographic character. It is useful when spacing and sizing should follow East Asian text conventions more closely.

Browser support

Feature Desktop Mobile
Chrome
Edge
Firefox
Safari
Chrome Android
Safari iOS
css.types.length.ic
106
106
97
15.4
106
15.4
1+Supported (version) Not supported ※Has note Sub-feature descriptions sourced from MDN Web Docs (CC BY-SA 2.5)

Syntax

CSS 
.text-box {
  width: 20ic;
  text-indent: 1ic;
}
input {
  width: 10ic;
}

Live demo

Textwidth 10ic

CSS Textwidth 10ic demo.

PreviewFullscreen

characterbottom 1ic

CSS characterbottom 1ic demo.

PreviewFullscreen

Input Field 15ic

CSS Input field 15ic demo.

PreviewFullscreen

Use cases

  • CJK form fields

    Size inputs or labels according to ideographic character width in Japanese, Chinese, or Korean interfaces.

  • East Asian text measure

    Align layout spacing with the visual rhythm of ideographic text rather than Latin-centric units.

Cautions

  • This unit is most meaningful in CJK-focused typography and may be less intuitive in Latin-centric layouts.
  • As with other font-relative units, actual rendering depends on the fonts and language context in use.

Accessibility

  • Locale-aware sizing can improve readability for users reading East Asian scripts.
  • Test with real CJK content so controls and measures match actual reading behavior.

Related links

Powered by web-features