😎

letter-spacingを使ってある幅に文字列を揃える

2020/10/04に公開

パワプロ風画面ジェネレータというサービスを作っています。

特殊能力の項である幅(80px)に文字列が収まるようにletter-spacingを調整しようとして、web1weekで数式を立てて計算することに味をしめてしまったのもあり、数式で解決しようとするとうまくパラメータ調整できないことに気づきました。

サンプル数が少ない(2-10文字)のときは文字に応じてletter-spacingの値を固定で返すのが無難だなぁというTIPSです。

//ソースがtsではなくjsなのでjsで書きます...
const letterSpacing = (num) =>{
  switch(num){
    case 2:
      return 45;
    case 3:
      return 18.75;
    case 4:
      return 7.75;
    case 5:
      return 3.75;
    case 6:
      return 0.75;
    case 7:
      return -1.75;
    case 8:
      return -2.75;
    case 9:
      return -3.75;
    case 10:
        return -4.75;
    default:
      return 0;
  }
}

Discussion