サイト制作でページタイトルの英語のサブタイトルなどを少し文字間をあけてスタイリッシュにしたい時ありますよね。
そんな時はないという方でも文字と文字の間のスペースを調整したうえで中央寄せしたい時ありませんか?
まぁとにかくそういうケースがあるという前提で問題点と対処法を紹介します。

問題点は見ていただいた方が早いので以下に実際に「中央寄せ」+「文字間10px」を表示してみます。

英語で「愛してる」は

I LOVE YOU.

上記の例では日本語は中央寄せ、英文は中央寄せ+文字間を指定しております。
英文に指定したCSSは以下の通りです。

.spaced-letter {
    letter-spacing: 10px;
    text-align: center;
}

なんとなく文字間を開けた英文が左に寄っていませんか?
例文は美しいけれど見にくいので別の例文でご確認ください。

中央中央中央

CENTER

文字間をあけていない上の日本語文は中央に表示されていますが、文字間をあけた英文が中央からわずかに左にずれています。

これは、「letter-spacing」の仕様で文字の間にスペースが入るだけでなく、「最後の文字の後」にもスペースが入っていることが原因のようです。
ですので、「最初の文字の前」にも同様にスペースを入れることで解決します。

【解決策】

.spaced-letter {
    letter-spacing: 10px;
    text-align: center;
    text-indent: 10px;
}

中央中央中央

CENTER

前述したように、「letter-spacing」の仕様は「最後の文字の後」にもスペースが入るというものですので、中央寄せのみでなく右寄せの際にもご注意ください。
みなさまのWEB制作のお役に立てば幸いです。

読んでくれてありがとう

THANK YOU