letter-spacingを使用した文字のセンター寄せ・右詰め
letter-spacingを使用する時の小技
デザインをする上で、使用するfontによっては、letter-spacingを多めに使用したい場合がある。
その文字を右詰めにする場合、letter-spacingの特性上、最後の文字の右側にもスペースが発生する。
このように右側にスペースが追加される。
センター揃えの場合、微妙に左に寄って描画されるためデザインデータと一致しない。
そのためには下記のような手法で対処できる。
センター寄せの場合
text-indentを使用し、最初の文字の左側にも同サイズのスペースを発生させる
letter-spacing: 0.3em; text-indent: 0.3em;
右寄せの場合も同様で、右側のスペースが存在するために他の文字や枠にきれいに揃わない。
右寄せの場合
この場合、ネガティブマージンで右側に同サイズ分ズラすことで対処が可能です
letter-spacing: 0.3em; margin-right: -0.3em;
この様に、letter-spacingをうまく使って、コーディングを行っていってください。