CSSの長さの単位「ch」について検証してみた。


こんにちは、みみです。

この記事「デザインで WordPress に貢献しよう – WordCamp Tokyo 2018 1日目コントリビューターデイレポ その2 – Photosynthesic blog」にも書いたIssueで出てきたプルリクを眺めてて面白いツッコミを見つけたので、ちょっと調べてみました。

chという単位のほうがこの場合いいんじゃない?みたいなことなんですが、chってなんだっけ?そういやそんなのあったけれど、そんな単位だったっけな?と思って。

<length>- CSS: Cascading Style Sheets | MDN

Represents the width, or more precisely the advance measure, of the glyph “0” (zero, the Unicode character U+0030) in the element’s font.

ほえ?指定されてるフォントの0の横幅を1としてるってこと?

そんな説明してたっけなー、とざーっとググってみたけれど、あんまりフォーカスされてない単位でよく分からない。

というわけで、ググるより検証したほうが早そうだから、超簡単なデモを書いてみました。

デモのスクリーンショット。

…うーん。基準が0だから微妙だなあ。

でも確かにFont-familyで幅が変わるみたいです。

しかし、0が基準だから、2バイト文字の幅に対応してくれるわけじゃないし、このプルリクにはあんまり意味なさそうだけども。あるのかな?肝心なそっちの検証はしていませんが。

この単位を作った意図を知りたいなあ。どなたかご存知ありませんか…?


この記事を書いた人