font-sizeなどにpx以外の絶対単位（ptなど）を指定した場合の挙動

Question

font-sizeなどの単位として「pt」を使うことについて、疑問があります。

W3Cのドキュメントには

1px is equal to 0.75pt.

と記載されています。
これって、この仕様を採用しているブラウザでは、
ppiの異なる端末で見た場合、CSSの「1pt」というサイズは物理的な「1pt」とは異なる長さになる、という認識で合っていますか？
（現在ppiが異なる端末を持ち合わせておらず、確認できていませんが。。。）

もしそうであれば、
どのデバイスでも物理的な「1pt」を表現したい場合は、どのようにすれば良いのでしょうか。

Answer 1

CSS Values and Units Module Level 4

最新の仕様で確認してみました。

• CSS の値と単位 — CSS Values and Units Module Level 4 （日本語訳）

単位	定義	他の単位との関係
in	インチ（ inch ）	1in = 2.54cm = 96px
pt	ポイント（ point ）	1pt = (1÷72)in
px	ピクセル（ “画素” — pixel ）	1px = (1÷96)in

注記： 基準単位がピクセル単位である場合、物理単位は，物理的な計量に一致するとは限らない。 一方で，基準単位が物理単位である場合、ピクセル単位は，機器画素の整数倍に対応しないことがある。

注記： このピクセル単位と物理単位の定義は、 CSS の過去バージョンによる定義と異なる。 特に，過去バージョンでは、ピクセル単位と物理単位は固定比率で関係付けられていなかった — 物理的な単位は，常にその物理的な計量に結び付けられていた一方、ピクセル単位は，基準ピクセルに最も近似するような可変的なものとされていた。 （このように変更された理由は、 96dpi を前提にしている既存の内容があまりに多いため、その前提を覆すと，それらの内容も壊してしまうからである。）

基準ピクセル とは、ピクセル密度 96dpi の機器において 読み手の腕の長さだけ離れたときの， 1 ピクセルが占める視野角である。 名目上の腕の長さ約 71cm の下での視野角は，約 0.0213 度であり、この腕の長さだけ離れた視点からの 1px は，およそ 0.26mm （ 1÷96 インチ）に相当する。

気になるのは、96dpiについては「基準単位がピクセル単位である場合、物理単位は，物理的な計量に一致するとは限らない」とあるのに対して、72ppiには触れられていない事です。
「相対単位」であるはずの pt, px が「絶対単位」に分類されている時点で「推して知るべし」なのかもしれませんが…。

本来、ブラウザがdpi/ppi設定を読み取って適切に処理するのが正道と思いますが、96dpi固定がデファクトスタンダード化してしまっている為、device-pixel-ratio や resolution で高ppiモニタ(Retinaディスプレイ等)向けの画像を別途用意する必要がある、というところでしょうか。

CSS 2.1

• 4.3.2 Lengths - Cascading Style Sheets Level 2 Revision 1 (CSS 2.1) Specification
• [4.3.2 長さ - Cascading Style Sheets Level 2 Revision 1 (CSS 2.1) Specification 日本語訳

](http://momdo.s35.xrea.com/web-html-test/spec/CSS21/syndata.html#length-units)

固定単位がピクセル単位の場合、物理単位は、物理的な測定結果と一致するとは限らないことに注意する。あるいは固定単位が物理単位の場合、ピクセル単位は、デバイスピクセルの整数に変換されないことがある。

このピクセル単位と物理単位の定義は、CSSの以前のバージョンとは異なることに注意する。特に、ピクセル単位と物理単位が固定比で関連しないとされた以前のCSSバージョンにおいて、ピクセル単位が最も近い基準画素と一致するように変化する一方で、物理単位は常に物理的な測定に結びつけられる。（この変更は、あまりにも多くの既存のコンテンツが96dpiの仮定に依存するために行われた。この前提を壊すことはコンテンツを壊すことになる。）

96dpi固定に関する記述有。

CSS 2.0

• 4.3.2 Lengths - Cascading Style Sheets, level 2
• 4.3.2 長さ - Cascading Style Sheets, level 2 (ja)

96dpi固定に関する記述無。
CSS 2.1 から96dpi固定に関する規約が追記されたようです。

Re: nae_stage さん

Comments

[defghi1977]

SVG1.0（2001年）くらいの時代だと, まだ96dpiと固定していないっぽいですね. 90dpiでの換算例が出てきます.
https://www.w3.org/TR/2001/REC-SVG-20010904/coords.html#Units

[think49]

親記事に追記しましたが、CSS2.1 から96dpi固定の規約が生まれたようです。

Answer 2

まず, CSSにおける各種単位(pt, cm, in等)は全て単位pxに換算できます.

参考
https://www.w3.org/TR/css-values-3/#absolute-lengths

NOTE:
この時点で, スクリーンのppi等の影響を受けていない点に注意して下さい. CSS仕様では1inch=96px固定です.

ここで, CSSの1pxは伝統的にスクリーン上の1画素幅に相当していたのですが, 昨今のディスプレイにおける画素の高密度化に伴い, CSSの1pxをスクリーン上の複数画素幅(2画素等)に割り当てることが多くなってきています. また, ブラウザのズーム倍率を変更することでもこの関係は変化します.

そのため,

CSSの「1pt」というサイズは物理的な「1pt」とは異なる長さになる、という認識で合っていますか？

は合っています.

どのデバイスでも物理的な「1pt」を表現したい場合は、どのようにすれば良いのでしょうか。

この「1px」が物理デバイス上の「何画素幅」に相当するかは,

• HTMLではpicture要素srcset属性sizes属性として
• CSSではメディアクエリのdevice-pixel-ratioとして
• JavaScriptではdevicePixelRatio値として

と言ったように大抵のユースケースにおいて取得できます.

Comments

[nae_stage]

回答ありがとうございます！
認識が合っているという所までは理解できましたが、その後の
物理的な「1pt」を表現する方法がイマイチわかりませんでした。
例えば、「このボタンを、どのデバイスでも、横の長さを物理的に28.35 pt（10mm）で表示したい」場合は、CSSで指定できるのか、javascriptで指定できるのか、という質問でした。

[defghi1977]

おそらくそれは不可能でしょう. というのも, WEBブラウザが判るのはCSSの1pxとスクリーンデバイスの画素数との対応までで, スクリーン画素の絶対的なサイズまでは解らないからです.
もちろん, 出力対象のデバイスが固定されている(=1画素の物理的なサイズ)が判っているのであれば, そこから必要となるpx数を算出することが出来ます.

[nae_stage]

なるほど。スッキリしました。
迅速な回答ありがとうございました！