Scroll to Text

Scroll to Text

Chrome 最近有個新功能叫做Scroll to Text Fragment，雖然在 Chrome Platform Status 網站那邊寫 M80 會可以用，不過我實際上測試正式版的 Chrome 80 還沒有，但是 Chrome Canary 已經是預設啟用了。這個功能讓你可以在網址內的 Fragment 段（#後面那段），用新定義的語法來讓瀏覽器直接捲動到指定的文字位置，語法如下：

#:~:text=[prefix-,]textStart[,textEnd][,-suffix]
          context  |-------match-----|  context

如果有在用 Chrome Canary 的可以直接試試看這個連結。這個語法其實還蠻靈活的，可以和以前 id identifier 並用：

#targetID:~:text=theText

這樣如果找不到文字，瀏覽器還可以改用 targetID 定位；如果網頁內有多個一樣的文字，可以用prefix-和-suffix給出前後文來讓瀏覽器找到正確的目標；再來就是如果要標註的文字很長，也可以用textStart,textEnd來標註，這樣就不用在網址內放一大串文字了；然後也可以標註多段文字，用&切開，和給參數的格式一樣：

#:~:text=firstText&text=secondText

正式的文件現在是放在 WICG 那邊，GitHub 那邊的Proposal repo則是有一段解釋為什麼選擇用:~:當分割符號的段落，我覺得這種脈絡的紀錄是很重要的，這邊簡單說一下，一開始有考慮過##這種比較容易想到形式，但是有些 URL parser 是由右到左的可能會有錯誤，再來他們列出一堆不太會有人去用的組合來當候選，然後去看 Google 那邊過去五年的紀錄，結果就是:~:最沒人用，只有 0.0000039% 的比例，所以目前是選擇這個分割符號。

我是蠻喜歡這新功能（標準？）的，Mozilla 也覺得還可以考慮看看，不過目前這個功能似乎還沒在 stable channel 啟用，應該是因為隱私問題，Chrome 負責的團隊也有整理相關的資訊，大概簡單說就是有可能透過頁面的讀取時間或是scrollTop的值來判斷你開啟的頁面內有沒有特定字串，然後就會有外洩的疑慮。另外還有一個讓人擔心的問題是這個功能可能會讓那些本來用 fragment 當成 route 的 SPA 壞掉，W3C TAG design review那邊他們自己也有提到。

其實這個 scroll to text 的功能在之前還有一套提案，不過不是由瀏覽器開發商所提，而是 indieweb 提的，叫做Fragmention，這組提案功能就比較陽春而且不成熟了：

#some%20text

重點在裡面那個%20，也就是空白字元，Freagmention 的提案是你的目標文字要有空白，因為 HTML 的 id 不能包含空白字元，所以如果有空白字元就表示不是要找 id，這個提案由我來看就是很明顯沒搞過 i18n 的啊～