😎
letter-spacingを使ってある幅に文字列を揃える
パワプロ風画面ジェネレータというサービスを作っています。
特殊能力の項である幅(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