{"id":21885955,"url":"https://github.com/garywill/vert-cjk-web","last_synced_at":"2025-04-15T07:53:51.539Z","repository":{"id":42110132,"uuid":"487283202","full_name":"garywill/vert-cjk-web","owner":"garywill","description":"(in alpha) 网页竖排。右起縱書。像古代一样。Make webs vertical lined layout, like traditional CJK writing method in east asian culture circle.（招日韩蒙越翻译）","archived":false,"fork":false,"pushed_at":"2022-10-02T11:49:32.000Z","size":3933,"stargazers_count":71,"open_issues_count":2,"forks_count":8,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-04-15T07:53:27.125Z","etag":null,"topics":["asian-culture-circle","browser","cjk","css","east-asian-characters","reading","rotate","transform","vertical-script","vertical-writing","web"],"latest_commit_sha":null,"homepage":"https://garywill.github.io","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"agpl-3.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/garywill.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2022-04-30T13:22:26.000Z","updated_at":"2025-02-20T02:55:27.000Z","dependencies_parsed_at":"2023-01-19T02:01:09.960Z","dependency_job_id":null,"html_url":"https://github.com/garywill/vert-cjk-web","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/garywill%2Fvert-cjk-web","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/garywill%2Fvert-cjk-web/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/garywill%2Fvert-cjk-web/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/garywill%2Fvert-cjk-web/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/garywill","download_url":"https://codeload.github.com/garywill/vert-cjk-web/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":249031773,"owners_count":21201357,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["asian-culture-circle","browser","cjk","css","east-asian-characters","reading","rotate","transform","vertical-script","vertical-writing","web"],"created_at":"2024-11-28T10:30:48.732Z","updated_at":"2025-04-15T07:53:51.518Z","avatar_url":"https://github.com/garywill.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"将网页显示成 如 亚洲中华文化圈 传统书写方式 那样的 竖排排版。\n\nMake webs render in vertical lined layout, like traditional CJK writing method in east asian culture circle.\n\n\u003e 另外，推荐 [既适合程序员，也适合中文电子文献整编人员 的 「全文汉字关联关系可视化工具 \u0026 字符信息、不寻常字符检视器」](https://github.com/garywill/cc-visualize)\n\n## 使用\n\n1. 安装\n   - [AMO Firefox Addon](https://addons.mozilla.org/firefox/addon/vertical-ize-cjk-lines/)\n   - 或，在Firefox/Chrome的addon dev模式中load进去\n2. 打开一个网页\n3. 点工具栏上的按钮，开始竖排阅读\n4. 使用`鼠标滚轮`右左滚动，使用`shift+鼠标滚轮`上下滚动\n5. 有新内容通过ajax加载，或导航至新页面后，可再点工具栏按钮\n\n\u003e **警告**：Use on your own risk!\n\n## 效果及兼容性\n\n网页兼容性约85%。文字选择可用。可缩放\n\n原网页的js建立的交互性、链接点击、表单提交有极少量的损失（因`\u003ciframe\u003e` 及其 sandbox）\n\n**这个项目目前位于poc阶段！不保证显示准确性及数据安全性！** 建议用分开的浏览器体验（或者，不用它来打开涉及账号或数据的网站）\n\n![](screenshots/李東垣-维基百科.webp)\n\n更多截图见`screenshots/`\n\n## Sample links\n\n安装好后，可以点开以下sample links，点击工具栏按钮开始体验竖排阅读\n\n- **纯中文**\n  \n  试试用纵书读经是什么感觉：[《金剛經》](https://zh.wikisource.org/wiki/%E9%87%91%E5%89%9B%E8%88%AC%E8%8B%A5%E6%B3%A2%E7%BE%85%E8%9C%9C%E7%B6%93_(%E9%B3%A9%E6%91%A9%E7%BE%85%E4%BB%80)#%E6%AD%A3%E6%96%87)|[《道德經》](https://zh.wikisource.org/wiki/%E8%80%81%E5%AD%90_(%E6%A0%A1%E8%A9%81%E7%89%88)#%E9%81%93%E7%B6%93)\n  \n  读诗呢：[《夢遊天姥吟留別》](https://zh.wikisource.org/wiki/%E5%A4%A2%E9%81%8A%E5%A4%A9%E5%A7%A5%E5%90%9F%E7%95%99%E5%88%A5)|[《琵琶行》](https://zh.wikisource.org/wiki/%E7%90%B5%E7%90%B6%E8%A1%8C)\n  \n  直接来维基大典看文言文：[　漢　](https://zh-classical.wikipedia.org/wiki/%E6%BC%A2)\n\n- **中西混合**：[Mozilla基金会](https://zh.wikipedia.org/wiki/Mozilla%E5%9F%BA%E9%87%91%E6%9C%83)\n\n- **日文**：[　唐　](https://ja.wikipedia.org/wiki/%E5%94%90)\n\n- **韩文**\n  \n  朝鲜文字与汉字混合：[《易經》](https://ko.wikisource.org/wiki/%EC%97%AD%EA%B2%BD#%E7%AC%AC%E4%B8%80%E5%8D%A6_%E4%B9%BE)\n  \n  纯朝鲜文字：[하계 올림픽](https://ko.wikipedia.org/wiki/%ED%95%98%EA%B3%84_%EC%98%AC%EB%A6%BC%ED%94%BD)\n\n## 形也\n\n西式橫行，東式漸微。今物便捷，故從古者寡。\n\n古法千萬種，不需盡取。然，古時有妙意、道、哲、法、技，而爲今人所遺失者，非不痛哉。當力存之，並正解之，莫令不復。（莫非今之誰人貢高，臆斷古人皆笨耶？）\n\n如何之爲存？**以神爲主，以形作從**。\n\n何爲其「神」者？民知曉且正解其道、理、義、用、辨也。\n\n何謂「形」者？書、文、字者，媒也。**今獻此右起縱書豎排排版，形也**，仿古玩物，略顯古形於今人眼前一二然。\n\n神形俱存者，存。神存形易者，雖次亦存。若神失而形存者，非存也。亦當曉之。\n\n\u003e 人话：本品不能代替择道本身所需的判断取舍能力，及之后的阅读理解文籍的能力\n\n## 原理\n\n\u003e 也欢迎开issue探讨\n\n### 当前方案\n\n简要描述：\n\n1. 使用`\u003ciframe\u003e`装载原网页（为了提高兼容性，需要降低安全性，修改返回头）\n\n2. 使用CSS`transform`的`rotate`把整个`\u003ciframe\u003e`旋转\n\n3. 使用已旋转过CJK的自定义字体\n   \n   \u003e 目前是FontForge中乱炖一通出来的。不懂字体，欢迎指正\n\n4. 旋转图片\n\n### 其他方案\n\n尝试过和想过其他方案。有些失败。欢迎探讨\n\n#### 正经方案\n\n- 让浏览器原生支持。等个大神出现改Firefox/Chromium源代码。若能说动浏览器商我们就完成任务了\n\n- 使用CSS现有的[`writing-mode: vertical-rl`](https://developer.mozilla.org/en-US/docs/Web/CSS/writing-mode)（支持不全）。但这需要整个网页开始设计时就考虑。现有网页只能重新设计\n\n#### 不正经方案\n\n- 使用旋转CJK的字体和旋转图片后，用canvas或Headless browser等方案对原网页进行实时截图，然后旋转展示截到的图给用户。\n  \n  这样可以避免影响原网页，但鼠标如何与内容交互需要一个方案\n\n- 避免使用自己的ttf：\n  \n  遍历每个文本节点，把每个CJK加`\u003cspan\u003e`后单独旋转\n\n- 在Firefox的Browser Toolbox（非web toolbox）中将\n  \n  ```\n  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\n  ```\n  \n  旋转。失败，Firefox崩溃\n\n- 旋转屏幕，系统有这种设置。有些Linux WM据说可以旋转一个窗口\n\n## 其他竖排阅读软件\n\n- Vivaldi的阅读模式支持竖排\n\n移动端支持字定义字体，且支持竖排阅读的APP：\n\n- [静读天下](https://www.moondownload.com/chinese.html)\n\n- [讀書尚友](https://play.google.com/store/apps/details?id=info.ebstudio.bookviewer.free) by 青空文庫ビューア （[官网](http://ebstudio.info)）。支持[iOS](https://apps.apple.com/jp/app/id1579254502)\n\n\u003e 欢迎补充\n\n## 其他传统中华文字相关项目\n\n- [一些篆书字体收集](https://gitlab.com/garywill/cc-resources/-/releases)\n\n- [全文繁简字对应关系可视化工具](https://github.com/garywill/cc-visualize)\n\n- [**大术专搜**](https://github.com/garywill/BigSearch/blob/master/src/README_zh.md)（一个搜索、查询工具）中收集的汉语工具部分\n\n## 玩而后赏\n\n子曰，玩而予赏，善莫大焉？\u003cbr\u003e\n又曰，玩而不赏，良心安焉？\u003cbr\u003e\n老夫谢过！\u003cbr\u003e\n\u003ca target=\"_blank\" href=\"https://github.com/garywill/receiving/blob/master/receiving_methods.md\"\u003e\u003cimg src=\"https://gitlab.com/garywill/receiving/raw/master/receivingcode.png\" alt=\"打赏链接\" width=\"450\"\u003e\u003c/a\u003e\u003cbr\u003e\n虽然，小小玩意，不足挂齿；\u003cbr\u003e\n亦是，卅年老刀，献丑于此。\u003cbr\u003e\n其实，多赏非求，少许亦可。\u003cbr\u003e\n进者，[参观主页](https://garywill.github.io)，玩物更多。\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgarywill%2Fvert-cjk-web","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fgarywill%2Fvert-cjk-web","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgarywill%2Fvert-cjk-web/lists"}