フォントサイズを可変にすると言っても基準を定義しないと計算ができないので、まずは フォントサイズの最小値
、フォントサイズの最大値
、フォントサイズの最大値になる文字
を決めます。
指定した文字数を超えるまでは常に一番大きなフォントサイズで、それを超えると計算でフォントサイズを割り出して、最小フォントサイズよりも小さくなった場合には最小フォントサイズに固定します。
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}
部分は分割代入