Gutenberg 开放原始码网页列印样式下载,让输出网页更正确美观

广告也精彩

Gutenberg 开放原始码网页列印样式下载,让输出网页更正确美观

现今已经很少人会把网页内容列印出来,PDF 表格表单大多能在线上处理,再加上家里可能也不太放印表机,其实超商就能列印影印传真,实在是没有必要再添购一台机器放家里占空间。但对网页设计者来说,有时候仍得兼顾到使用者列印内文的需求,但要怎么样才能让列印出来的画面符合使用者期待呢?至少列印时该出现的部分要出现,不该出现的广告也尽量避免,颜色什么的调整一下,其实可以透过 CSS 样式来最佳化列印效果。

如果你有注意到,很多网站在CSS 部分会在不同情境套用不同样式、排版,例如萤幕看到的效果可能跟列印出来的不同,假如你有一个深色背景网站且内容时常会需要被列印出来,你不会希望使用者印出来的内容是一大片黑色,这时候就能写一个用于列印时呈现的CSS。

不想浪费太多时间写自己网站的列印 CSS 样式,其实网路上也有「典范」让网页开发者免费下载、使用,本文介绍的「Gutenberg」就是一款开放原始码专案,名称也是大有来头。古腾堡是第一位发明活字印刷术的欧洲人,最著名的成就「古腾堡圣经」至今仍是美学及排版典范,这个计画就是以他为名。

Gutenberg 原理很简单,只要把 CSS 下载、上传到你的网页伺服器,加上一段原始码后就能套用;若你对 CSS 已经很熟悉,还可以直接改写一下,放入自己的 CSS 样式表。或者你也能直接取用网站提供的 CDN 路径,为自己网站、部落格加入一个更易于列印的样式。

网站名称:Gutenberg
       网站链结:https://github.com/BafS/Gutenberg

使用教学

STEP 1
开启 Gutenberg 网站后,从「How to use」找到使用方法。

简单来说,只要从 GitHub 专案页面将 gutenberg.css 档案下载下来,上传至网页伺服器,最后修改一下网页原始码将 CSS 语法加入即可使用。此外,在 dist 资料夹内还能找到不同配色的布景主题。

Gutenberg 开放原始码网页列印样式下载,让输出网页更正确美观

Gutenberg 开放原始码网页列印样式下载,让输出网页更正确美观

如果你觉得要自己上传CSS 样式表很麻烦,或者你使用BSP(部落格服务提供商)无法自己托管档案,只要使用网站提供的语法(已将样式表托管于CDN 服务)一样能享受Gutenberg 的美妙。这个方法相对来说就更简单一些,而且不会对原有的网页样式造成任何影响。

Gutenberg 开放原始码网页列印样式下载,让输出网页更正确美观

STEP 2
专案提供 Gutenberg demo 也就是示范页面,有两种样式:Modern style、Old style,点击进去后透过浏览器的「列印」或「预览列印」功能就能看到效果。

此外,Gutenberg 也能透过一些简单的样式设定来控制列印效果,例如加上 no-print 样式来隐藏元素、使用 page-break-before 或 page-break-after 来强制断开页面等等。

Gutenberg 开放原始码网页列印样式下载,让输出网页更正确美观

Gutenberg 开放原始码网页列印样式下载,让输出网页更正确美观

STEP 3
下图是我从Gutenberg 示范页面列印的预览效果,可以看到和原有的网页样式不太一样,包括在标题、引言、超链结及内文部分都有整齐而且更好的列印效果,因为撷图无法很全貌展现出阅读和列印的效果对比,有兴趣的朋友可以在Demonstration 测试一下。

Gutenberg 开放原始码网页列印样式下载,让输出网页更正确美观

Gutenberg 开放原始码网页列印样式下载,让输出网页更正确美观

下图则是Old style(Gutenberg 的另一种样式),看得出来在字型变化及设计不太一样,只要挑一个你喜欢的样式,把CSS 档下载后透过Gutenberg 提供的语法,将列印样式整合到现有的网站即可。

Gutenberg 开放原始码网页列印样式下载,让输出网页更正确美观

Gutenberg 开放原始码网页列印样式下载,让输出网页更正确美观

至于加入后要如何测试 Gutenberg 有没有在自己的网站正常运作呢?很简单,重新整理网页确认有载入列印用的样式表后,点选浏览器的「预览列印」即可看到效果。

广告也精彩

您可以选择一种方式赞助本站

支付宝扫一扫赞助

微信钱包扫描赞助

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: