概要

text-emphasis-positionは、CSSでテキストに付けるアクセントマーク（点や丸など）の位置をカスタマイズするためのプロパティです。このプロパティを使用することで、アクセントマークの上下・左右の位置を調整し、縦書きや横書きのテキストに合わせた最適な配置が可能になります。特に日本語や中国語の縦書きテキストでアクセントの位置を調整する際に役立ち、テキストの視認性を向上させます。

text-emphasis-positionの基本構文

text-emphasis-position: <vertical> <horizontal>;

• vertical
  アクセントマークを上下に配置する位置を指定します。overまたはunderを指定します。
• horizontal
  アクセントマークを左右に配置する位置を指定します。leftまたはrightを指定します。

値の説明

• over
  アクセントマークをテキストの上側に配置します（デフォルト設定）。
• under
  アクセントマークをテキストの下側に配置します。
• left
  アクセントマークをテキストの左側に配置します（主に縦書きテキストで使用）。
• right
  アクセントマークをテキストの右側に配置します。

使用例

基本的な使用例 - アクセントマークを上に配置

以下のコードは、アクセントマークをテキストの上に表示するデフォルトの設定例です。

.emphasis-over {
    writing-mode: vertical-rl; /* 縦書き設定 */
    text-emphasis: circle; /* 丸いアクセントマーク */
    text-emphasis-position: over; /* アクセントマークを上に配置 */
}

この設定により、アクセントマークがテキストの上側に配置され、縦書きで自然な見た目になります。

アクセントマークをテキストの下側に配置

アクセントマークをテキストの下側に配置することで、特定のデザイン効果を持たせたい場合の例です。

.emphasis-under {
    writing-mode: vertical-rl;
    text-emphasis: sesame; /* 胡麻のアクセントマーク */
    text-emphasis-position: under; /* アクセントマークを下に配置 */
}

この設定では、アクセントマークがテキストの下側に配置され、通常の表示とは異なるスタイルが演出されます。

横書きテキストでアクセントマークを左側に配置

横書きテキストでアクセントマークを左側に配置する例です。

.emphasis-left {
    writing-mode: horizontal-tb; /* 横書き設定 */
    text-emphasis: dot; /* 点のアクセントマーク */
    text-emphasis-position: left; /* 左側に配置 */
}

この設定により、アクセントマークがテキストの左側に表示され、横書き特有の強調スタイルが実現されます。

縦書きでアクセントマークを右下に配置

縦書きの設定でアクセントマークを右側かつ下側に配置する複合的な例です。

.emphasis-right-under {
    writing-mode: vertical-rl;
    text-emphasis: triangle; /* 三角形のアクセントマーク */
    text-emphasis-position: right under; /* 右下に配置 */
}

この設定により、アクセントマークが右下に表示され、縦書きのデザインの中で独特な強調効果を持たせることができます。

実用的なシナリオ

縦書きテキストの調整

縦書きテキストで、アクセントマークが邪魔にならないように位置を調整することで、読者の視認性を高めます。特に、詰まった文字間での見やすさを考慮して配置を変えるのに役立ちます。

言語固有のテキスト装飾

日本語や中国語などの言語では、アクセントマークが自然な位置にないと読みにくくなることがあります。適切な位置に配置することで、読み手にとってわかりやすいデザインを提供できます。

インタラクティブな強調表現

Webデザインでリンクやボタンに対してアクセントマークを付ける際に、位置を調整することで視覚的な効果を高め、インタラクションの効果を強調できます。

注意点

• ブラウザサポート: text-emphasis-positionは最新のブラウザで広くサポートされていますが、古いバージョンや一部の環境では正しく表示されないことがあります。デザインの確認とクロスブラウザ対応を行いましょう。
• 適切な組み合わせを選ぶ: overとunder、leftとrightは同時に使わないように注意しましょう。組み合わせによっては見た目が意図しない形になる場合があります。
• 縦書きと横書きの違い: 縦書きでの効果を最大限に発揮するプロパティですが、横書きでも適用できます。レイアウトに合わせて調整が必要です。

まとめ

text-emphasis-positionは、CSSでテキストのアクセントマークの位置を細かくカスタマイズできる便利なプロパティです。縦書きや横書きのテキストに合わせた位置調整が可能で、デザインの見た目や視認性を向上させることができます。特に日本語や中国語の縦書きデザインでアクセントを自然に配置したい場合に、このプロパティを活用して効果的なテキスト強調を実現してください。