簡介
一個閱讀英文版哈利波特的小網站reader，源碼放到GitHub上了，感興趣的可以看看。打開書籍後雙擊單詞能夠顯示釋義(如果有的話)，如下圖。推薦使用chromium-edge閱讀，翻頁動畫更舒服。
動機
大概是一兩年前吧，因爲想看看哈利波特英文原版，就在網上找了epub格式的電子書來看。當時用win10的edge瀏覽器看epub還是非常舒服的，不過因爲自帶的翻譯是英英互譯的，所以就想要是能變成中文的就好了。蒐羅了一些方法之後發現無果，就放棄了。後來2019下半年的時候，edge不支持看epub電子書了，很無奈，不過也更加堅定了做一個英文閱讀網站的目標了。然後就有了reader這個項目。
功能實現
翻譯
核心功能就是選中單詞後顯示單詞翻譯。因爲有道、谷歌等的翻譯API不是免費的，所以在GitHub上找了個詞庫，把詞庫導入導入到了數據庫中用，但翻譯的效果差強人意，還算湊合。另外，最初是打算做成鼠標懸浮顯示翻譯，搜索了一番發現只能通過將每個單詞用標籤包裹，設置標籤的mousehover事件實現，但是這樣的話，如果內容很多就會就會卡頓，體驗極差。當然進一步的考慮就是每次只加載一頁內容，按需加載，使用動畫實現翻頁等，摸索了一番，發現只會使網頁更加複雜，難於實現。於是就改爲了選中單詞顯示翻譯，這樣的話只需要考慮mouseup, selectionchange,selectstart等事件，算是一種折中。
翻頁動畫
最初的想法其實是一個win客戶端，並且核心功能還包括一個更好的翻頁動畫實現，參考edge的滾動動畫。但是進一步考慮後發現完全可以做成一個網站，然後使用edge(chromium版)瀏覽這個網站，那就不用自己再考慮翻頁動畫的實現。當然後來發現完全可以使用CSS動畫手動實現"翻頁"，通過三次貝塞爾曲線animation-timing-function: cubic-bezier(0.12, 1, 0.1, 1)，在需要翻頁的時候，使用動畫，將下一頁內容移入屏幕，將當前內容移除屏幕即可。另外，也可以使用requestAnimationFrame使用類似的功能，可以參考我的另一篇文章requestAnimationFrame的使用。
其它
其它大大小小的功能，雖然實現就幾行代碼，但是也是挺麻煩的
- 橫向翻頁實現
首先是要讓文本內容能夠橫向滾動，這個可以通過設置div的
column屬性以及overflow-y: hidden實現，可以參考HTML橫向滾動實現。文字排版的話，使用column後容器會自動排列內容，效果也不錯。起初是手動添加段落p然後判斷外層容器高度是否過大實現，但是這樣問題很多，所以後來就放棄了。很好奇HTML是否提供了將一個div中的內容溢出到另一個div中這種功能。 - 複製
這個就很扯了，js沒有直接的接口，當然你可以用其它的js庫實現，但是一種最簡單直白的方法就是:
設置一個看不見的
input– 手動將待複製的內容設置爲input的內容 – 使用input.select()函數選中 – 執行document.execCommand("copy", false) - break-before
似乎只有
h標籤的break-before: column會生效 - 手動觸發動畫
JavaScript沒有提供觸發動畫的接口，需要手動設置以及清除動畫屬性。
觸發動畫: 設置元素的動畫屬性(
div.style.animation)，並且在動畫結束後清除動畫(style.animation = "none") - CSS中的calc函數
在設置
left, top等屬性時，可以使用calc函數計算偏移量，比如left: calc(50% - 30px) - 父元素
position: relative, 子元素position: absolute子元素按照父元素定位。如果不定義父元素的relative定位，子元素會根據整個網頁定位
總結
繞了很多彎路，不過做出來後還是挺開心的，而且其它的書籍也能夠處理一下放上來閱讀。網站使用uWsgi簡單部署了一下，沒什麼可說的。代碼可以看GitHub，如果文章內容不對，還望評論指出。