TECH BOX

Technology blog from Web Engineer

この記事は最終更新日から2年以上経過しているため正確ではないかもしれません

文字数によって動的にフォントサイズを変更する

フォントサイズを可変にすると言っても基準を定義しないと計算ができないので、まずは フォントサイズの最小値フォントサイズの最大値フォントサイズの最大値になる文字を決めます。

指定した文字数を超えるまでは常に一番大きなフォントサイズで、それを超えると計算でフォントサイズを割り出して、最小フォントサイズよりも小さくなった場合には最小フォントサイズに固定します。

interface IfAdjustFontSizeOption {
  // フォントサイズの最大値
  max: number
  // フォントサイズの最小値
  min: number
  // フォントサイズの最大値になる文字数
  base: number
}

const adjustFOntSize = (text: string, {max, min, base}: IfAdjustFontSizeOption): number => {
  const textLength = text.length

  // 基準の文字数に達しない場合は常に最大フォントサイズ
  if (textLength <= base) return max

  // フォントサイズを可変
  const ratio = max / base
  const diff = Math.ceil(textLength * ratio)

  // どちらか大きい方
  return Math.max(min, max - (diff - max))
}

const res = adjustFOntSize('あいうえおかきくけこあいうえお', {min: 16, max: 24, base: 13})
// -> 20

{max, min, base}部分は分割代入