—— 這是拉辛的媽媽說的。

原來生命不只像阿甘的巧克力呀~~ ^_^

這麼說的話，生命也像下酒菜。
不配點啤酒怎麼行呢！
—— 這是我酒鬼朋友說的。

想喝酒就說嘛，幹嘛廢話拿~~麼多 ^_^

這酒一喝，
就讓我想起 23 年前的九二一，
沒想到轉眼間，竟已過了 23 年。
（來啦！喝一杯啦！）

今天九二一，
整個台灣也在搖搖晃晃中，
所幸這次沒什麼大礙，
感謝老天，大家平安最重要。

嗯。

酒足飯飽之後，
既然拉辛的媽媽也說了，
我們的心總想要更多，
今天就來看看，
怎麼補足昨天的不足吧。

其實我們最原始的目的，
只是希望在看譯文時，
可以更方便快速看到原文。

昨天的做法，雖然做到了快速切換，
但由於文字對齊的問題，
讓對照的效果大打折扣。

既然如此，難道
沒有更好的對齊方式嗎？

其實，我們可以試著去偵測
目前網頁呈現在視窗內的相對位置，
然後把位置記錄下來。

window.scrollY // 網頁在瀏覽器視窗內，當下所捲動到的 Y 軸（上下）位置

切換翻譯之後，可以再檢查網頁在視窗內的位置，
重新捲動到之前所記錄的位置。

這個做法聽起來蠻合理，
但由於只能偵測到網頁所呈現的「像素位置」，
而不是網頁所呈現的「內容位置」，
所以必須進行一連串的計算與轉換，
才能對齊網頁內容的位置。
（如果想知道類似的做法，
　可以參考一下《Capture product visible on viewport when user stops scrolling》這篇文章的示範）

（圖片取自上面那個網頁）

這種「對齊」的做法，實在不夠簡潔有力，

山不轉路轉，
這個問題其實還有另一種解法。

在 HTML 的標籤屬性中，
有一個叫做 title 的屬性。
如果標籤設定了 title 屬性，
只要把滑鼠游標移動到該標籤上稍作停留，
title 的內容就會自動浮現出來。

這樣的呈現方式，優雅多了。

但如果依循我們之前的做法，
要幫 HTML 標籤加上 title 屬性，
卻又不知道該怎麼添加才好。

因為在網頁的 HTML 裡，
各種標籤千奇百怪，
究竟哪些標籤要添加 title 屬性、哪些不用添加，
這實在是一件很複雜的判斷工作。

有時候，
太過於糾結眼前的小問題，
常會找不到最好的做法。
這時不如跳脫出來，
放眼大局，看長遠一點。

我們想一想，
畢竟要處理的是翻譯文字。
在處理語言文字的領域中，
有個叫做 NLP（自然語言處理）的專業。
其中有一個重要的處理步驟，
就是對文字進行「分句」。

在處理自然語言時，
很多處理起來相當麻煩的問題，
在進行過「分句」 之後，
自然就會迎刃而解。

我們這個問題，也是如此。

如果想使用現成的 NLP 功能，
可以查詢一下 Javascript 的 NLP 相關模組，
就能找到 nlp.js、WinkNLP、natural 等等
這幾個正在發展中的工具模組。
有時間的話，
也可以深入研究一下。

不過在自然語言處理方面，
Python 還是比 JS 更成熟、好用。
例如 nltk 這個老牌的 Python 模組，
就匯集了許多 NLP 相關的最新做法，
其中的 tokenize 子模組，
就有一個現成可用來分句的 sent_tokenize() 函式。

import nltk

sentences = nltk.tokenize.sent_tokenize(text, language='english')

在自然語言處理方面，
Python 還是比 JS 更成熟、好用。
將來我們要擴展翻譯工具的能力，
Python 終究是迴避不掉的程式語言。

還好 Python 學起來非常容易，
而且真的非常好用，
花時間去學 Python 肯定值得。

話說回來，Python 再厲害，
現在一時也還派不上用場。

而且，上面所提的那些分句功能雖然好用，
但主要是用來處理單純的文字。
而我們所要處理的對象，
卻是複雜很多的 HTML。

HTML 想要進行分句，
確實沒那麼簡單。
我原本以為，這世界那麼大，
總有人已經做過這件事了吧。
但我在 Github 找了又找，
卻總是偏尋不著。

我想也許是我找得不夠仔細，
但這問題也不能一直懸宕於此，
既然找了半天都找不到，
那就... 自己寫一個來用吧！

明天，我們就來自幹一個 HTML 的分句功能吧！