竹取web JS版:按一下讓網頁內文變直書,適用中、日、韓文

taketori-01

今天在Twitter上看到朋友在分享著這篇文章:「2010年11月25日(木) : ついに WebKit が縦書きの実装に着手!」,老實說,看不太懂這篇日文在討論的網頁技術,不過倒是從裡面發現了一個有趣的線上小工具:竹取 Web JS 版」,這是個書籤小工具,可以快速的將目前瀏覽的中文、日文、韓文網頁,從橫書變成直書文字,而且排版效果優異!

我之前也介紹過一款「讓網頁上的漢字從橫書變直書,玩轉中文之美」線上工具,不過那個網站已經失效了,而且該線上工具的作法是重新排列你輸入的所有文字,製造出「假直書」的效果,但本質上還是橫書文字。

而「竹取 Web JS 版」則是真正的將網頁內文版型轉成直書,如本文開頭圖片所示,竹取JS只會轉換「內文」部分,不會讓網頁排版亂掉,並且轉換後在字體大小、標點符號、換行與圖片的排版上都十分優秀,值得好好玩一玩(也歡迎讀者留言推薦哪些網站適合改成直書閱讀?)

 

01.

首先來到「竹取Web JS版」網頁,進入後你會看到原本是橫書的網頁內容自動轉換成直書。這時候看不懂日文沒關係,我們利用下方的捲軸,往左方捲動網頁內容。

taketori-02

 

02.

一直到出現「右クリックで「お気に入り」に保存するか、リンクをドラッグしてブックマークバーにドロップします。(右擊“我的最愛”以保存,或者拖放到書籤的鏈接。)」這一段,你可以看到有兩個超連結「「縦書きにする」」、「「縦書き可能にする」」。

在這兩個超連結上點擊右鍵,將其加入瀏覽器書籤(我的最愛)中即可;或者也可以直接拖曳連結到瀏覽器的書籤工具列。

關於這類型Bookmarklets書籤小工具的使用,可以參考舊文:「我目前常常使用的瀏覽器 Bookmarklets 書籤小工具2010版」。

taketori-03

 

03.

接著來到任何中文、日文、韓文網頁,點擊剛剛加入書籤的連結,就可以啟動內文直書轉換的功能,剛剛的兩個連結功能分別如下:

縦書きにする:點擊這個書籤連結後,直接把目前網頁中的主要內文轉成直書。

縦書き可能にする:點擊這個書籤連結後,會彈出一個確認對話框,按下OK,然後在網頁中你想變成直書的文字段落上雙擊滑鼠左鍵,就可以把該段文字變成直書。

就像本文一開始說的,轉換效果非常優異,直書文字排版整齊舒適,而且我特別喜歡它針對「<strong>(強調文字的語法)」的轉換效果,會變成古書中在字旁邊加點來強調的用法,非常有意思。

taketori-04

 

04.

既然這個工具叫做「竹取Web JS版」,那麼當然就表示還有一個舊的「竹取Web版」,在後面這個舊版中,輸入想要轉換的網頁網址,就可以把該網頁內容轉成直書。

不過,舊版的直書排版效果沒有JS版優秀,所以推薦大家試試看竹取Web JS。

taketori-05

留言

  1. 挺有意思的工具,下載來試試。

    回覆刪除
  2. 還不錯呢

    只可惜
    沒辦法變成網頁連結,針對單一部落格文章對轉換

    回覆刪除
  3. 意思是因應電子書的發展,未來瀏覽器引擎會支援直書,
    該文是就WebKit這支排版引擎,以CSS語法做些demo。

    回覆刪除
  4. 馬上套用到我的詩歌筆記本網站(http://mulberry.posterous.com/),古典詩歌和這個bookmarklet的排版結合在一起,感覺真不錯啊。

    回覆刪除
  5. http://taketori.org/ReadMe.html#option

    回覆刪除

張貼留言

為了避免垃圾廣告留言過多,開始測試「留言管理」機制,讓我可以更容易回應讀者留言,並更簡單過濾掉廣告,但只要不是廣告留言都會通過審核。

這個網誌中的熱門文章

全家沖印、 7-11 列印照片誰好用?立可得與 ibon教學+比較表

Google Maps 我的地圖完全教學!規劃自助旅行攻略

Slack 完整教學與上手心得:找到正確的團隊溝通之道

Google NotebookLM 免費中文 AI 筆記實例教學,老師、學生、創作者利器

畫張圖說得更清楚! Napkin 用 AI 幫你的簡報文章手繪視覺思考圖

Google 表單自動關閉回覆教學:時間人數到達就過期

為什麼大家愛用 Trello ?最佳整理教學讓事情井然有序

Miro 遠距工作開視覺會議的免費強大白板,專案圖解實例教學

最簡單養成習慣方法是「解決問題」,不靠時間表、獎懲與意志力

Excalidraw 免費 AI 生成流程圖,一鍵畫出知識圖表、專案流程、寫作大綱