3^2 / 2^3の答えである1.125を基本の比にし、様々な大きさをすべて計算しなおす。「黄金比なんて誰も設計に使っていない」というような本を読み、黄金比を使っているのがちょっと恥ずかしくなったからだ。4乗していくとなんとなく大きくなっていくようで、キリの良い数字が増え、自己満足度が上がる。結局は黄金比に近い(1.125^4 = 1.602)ので、最終的な結果は変わらない。

fs.glob()

内部的にはfs.glob()への書き換えがある。isaacs/node-globパッケージでは配列でPromiseが履行されるが、fs.glob()ではAsyncIteratorで返ってくるので、そのまま置き換えることはできない。AsyncIteratorをきちんと扱うように書き直すか、Array.fromAsync()で配列に直す。配列をPromise.all()Array.map()で並行処理をするように書いていた場合は、Array.fromAsync()の第二引数にArray.map()に渡していた関数を指定するだけで良い。

import fs from "node:fs/promises"
import { glob } from "glob"

const toLowerCase = (str) => str.toLowerCase();

const isaacsGlob = async () => {
  const files = await glob("**/*");
  return Promise.all(files.map(toLowerCase));
};

const fsGlob = async () => {
  const files = await fs.glob("**/*");
  return Array.fromAsync(files, toLowerCase);
};

Fluid Typographyの見送り

いわゆるFluid Typographyなどと呼ばれている描画領域に応じて文字サイズが変わる機能も復活させていたが、結局はまた見送る。利用者の文字サイズ設定には追随するものの、その動機とはうまく噛み合っていないと感じるからだ。利用者が文字サイズを変えているのなら、Fluid Typographyが行う読みやすさの提供は利用者が既に行っていると見做せると思う。

また、rem単位での実装とすると、大きくしているとそれに応じて文字サイズが二重に大きくなってしまうし、小さくしているなら忌避したはずの標準の大きさをいとも簡単に超えてしまう。もちろんpx単位で実装した場合はそういう問題は起きないが、文字サイズの設定を完全に無視する。どちらの場合でもウェブサイトのさじ加減として許せる範囲を超えていると利用者が感じてしまうかもしれない。

このウェブサイトが112.5%くらいに抑えている理由もこの辺りにある。これなら利用者が12pxくらいにしていても13.5px32pxにしていても36pxに抑えられる。小さくしている場合に既定の16pxを超えることはまずないし、大きくしている場合でも6px以上巨大化することはまずない。おおむね「さじ加減」として許容されるのではないかと思う。

clamp()などでinitialキーワードを利用できれば、Fluidしつつユーザー設定とも比較できるので、うまく馴染ませられそうだが、できないものはできない。メディア・クエリーで利用者の文字サイズ設定が引ければ良いのかもしれない。アクセシビリティーという観点からの実装になりそうなので、例えばprefers-text-sizeメディア特性などがあり、prefers-contrastメディア特性のようにno-preferenceという値を取れれば、その中でのみFluid Typographyを実装できるだろう。現状では、JavaScriptを使って既定の16pxではなさそうな場合はFluidしない、というあたりが現実的な落としどころだろうか。


:root {
  --ratio-1: calc((3 * 3) / (2 * 2 * 2));
  --ratio-2: calc(var(--ratio-1) * var(--ratio-1));
  --ratio-4: calc(var(--ratio-2) * var(--ratio-2));

  font-size: clamp(
    var(--ratio-1) * 1rem,
    1rem / var(--ratio-1) + 1vi / var(--ratio-4) / var(--ratio-2),
    var(--ratio-4) * var(--ratio-2) * 1rem
  );
}

実装は上記のようなコードになっていた。すべて計算されていて楽しい、というくらいしかない。文字サイズの拡大は750pxくらいから始まり、3700pxくらいで最大値に到達する。ブラウザーの文字サイズ設定が既定の16pxの場合、横長で幅1280pxの画面だと20pxくらい、幅1920pxの画面だと24pxくらいになり、3700pxくらいで最大値の32pxくらいになる。Firefox ESRが更新されて、CSSの計算でpow()が気軽に使えるようになると読みやすくなりそうだ。


まとめると以下のようなボヤキのようだ。

他、色が多少変わっている。特に暗色の方で大きく変わり、青っぽい背景から褐色っぽい背景になる。文字色も褐色になり、全体的に黄ばんだと言える。ファビコンも四角い背景をやめて、アウトラインを描いておくように戻す。両端揃えや三点リーダーによる省略を導入しつつ、すぐにやめたりもする。日本語・横書き・両端揃えは、1カラムの中央揃えや段組みでこそ威力を発揮する思いを強くした。三点リーダーに限らず、省略されたものに対する扱いがSafariでは独特なので、できうる限り避けるようにしたい。