Treesaver:利用HTML/CSS語法編輯雜誌排版風格網頁

目前因為電子閱讀裝置的硬體發展以及內容產業漸漸開始重視數位出版或數位內容的相關議題,有越來越多的內容開始以不同的形式出現在不同的載具上,其中在網頁上的發展一直都是很重要的戰場之一。倘若可以利用HTML/CSS(或是HTML5)或是像EPUB這樣的標準,在不同的瀏覽器或是不同的閱讀裝置上,<strong>理論上</strong>可以確保一致的閱讀與使用體驗。 然而事情並非真的如此美好,無論是跨瀏覽器、跨平台、跨裝置或是處理不同解析度的問題,其實都是非常麻煩的。到目前為止,仍然陸陸續續有許多與數位出版、排版相關的解決方案不斷出現,從各種重量級的解決方案,例如Adobe的InDesign與相關產品,到輕量級的各種HTML5/EPUB相關出版工具等等,琳琅滿目。 而今天要為各位介紹的<a href="http://treesaverjs.com/">Treesaver</a>就是一個以JavaScript打造,號稱只要透過HTML/CSS的網頁排版方式就能在網頁上做到雜誌排版風格的框架。
評論
評論

目前因為電子閱讀裝置的硬體發展以及內容產業漸漸開始重視數位出版或數位內容的相關議題,有越來越多的內容開始以不同的形式出現在不同的載具上,其中在網頁上的發展一直都是很重要的戰場之一。倘若可以利用 HTML/CSS(或是 HTML5)或是像 EPUB 這樣的標準,在不同的瀏覽器或是不同的閱讀裝置上, 理論上 可以確保一致的閱讀與使用體驗。

然而事情並非真的如此美好,無論是跨瀏覽器、跨平台、跨裝置或是處理不同解析度的問題,其實都是非常麻煩的。到目前為止,仍然陸陸續續有許多與數位出版、排版相關的解決方案不斷出現,從各種重量級的解決方案,例如 Adobe 的 InDesign 與相關產品,到輕量級的各種 HTML5/EPUB 相關出版工具等等,琳琅滿目。

而今天要為各位介紹的 Treesaver 就是一個以 JavaScript 打造,號稱只要透過 HTML/CSS 的網頁排版方式就能在網頁上做到雜誌排版風格的框架。

Treesaver 也實際提供了兩個示範應用,有興趣的讀者可以直接點選連結進去體驗:

實際利用 Treesaver 的感想是:介面與互動的設計相當不錯,例如畫面的左邊固定是目錄的按鈕,你在瀏覽的過程中可以隨時快速跳到自己想看的章節;畫面的下方則是目錄、導覽列,你也可以直接從主畫面的左邊、右邊來進行翻頁,或是利用滑鼠滾輪、鍵盤方向鍵來進行翻頁。我實際利用手持觸控裝置(HTC Desire HD 手機,搭載 Android 內建的瀏覽器),瀏覽的體驗也是非常順暢,當手機進行 90 度的旋轉重新計算分頁時的速度也非常快。

過去我們總會利用許多不同的 HTML/CSS 加上 JavaScript 技巧來達成在網頁上進行特殊排版目的的需求,然而這樣的過程經常是費時費工的,不僅排版本身就非常棘手,要處理不同瀏覽器或是解析度的問題時更是麻煩。Treesaver 讓我印象深刻的一個特色就在於當瀏覽器大小改變時(意味著實際瀏覽網頁的可視解析度改變),Treesaver 會很聰明的為你計算目前的可視範圍並且重新進行分頁,更重要的是,分頁的計算會同時考慮圖片(以及圖說)、文字段落,也因此對於雜誌編輯人員、網頁設計師來說,可以省去許多在處理分頁或圖文段落的時間。

本文開頭的圖片是當瀏覽器在常用的瀏覽尺寸時,顯示的內容,當我將瀏覽器縮小時,可以發現同樣的內容已經被分成更多的頁面,連圖片的尺寸也會跟著動態調整。


目前 Treesaveer 仍在持續開發的階段,目標是打造一個輕量的網頁雜誌排版 JavaScript framework,有興趣的讀者可以嘗試使用來進行一些豐富的排版,或許可以作為一種數位出版的模式參考。