テキストフラグメント

テキストフラグメントは、URL フラグメントの特定の構文を使用することにより、作成者が ID で注釈を付けなくても、ウェブ文書内のテキストの特定の部分に直接リンクできるようにするものです。対応しているブラウザーは、リンクされたテキストに注意を引く方法を自由に選べます。例えば、色の強調表示やページ上のコンテンツへのスクロールなどです。これは、ウェブコンテンツの作成者が、使用可能な ID が存在しなくても、制御下にない他のコンテンツに深くリンクすることができるため有益なものです。さらに、ユーザーが互いに交換するための、より効果的なコンテンツ共有リンクを生成するために使用することもできます。

概念と使用方法

従来、ウェブの重要な機能の 1 つが、常に異なる文書の間にリンクを張る能力でした。

特定の文書フラグメントにリンクする場合の課題は、リンク先のページの作者が 実際に リンクするためのアンカーを配置する必要があることです。上の 2 つ目の例は、h2 要素の ID が ブラウザーの互換性 であるものにリンクしています。

html
<h2 id="ブラウザーの互換性">
  <a href="#ブラウザーの互換性">ブラウザーの互換性</a>
</h2>

ID が変更または削除された場合、文書フラグメントは無視され、リンクはページの先頭にリンクされるだけです。これはグレイスフルデグラデーションの観点からは合理的ですが、リンクの作者がページの作者に頼る必要なく、リンク先を完全に制御することができれば、間違いなく良いことでしょう。

テキストフラグメントはこれを実現します。これにより、作者はリンク先のテキストコンテンツを、文書フラグメントではなく、柔軟な様式でリンクすることができます。

構文

テキストフラグメントは文書フラグメントと似た様式であり、URL の後にハッシュ記号 (#) を付けます。しかし、構文は多少異なります。

url
https://example.com#:~:text=[prefix-,]textStart[,textEnd][,-suffix]

理解が必要な主な部分は次の通りです。

:~:

この一連の文字は「フラグメントディレクティブ」とも呼ばれ、次に来るのが 1 つ以上のユーザーエージェント命令であることをブラウザーに指示します。これは、読み込む際に URL から取り除かれ、作成者のスクリプトが直接操作することはできません。ユーザーエージェント命令はディレクティブとも呼ばれます。

text=

テキストディレクティブです。これはブラウザーにテキストフラグメントを渡し、リンク先文書内のどのテキストにリンクされるかを定義します。

textStart

リンク先テキストの始まりを指定する文字列です。

textEnd 省略可

リンク先テキストの終わりを指定する文字列です。

prefix- 省略可

後にハイフンが付く文字列で、リンク先テキストの前に来るべきテキストを指定します。これは、複数の一致するテキストがある場合に、ブラウザーが正しいリンク先テキストを選択するために利用されます。

-suffix 省略可

前にハイフンが付く文字列で、リンク先テキストに続くテキストを指定します。これは、複数の一致するテキストがある場合に、ブラウザーが正しいリンク先テキストを選択するために利用されます。

対応しているブラウザーは、リンク先の文書内で指定したディレクティブと一致する最初のテキストフラグメントまでスクロールし、ハイライト表示します。なお、アンパサンド (&) 文字で区切ることで、同じ URL でハイライトする複数のテキストフラグメントを指定することが可能です。

使用上の注意

  • textStarttextEndprefix--suffix の値はパーセントエンコードする必要があります。

  • 照合時は、大文字小文字を区別しません。

  • 個々の textStarttextEndprefix--suffix の文字列は、完全に同じブロックレベル要素内に存在する必要がありますが、照合処理全体では複数の要素境界をまたぐことができます。

  • セキュリティ上の理由から、この機能ではリンクを noopener コンテキストで開く必要があります。この機能を使用する場合、rel="noopener"<a> 要素に追加する必要があり、window.open() 呼び出し時には noopener を追加する必要があります。

  • テキストフラグメントは、完全な(同じページでない)、ユーザー主導のナビゲーションの場合にのみ呼び出されます。

  • テキストフラグメントはメインフレームにのみ適用されます。<iframe> の内部ではテキストは検索されませんし、iframe ナビゲーションではテキストフラグメントは呼び出されません。

  • オプトアウトを希望するサイトのために、Chromium ベースのブラウザーは、ユーザーエージェントがテキストフラグメントを処理しないように送信できる文書ポリシーヘッダーの値に対応しています。

    http
    Document-Policy: force-load-at-top
    

メモ: 指定されたテキストフラグメントがリンク先の文書内のどのテキストとも一致しない場合、またはブラウザーがテキストフラグメントに対応していない場合、テキストフラグメント全体が無視され、文書の先頭にリンクされます。

textStart による単純なテキストフラグメント

textStart と textEnd

prefix- や -suffix の例

複数のテキストフラグメントが付いた URL

アンパサンド (&) 文字で区切ることで、同じ URL で強調表示する複数のテキストフラグメントを指定することができます。

構文を正しく指定したはずなのに、複数のテキストフラグメントがハイライトされない場合、想定していたものとは異なる部分がハイライトされているだけかもしれません。ハイライトされていても、画面の外側に表示されている場合もあります。

一致するテキストフラグメントのスタイル付け

ブラウザーは、既定の方法でハイライトされたテキストを、自由にスタイル設定することができます。CSS 擬似要素モジュールレベル 4 では、::target-text 擬似要素を定義し、独自のスタイル付けができるようにしています。

例えば、scroll-to-text デモでは、次の CSS を使用しています。

css
::target-text {
  background-color: rebeccapurple;
  color: white;
}

上記のリンクを対応するブラウザーで開くこと、その効果を確認することができます。

テキストフラグメントへのプログラムからのアクセス

対応しているブラウザーでは、現在の文書で一致するテキストフラグメントの情報は FragmentDirective オブジェクトで得られ、 Document.fragmentDirective プロパティでアクセスすることができます。

対応するブラウザーの開発ツールで、1 つ以上の一致するテキストフラグメントがあるタブの中で、以下のものを実行してみてください。

js
document.fragmentDirective;
// 対応していれば、空の FragmentDirective オブジェクトを返す
// それ以外の場合は undefined

この機能は、現在は主に機能検出を目的としていますが、将来的には、翻訳ヒントなど他の情報を記載するために展開することができます。

リファレンス

API

FragmentDirective

現在の文書内の強調表示されたテキストフラグメントを表すオブジェクト。

Document.fragmentDirective

現在の文書の FragmentDirective を返す。

CSS

::target-text

現在の文書内の強調表示されたテキストフラグメントを表します。作成者がテキストフラグメントのスタイル設定をカスタマイズすることができます。

仕様書

Specification
URL Fragment Text Directives
# fragmentdirective
CSS Pseudo-Elements Module Level 4
# selectordef-target-text

ブラウザーの互換性

html.elements.a.text_fragments

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
URL text fragments

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support

api.FragmentDirective

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
FragmentDirective

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
No support
No support
See implementation notes.

css.selectors.target-text

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
::target-text

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support

関連情報