Vert Cjk Web Save

(in alpha) 网页竖排。右起縱書。像古代一样。Make webs vertical lined layout, like traditional CJK writing method in east asian culture circle.(招日韩蒙越翻译)

Project README

将网页显示成 如 亚洲中华文化圈 传统书写方式 那样的 竖排排版。

Make webs render in vertical lined layout, like traditional CJK writing method in east asian culture circle.

另外,推荐 既适合程序员,也适合中文电子文献整编人员 的 「全文汉字关联关系可视化工具 & 字符信息、不寻常字符检视器」

使用

  1. 安装
  2. 打开一个网页
  3. 点工具栏上的按钮,开始竖排阅读
  4. 使用鼠标滚轮右左滚动,使用shift+鼠标滚轮上下滚动
  5. 有新内容通过ajax加载,或导航至新页面后,可再点工具栏按钮

警告:Use on your own risk!

效果及兼容性

网页兼容性约85%。文字选择可用。可缩放

原网页的js建立的交互性、链接点击、表单提交有极少量的损失(因<iframe> 及其 sandbox)

这个项目目前位于poc阶段!不保证显示准确性及数据安全性! 建议用分开的浏览器体验(或者,不用它来打开涉及账号或数据的网站)

更多截图见screenshots/

安装好后,可以点开以下sample links,点击工具栏按钮开始体验竖排阅读

形也

西式橫行,東式漸微。今物便捷,故從古者寡。

古法千萬種,不需盡取。然,古時有妙意、道、哲、法、技,而爲今人所遺失者,非不痛哉。當力存之,並正解之,莫令不復。(莫非今之誰人貢高,臆斷古人皆笨耶?)

如何之爲存?以神爲主,以形作從

何爲其「神」者?民知曉且正解其道、理、義、用、辨也。

何謂「形」者?書、文、字者,媒也。今獻此右起縱書豎排排版,形也,仿古玩物,略顯古形於今人眼前一二然。

神形俱存者,存。神存形易者,雖次亦存。若神失而形存者,非存也。亦當曉之。

人话:本品不能代替择道本身所需的判断取舍能力,及之后的阅读理解文籍的能力

原理

也欢迎开issue探讨

当前方案

简要描述:

  1. 使用<iframe>装载原网页(为了提高兼容性,需要降低安全性,修改返回头)

  2. 使用CSStransformrotate把整个<iframe>旋转

  3. 使用已旋转过CJK的自定义字体

    目前是FontForge中乱炖一通出来的。不懂字体,欢迎指正

  4. 旋转图片

其他方案

尝试过和想过其他方案。有些失败。欢迎探讨

正经方案

  • 让浏览器原生支持。等个大神出现改Firefox/Chromium源代码。若能说动浏览器商我们就完成任务了

  • 使用CSS现有的writing-mode: vertical-rl(支持不全)。但这需要整个网页开始设计时就考虑。现有网页只能重新设计

不正经方案

  • 使用旋转CJK的字体和旋转图片后,用canvas或Headless browser等方案对原网页进行实时截图,然后旋转展示截到的图给用户。

    这样可以避免影响原网页,但鼠标如何与内容交互需要一个方案

  • 避免使用自己的ttf:

    遍历每个文本节点,把每个CJK加<span>后单独旋转

  • 在Firefox的Browser Toolbox(非web toolbox)中将

    html#main-window body hbox#browser vbox#appcontent tabbox#tabbrowser-tabbox tabpanels#tabbrowser-tabpanels.plain hbox#panel-1-92.browserSidebarContainer vbox.browserContainer stack.browserStack browser
    

    旋转。失败,Firefox崩溃

  • 旋转屏幕,系统有这种设置。有些Linux WM据说可以旋转一个窗口

其他竖排阅读软件

  • Vivaldi的阅读模式支持竖排

移动端支持字定义字体,且支持竖排阅读的APP:

欢迎补充

其他传统中华文字相关项目

玩而后赏

子曰,玩而予赏,善莫大焉?
又曰,玩而不赏,良心安焉?
老夫谢过!
打赏链接
虽然,小小玩意,不足挂齿;
亦是,卅年老刀,献丑于此。
其实,多赏非求,少许亦可。
进者,参观主页,玩物更多。

Open Source Agenda is not affiliated with "Vert Cjk Web" Project. README Source: garywill/vert-cjk-web

Open Source Agenda Badge

Open Source Agenda Rating