昨日の

unitone の line-height の計算式 2025

この記事は「Snow Monkey / unitone Advent Calendar 2025」の12月10…

unitone.2inc.org

ですが、Firefox で line-height の計算に失敗し、normal（初期値）扱いになってしまっていることがわかりました。なぜ！

ということで色々調べて解決したのでそれを書きたいと思います。

line-height の実装のおさらい

@property --unitone--property--1em {
  syntax: "<length>";
  inherits: false;
  initial-value: 0;
}

* {
  /**
   * A value to get the unitless px value in trigonometric functions. (For Safari)
   */
  --unitone--property--1em: 1em;

  /**
   * em unitless px real value
   */
  --unitone--result--1em-px: calc(tan(atan2(var(--unitone--property--1em), 1px)));
}

:root {
  /**
   * The 1rem px font size (no units).
   */
  --unitone--base-font-size: 16;

  /**
   * Gutter provided above and below the text in a line.
   */
  --unitone--half-leading: .3;
  --unitone--min-half-leading: .05;
  --unitone--min-line-height: calc(1 + 2 * min(var(--unitone--min-half-leading), var(--unitone--half-leading)));
  --unitone--max-line-height: calc(1 + 2 * var(--unitone--half-leading));
}

$_max-line-height-target-font-size-ratio: 5;
$_line-height-slope: calc((var(--unitone--min-line-height) - var(--unitone--max-line-height)) / #{ $_max-line-height-target-font-size-ratio - 1 });
$_line-height-intercept: calc(var(--unitone--max-line-height) - #{ $_line-height-slope });

$line-height: clamp(
  var(--unitone--min-line-height),
  #{ $_line-height-slope } * (var(--unitone--result--1em-px) / var(--unitone--base-font-size)) + #{ $_line-height-intercept },
  var(--unitone--max-line-height)
);

これだとだめでした。ちなみにだめなのは Firefox だけで、Chrome と Safari は OK。

こうしたら OK

@property --unitone--property--1em {
  syntax: "<length>";
  inherits: false;
  initial-value: 0em;
}

@property --unitone--result--1em-px {
  syntax: "<number>";
  inherits: false;
  initial-value: 0;
}

要は、

ということが必要でした。

--unitone--result--1em-px: calc(tan(atan2(var(--unitone--property--1em), 1px)));

まず上記の行が1つめの重要な部分で、calc(tan(atan2(var(--unitone--property--1em), 1px))) は Firefox のデベロッパーツール上では 正しく calc(tan(atan2(1em, 1px)))、そして calc(tan(atan2(16px, 1px)))、と認識しているようだったのですが、実際にプロパティに使おうとすると解釈してくれないという挙動でした。

次に、

(var(--unitone--result--1em-px) / var(--unitone--base-font-size))

の部分が、<length> / <number> と解釈されてしまうみたいで、それだとちゃんと割り算ができないので失敗する、という感じのようでした。

なので、

とすることで、正しく解釈できるようになりました。

難しい！