unitone v21.0.0 をリリースしました

unitone v21.0.0 の概要

主にタイポグラフィ関連の見直しと、エディターの描画処理の改善を行いました。

互換性には配慮したつもりなのですが、内部的に色々変わっているので、一応メジャーアップデートという扱いにしました。念の為、テスト環境で動作確認したあとに本番環境でアップデートすることを推奨します。

変更

タイポグラフィ関連 CSS のリファクタリング
エディターの描画速度の改善
各 unitone ブロックのブロック追加ボタンの表示の仕方を変更
ブロック追加ボタンが文字色と同じ色で表示されるように変更

不具合の修正

区切りありブロックの子要素がはみ出してしまうことがある不具合を修正

タイポグラフィ関連 CSS のリファクタリング

line-height、余白の計算式をリファクタリング

lh や @property、三角関数などを使ったモダンな計算式に変更しました。

Safari 16.4 未満だとそれらのモダンな CSS が効かずに line-height も余白もなくなってしまうので、16.4 未満の場合はこれまでの計算式が使用されるようにしています。Safari 16.4 未満の使用率がもっと下がったら、この CSS は消そうと考えています。

基本タイポグラフィの変更

:where(body) {
  〜省略〜
  line-break: strict; /* 最も厳格な改行規則を使用してテキストを改行する */
  overflow-wrap: anywhere; /* 行内に分割可能な位置がない場合、その他の分割できない文字列（長い単語や URL）が任意の場所で分割されることを許可する */
  text-spacing-trim: trim-start; /* CJK 全角の開始用約物文字が各行の先頭に来た場合には半角幅で設定する */
  〜省略〜
}

:where(h1, h2, h3, h4, h5, h6) {
  text-wrap: pretty; /* 速度よりもレイアウトを重視して折り返す */
}

記事直下、テキストブロック直下

見出し以外の要素は最低限の margin-block-end を持つように変更しました。これにより、例えば段落が並んでいて途中の段落の文字サイズが大きい場合、上下に適切な余白が確保されるようになりました。

青空に白い雲がゆっくりと流れていく。草がそよぎ、遠くの鳥が羽ばたく音が聞こえる。風はどこから来て、どこへ行くのだろう。雲を眺めながら、時間が静かに流れていくのを感じた。

流体タイポグラフィ

「流体タイポグラフィ」使用時、line-height の流体化には JavaScript が必要でしたが、今回のアップデートで CSS のみで実現できるようになりました。

CSS カスタムプロパティ、Sass 変数の削除

fluidFontSizeResizeObserver を削除
--unitone--ms-2 〜 --unitone--ms7 を削除
variables.$min-line-height を削除
variables.$max-line-height を削除
variables.$max-line-height-target-font-size-ratio を削除
variables.$line-height-slope を削除
variables.$line-height-intercept を削除

エディターの描画速度の改善

各ブロックのブロック追加ボタンのメモ化
区切りありブロックの区切り線の描画処理を、ブロックが画面内にあるときのみ実行するように変更
階段グリッドの描画処理を、ブロックが画面内にあるときのみ実行するように変更
縦書きの描画処理を、ブロックが画面内にあるときのみ実行するように変更
独自ブロックサポートの描画処理のリファクタリング

各 unitone ブロックのブロック追加ボタンの表示の仕方を変更

グループブロックと（ほぼ）同じ形に変更しました。具体的には、

ブロックを選択しているときだけボタンが表示される
選択されておらず、子ブロックも無い場合は枠線が表示される