なぜ必要なのか
長い段落がある庭の便りを作るとします。読者が続く文章を読む際、細い文字と広い文字に同じ幅を与えると間隔が不自然になります。
どう解決するのか
庭の便りを読み、別の幅測定を見ます。読み込んだNoto SansではiとWの送り幅が異なります。数字は別に等幅で揃えられます。字間の変更が比例幅の定義ではありません。
庭の便りを読み、文字の送り幅を比べる庭の便り / 9月庭からの便り

Small leaves, wide windows
Morning light reaches the new shelf. We moved the fern beside the window and left a little space for the next green arrival.
土曜日の植物交換に挿し穂を持ってきてください。
本文内の架空のデモです。リセット・再読み込みで初期状態に戻ります。
どんな考え方なのか
プロポーショナル — 比例幅の文字は異なる送り幅を使います。
対応文字や数字機能は異なるため、名称から推測せず読み込んだ書体を測ります。
W3C
さらに詳しく
任意の参考資料 · 概要の読了時間には含みません
01選択・比較
文章で文字ごとの比率を生かすときに比例幅を選びます。空白でラテン文字の列を揃えるなら等幅が適します。セリフもサンセリフも比例幅になり、等幅数字とも併用できます。
02応用例
庭の便りは続くラテン文字の段落と翻訳された案内を並べます。記事や通常のUI文にも使えます。全字が比例幅と仮定せず、実際の書体と言語の文字を確認します。
03実装の参考・注意点
document.fonts.ready後に実際の書体を確認します。一つのテキストノードをRangeで測り字形処理を保ちますが、合字・結合文字・代替字形は範囲に影響します。実験と実用の見本を分け、各言語の対応文字を検査します。
04根拠
比較のまとめ
続けて読む
原稿・修正提案 ↗自分のプロジェクトに活かす
これからプロジェクトを始めますか?説明を入力して最初のプロンプトを準備しましょう。
自分に合うプロンプトを作る →すでに外部AIと会話中なら、この記事のリンクと自分のプロジェクトに合う理由、重視する利点や制約を伝えましょう。合意した要件にどう適用するか依頼してください。
この記事のリンク: プロポーショナル
この選択を話し合う
コメントは全言語で共有。投稿にはGitHubログインが必要です。