Treesaver:利用HTML-CSS语法编辑杂誌排版风格

Treesaver:利用HTML/CSS语法编辑杂誌排版风格

目前因为电子阅读装置的硬体发展以及内容产业渐渐开始重视数位出版或数位内容的相关议题,有越来越多的内容开始以不同的形式出现在不同的载具上,其中在网页上的发展一直都是很重要的战场之一。倘若可以利用 HTML/CSS或是像 EPUB 这样的标準,在不同的浏览器或是不同的阅读装置上, 理论上 可以确保一致的阅读与使用体验。

然而事情并非真的如此美好,无论是跨浏览器、跨平台、跨装置或是处理不同解析度的问题,其实都是非常麻烦的。到目前为止,仍然陆陆续续有许多与数位出版、排版相关的解决方案不断出现,从各种重量级的解决方案,例如 Adobe 的 InDesign 与相关产品,到轻量级的各种 HTML5/EPUB 相关出版工具等等,琳琅满目。

而今天要为各位介绍的 Treesaver 就是一个以 JavaScript 打造,号称只要透过 HTML/CSS 的网页排版方式就能在网页上做到杂誌排版风格的框架。

Treesaver 也实际提供了两个示範应用,有兴趣的读者可以直接点选连结进去体验:

实际利用 Treesaver 的感想是:介面与互动的设计相当不错,例如画面的左边固定是目录的按钮,你在浏览的过程中可以随时快速跳到自己想看的章节;画面的下方则是目录、导览列,你也可以直接从主画面的左边、右边来进行翻页,或是利用滑鼠滚轮、键盘方向键来进行翻页。我实际利用手持触控装置,浏览的体验也是非常顺畅,当手机进行 90 度的旋转重新计算分页时的速度也非常快。

Treesaver:利用HTML/CSS语法编辑杂誌排版风格

过去我们总会利用许多不同的 HTML/CSS 加上 JavaScript 技巧来达成在网页上进行特殊排版目的的需求,然而这样的过程经常是费时费工的,不仅排版本身就非常棘手,要处理不同浏览器或是解析度的问题时更是麻烦。Treesaver 让我印象深刻的一个特色就在于当浏览器大小改变时,Treesaver 会很聪明的为你计算目前的可视範围并且重新进行分页,更重要的是,分页的计算会同时考虑图片、文字段落,也因此对于杂誌编辑人员、网页设计师来说,可以省去许多在处理分页或图文段落的时间。

本文开头的图片是当浏览器在常用的浏览尺寸时,显示的内容,当我将浏览器缩小时,可以发现同样的内容已经被分成更多的页面,连图片的尺寸也会跟着动态调整。

Treesaver:利用HTML/CSS语法编辑杂誌排版风格

目前 Treesaveer 仍在持续开发的阶段,目标是打造一个轻量的网页杂誌排版 JavaScript framework,有兴趣的读者可以尝试使用来进行一些丰富的排版,或许可以作为一种数位出版的模式参考。