概要

text-orientationは、CSSで縦書きテキスト内の文字の向きを調整するためのプロパティです。縦書きのデザインでは、英字や数字、記号などの文字が横向きになってしまうことがあります。このプロパティを使うことで、文字の向きを調整し、テキストの読みやすさやデザインの美しさを保つことができます。日本語や中国語の縦書きレイアウトにおいて特に有用で、デザインの細部にこだわる際に役立ちます。

text-orientationの基本構文

text-orientation: <value>;

• value
  文字の向きを指定するキーワードです。

値の説明

• mixed
  デフォルトの設定です。日本語の漢字やひらがな、カタカナは縦向きに表示され、英字や数字は横向きになります。
• upright
  すべての文字を縦向きに表示します。英字や数字も縦に立てたまま表示され、縦書きレイアウトでの一貫性が保たれます。
• sideways
  文字を横向きに回転して表示します。縦書きレイアウトでも文字が横書きと同じ方向に表示され、特定のデザイン効果を持たせることができます。

使用例

基本的な使用例 - 英字を縦に立てて表示する

以下のコードは、縦書きテキストで英字を縦に立てて表示する例です。

.vertical-text {
    writing-mode: vertical-rl; /* 縦書き設定 */
    text-orientation: upright; /* すべての文字を縦に表示 */
}

この設定により、英字や数字も縦に表示され、縦書きレイアウトに違和感なく溶け込みます。

デフォルト設定（mixed）で自然な表示

デフォルトの設定では、漢字やひらがなは縦向き、英字や数字は横向きに表示されます。

.default-orientation {
    writing-mode: vertical-rl;
    text-orientation: mixed; /* デフォルトで自然な向きに表示 */
}

この設定により、日本語テキストが縦に、英字や数字が横に表示され、一般的な縦書きの見た目になります。

特定の文字を横に回転して表示する

横書きの見た目を縦書き内に持ち込みたい場合、sidewaysを使って文字を横向きに表示します。

.sideways-text {
    writing-mode: vertical-rl;
    text-orientation: sideways; /* 文字を横向きに回転 */
}

このコードは、縦書きテキスト内で文字を横に回転させるため、デザインのアクセントとして活用できます。

特定の要素のみtext-orientationを変更する

文章全体ではなく、特定の単語やフレーズだけの向きを変えたい場合に、要素を指定して変更することも可能です。

.special-text {
    writing-mode: vertical-rl;
}
.special-text span {
    text-orientation: upright; /* 英字部分だけ縦向きにする */
}

この設定では、.special-text内のspan要素だけが縦向きに表示され、通常とは異なる見た目を演出できます。

実用的なシナリオ

縦書きデザインの調整

日本語の縦書きテキストで、英字や数字の向きを調整し、自然な読みやすさを保つことができます。特に、縦書きレイアウトで英字が混ざる場合、デザインのバランスを崩さないように調整する際に有効です。

デザインの一貫性保持

ウェブサイトや印刷物など、縦書きデザインの中で一貫した見た目を保つために、文字の向きを細かく調整できます。特にブランドのルールに合わせたデザインを行う際に、このプロパティは役立ちます。

特定のスタイルを強調

特定のフレーズや単語を強調するために、文字の向きをあえて変えることで、視覚的なアクセントを付けることができます。デザインの中で異なる印象を与えたい場合に便利です。

注意点

• ブラウザサポート: text-orientationは、ほとんどの最新ブラウザでサポートされていますが、古いブラウザでは正しく表示されない場合があります。クロスブラウザでの確認が重要です。
• 縦書き設定との組み合わせ: このプロパティは、writing-mode: vertical-rlやwriting-mode: vertical-lrのような縦書きの設定が有効である場合に最も効果を発揮します。横書きでは効果がないため、設定が正しく行われているか確認してください。
• 読みにくさに注意: 文字の向きを変えすぎると、読みにくさを感じさせる可能性があります。デザインの一貫性と読みやすさを考慮して使用することが重要です。

まとめ

text-orientationは、CSSで縦書きテキストの文字向きを調整できる便利なプロパティです。日本語や中国語の縦書きレイアウトで特定の文字（英字や数字）の向きを自然に調整したり、デザインに合わせて文字の見た目を変えたりすることができます。縦書きデザインのクオリティを向上させるために、このプロパティを活用して、より美しく見やすいレイアウトを実現してください。