Newly available 条件付きOK。主要ブラウザで対応済みだが、古いバージョンでは未対応の場合がある。フォールバックを検討。

paint-order

Experimental: これは実験的な機能です。

本番で使用する前にブラウザー互換性一覧表をチェックしてください。

paint-order は CSS のプロパティで、テキストコンテンツやシェイプが描画されるときの塗りつぶしと輪郭 (およびマーカーの描画) の順序を制御することができます。

描画順序SVG

対応ブラウザ

機能 デスクトップ モバイル
Chrome
Edge
Firefox
Safari
Chrome Android
Safari iOS
paint-order
123
123
60
11
123
11
その他
svg.global_attributes.paint-order

ペイント順序属性は、特定のシェイプまたはテキスト要素の塗りつぶし、ストローク、およびマーカーがペイントされる順序を指定します。
≤73
79
≤66
≤12
≤73
≤12
1+対応 (バージョン) 未対応 ※注釈あり サブ機能の解説は MDN Web Docs (CC BY-SA 2.5)
注釈 3件
制限事項
  • このブラウザでは部分的にしか実装されていません
削除済み
  • このバージョンで機能が削除されました (123)
実装メモ
  • ストロークされた HTML テキストには影響しません。バグ 41372165 を参照してください。
注釈 3件
制限事項
  • このブラウザでは部分的にしか実装されていません
削除済み
  • このバージョンで機能が削除されました (123)
実装メモ
  • ストロークされた HTML テキストには影響しません。バグ 41372165 を参照してください。
注釈 3件
制限事項
  • このブラウザでは部分的にしか実装されていません
削除済み
  • このバージョンで機能が削除されました (11)
実装メモ
  • ストロークされた HTML テキストには影響しません。バグ 168601 を参照してください。
注釈 3件
制限事項
  • このブラウザでは部分的にしか実装されていません
削除済み
  • このバージョンで機能が削除されました (123)
実装メモ
  • ストロークされた HTML テキストには影響しません。バグ 41372165 を参照してください。
注釈 3件
制限事項
  • このブラウザでは部分的にしか実装されていません
削除済み
  • このバージョンで機能が削除されました (11)
実装メモ
  • ストロークされた HTML テキストには影響しません。バグ 168601 を参照してください。

基本構文

CSS 
.outlined-text {
  -webkit-text-stroke: 3px black;
  paint-order: stroke fill;
  color: white;
}

ライブデモ

Stroke Fill order

CSS Stroke fill order demo.

プレビュー全画面表示

Fill Stroke order

CSS Fill stroke order demo.

プレビュー全画面表示

thickgetcharacter

CSS thickgetcharacter demo.

プレビュー全画面表示

実務での使いどころ

  • テキストアウトラインの最適化

    ストロークをフィルの下に描画することで、太いアウトラインがテキストの可読性を損なわないようにします。

注意点

  • マーカーの描画順序はSVGコンテンツでのみ効果があり、通常のHTML要素には影響しません。

アクセシビリティ

  • 描画順序の変更はビジュアル表現のみに影響し、テキストの読み上げ順序には影響しません。

参考リンク