Ctrl+Fより賢く: Webページのコンテンツに直接リンクする

• Text Fragmentは、アンカーを追加する必要なく、Webページ内の特定のテキストに正確にリンクできる強力なWebプラットフォーム機能
• この機能は、ハイライトされたテキストのスタイルを指定する方法を提供する ::target-text CSS疑似要素によって補完される
• テキストフラグメントURLの基本構文:
  • https://example.com/page.html/…]
• ハッシュ記号の後ろに :~: 特殊構文を追加し、text= の後ろに次を追加:
  1. prefix-: リンク先のテキストの直前に来る必要があるテキスト文字列。一致候補が複数ある場合に、ブラウザが正しいテキストへリンクするのに役立つ。この部分はハイライトされない
  2. textStart: ハイライトするテキストの開始位置
  3. textEnd: ハイライトするテキストの終端部分
  4. -suffix: prefix- と同様に機能するが、テキストの後ろに来る文字列で、前に付くハイフンがそれを示す。一致候補が複数あるときに便利で、リンクされたテキストと一緒にハイライトはされない
• ブラウザがテキストフラグメントをサポートしている場合、::target-text 疑似要素を使ってハイライトされたテキストのスタイルを変更できる
  • ::target-text { background-color: yellow; }
• 次のプロパティのみ変更可能:
  • color
  • background-color
  • text-decoration および関連プロパティ
  • text-shadow
  • stroke-color, fill-color, stroke-width
  • カスタムプロパティ
• ブラウザサポートとフォールバック動作
  • テキストフラグメントは現在すべてのブラウザでサポートされている
  • ::target-text 疑似要素はまだSafariではサポートされていないが、Technology Preview版では利用可能
  • ブラウザでこの機能がサポートされていない場合、テキストのハイライトやスクロールなしでページが読み込まれる
  • ハイライトのデフォルトスタイルはブラウザごとに異なる
• まとめ
  • 当初はテキストフラグメントがChrome専用機能だと思っていたが、実際にはすべてのブラウザで実装できるオープンWebベースの仕組みだと気づいた
  • 特に信頼できる生成AIシステムで、この機能がより広く使われることを期待している
  • すべてのユーザーがテキストフラグメントを簡単に使えるようになるとよい
• アップデート
  • Chromiumベースのブラウザには、すでに特定のテキストへのリンクを生成する機能が組み込まれている
  • Chromeを使用している場合、テキストをハイライトして右クリックすると、コンテキストメニューに「ハイライトへのリンクをコピー」オプションがある

[plorrr]

たまにGoogle検索で見かけていたのですが、こういうものだったんですね

[siisee11]

Arcブラウザで「テキストへのリンクをコピー」がこういう機能だったんですね..!

[galadbran]

Edgeブラウザーでは、テキストを選択して右クリックのコンテキストメニューを開くと "Copy link to highlight" というメニューがあるのですが、その機能のおかげでこういう仕様があることを知りました。

[galadbran]

Firefox では、https://github.com/ichaoX/ext-textFragment という拡張機能をインストールして使っています。

[joyfui]

おお、良い拡張機能をありがとうございます。

[huiya]

おお、これは面白いですね

[secret3056]

こんな機能が……ブラウザの世界は知れば知るほど、本当にいろいろなものがありますね。

https://ja.news.hada.io/topic/?id=17474…