Han
Han copied to clipboard
ethantw
「漢字標準格式」印刷品般的漢字排版框架 Han.css: the CSS typography framework optimised for Hanzi.
https://developer.mozilla.org/en-US/docs/Web/CSS/@supports
在使用 `text-decoration:underline` 生成下划线的时候，其厚度是根据字体大小的变化而变化的，但是每个浏览器的计算方式也会有差异。 当父元素设置了 `text-decoration:underline` ，厚度计算有如下几种情况： - IE8-10 中根据字号最大的子元素来计算。 - Chrome 32 之前根据父元素字号来计算，[Chrome 33 开始支持](http://weibo.com/3244329632/AqUM2D6dW)`text-underline-position:under`，改变了渲染策略，下划线会随着父元素字号改变而改变。 - Firefox 根据父元素字号来计算。 Chrome 33 现在的实现有很多 Bug，[Demo](http://codepen.io/yisi/pen/ucJAf) 以上结论需要进一步测试。 通常，`text-underline-position:under` 是我们需要的中英文混排时的下划线效果，所以在使用 `padding-bottom` 模拟的时候是否可以尽量往这个效果靠拢？`han.css` 目前使用的是固定厚度`1px`。
我沒有找到相關的文件特別說明，本框架是每個字母都加上著重號 (着重號) ， 瀏覽器的 css `text-emphasis` 預設行為也是每個字都加。 個人覺得每個英數字都加會太密，不太美觀，在此提出幾種方案： 1. 每個單字加一點，類似直排橫書時每個單字橫書的作法。但嘗試後也沒有很美觀。 2. 每個音節加一點。因中文方塊字為一字一音節，一字一點也可視為一音節一點，以此套到英文字上。實作上可以簡化為一或多個母音上加一點 (`/[aeiou]+/i`)，但各語言的母音需要特別定義。嘗試後密度適中還算美觀。 3. 數字則可以嘗試每組無隔斷的數字一點 `/\d+/` ，例如 ip 位址四點，有加千分號則同樣每三位數字一點。 不知道作者看法如何，如果有興趣我可以實作看看。
当给元素加上 ```css white-space: nowrap; ``` CSS 属性时，如果遇到有标点挤压，会导致标点后的元素换行（图一）。而删除掉右方括号`】`的挤压后，就会达到预期效果（图二）。 图一：  图二： 
[Chromium 123 引入并默认启用了 CJK 标点挤压](https://chromestatus.com/feature/5170044014690304)。在字体支持 chws 或 halt 特性时，会自动将符合条件的标点转换为半身。因此，若显示字体 fallback 到了思源等支持 chws 或 halt 的字体，标点会被挤压两次（浏览器和 js）：  上图使用的版本为 123.0.6312.86 (正式版本) （64 位） ，字体为 Noto Sans CJK SC。 我们目前暂时关闭了 Chromium 的标点挤压（因为很多字体还没有支持所需的...
## 环境 vue version: "3.5.13" node version: v18.20.4 系统：macOS Sequoia 15.1 ，芯片 M4 ## 引入方式 ```html Vite App setTimeout(() => { // var hinst = Han.init() var hinst = Han(document.body).render()...
