ethantw / han Goto Github PK
View Code? Open in Web Editor NEW「漢字標準格式」印刷品般的漢字排版框架 Han.css: the CSS typography framework optimised for Hanzi.
Home Page: https://hanzi.pro/
License: MIT License
「漢字標準格式」印刷品般的漢字排版框架 Han.css: the CSS typography framework optimised for Hanzi.
Home Page: https://hanzi.pro/
License: MIT License
因應v2.2.0版本有許多字體使用CSS3屬性unicode-range
,應加入此項屬性支援偵測,並為不支援該屬性之瀏覽器加入應對樣式。
多個親代元素共享一「漢拉間隙末結點」(span.hanla:last-child
)時,漢拉間隙末結點的位置未能被正確代換。
版本v3.0.0將取消<cite>
元素的書名號,僅去除UA之斜體樣式。
目前已加入、或在未來將陸續新增各項漢字「排版」功能,如下,
以上「排版功能」已同原先「漢字標準格式」的「語義元素樣式正常化」之初衷大有不同,且諸多實驗功能可能不甚穩定,將導致專案過於龐大,管理困難,亦對開發者不便。
暫時決定將以上功能同「語義元素樣式正常化」拆分為多個專案,最後各提出其重要部分由「漢字標準格式」整合為一。初步思考結果如下,
同normalize.css合併,只提供「CSS樣式類」的修正,不再依賴JavaScript處理視覺樣式。盡可能使用CSS完成語義元素之樣式。
且不再使用指定字體,以通用字體族(generic font family)取代之。
加入JavaScript回退機制,以利各瀏覽器正常顯示樣式。(同1.併於同一專案中,但不強制使用JavaScript回退,而改為「推薦使用」)
搭配JavaScript回退處理之Sass樣式表亦另外提供。
同時,提供Sass的@mixin
函數以利開發者清除UA/語義元素正常化樣式。
即原本的han/_fonts.scss
及han/_ff.scss
,通過各系統間預設字體的搭配(標點符號樣式修正、等高數字字體),達到美觀、符合各地標準的排版效果。
提供各字體集與搭配完善的@mixin
函數,方便開發者套用。
以下,除「文字直排」外之重要漢字排版功能,統一由一JavaScript專案處理之,並提供開發者選用。
開放原$(selector).charize()
等各項函數。
現行程式會一次性地將所有<body>
中的內容截取,在完成代碼代換後取代原<body>
內的標記,此方式不甚優雅,且已知將同AngularJS程式衝突。
下個版本應實作以「結點」來代換,而非一次性覆蓋所有代碼。
是否採用粗體以區隔一般內容?目前僅去除元素語言屬性為中、日文的斜體樣式。
目前的樣式修正過於着重JavaScript回退,在WebKit等支援CSS3原生着重號屬性text-emphasis
的瀏覽器中,若關閉JavaScript,將回退使用邊框border-bottom: 2px dotted
而非着重號。
<ruby class="mps">
JavaScript改寫需要在<rt>
標籤的後方插入一斷行字符方可正確替換元素。應改用節點重寫JS替換,使之在不使用換行的情況下也應能夠正常改寫因為我的網站上有CKEditor,所以產生的底線文字是使用
https://dev.ckeditor.com/ticket/271
CKEditor對底線的處理已經放棄使用,目前是使用
但我看你目前對於底線處理還是使用來管理
我希望可以將和一起做css處理
現有的着重號實作寫法過於武斷,預計在v3.0中加入簡易選項以便調整。
JQuery 1.9+ 移除了 jQuery.browser,使用 han.js 時會報錯:
Cannot read property 'mozilla' of undefined
用 jQuery Migrate 來把舊功能加到 jQuery 1.9+ 。
jQuery Migrate can be used to detect and restore APIs or features that have been deprecated in jQuery and removed as of version 1.9. See the warnings page for more information regarding messages the plugin generates. For more information about the changes made in jQuery 1.9, see the upgrade guide and blog post.
例如:http://jsbin.com/olaFixUJ/1/edit
:lang(en) {
margin: auto .25em;
}
:first-child {
margin-left: 0;
}
:last-child {
margin-right: 0;
}
但是不好处理句子结尾的空隙。
此外,
1ch
实际渲染效果并不等同于.25em
請問可以包成bower package嗎?
有需要的話, 我可以幫忙送PR
Once cdnjs is updated to include Han 2.2.3, we should have instructions for using Han from cdnjs.
@font-face
四大字體集,
由於動用到unicode-range
解決IE的字體fallback問題,導致Firefox無法正確顯示以上字體。
同現時的標準模式區分。
初步研究應加入下列字符的樣式修正:
-
)/
\
)〔〕
)感謝 @boskijr 回報。
Thanks to @riobard for reporting.
超讚的專案!
如果能加入傳統直書的樣式,就能成為全能的排版工具了
目前看過比較完整的直書JS連結如下:
http://taketori.org/js.html
橫排時,中文着重號位於漢字下方,可能同專名號衝突,此時是否應去除專名號u.pn
?
(同波浪書名號遇上專名號時的情況有點類似)
CSS3屬性quotes
已為WebKit支援,但其測試之回傳值不同於其他瀏覽器,故當前漢字標準格式仍認為此屬性不為WebKit支援。
由「issue #5」延伸出之<hruby>
功能改進及修正:
<ruby>
替換為<h-ruby>
後,應保留其原屬性<sup>
元素)data-han-ruby-copyable
,可於「複製貼上」時,選用是否包含拼音及注音目的:
<span>
元素可能同開發者之樣式表發生繼承衝突,使用自訂元素可減少此類影響取消非國標標點之彎引號樣式修正,以減少同西文共存時之衝突。
很好的项目,收益良多,非常感谢。
目前因为normalize.css仍然在不断更新,为了更好的支援新版的normalize.css,最好能将normalize.css的部分和Han项目的CSS分成两个文件。希望考虑一下这个意见。
此致
現有版本(2.1.0)已支持Sass,故Normalize.css應直接置入Han.css
中,不再分為多個檔案,並以Han.scss
來控管各樣式表。
在使用 text-decoration:underline
生成下划线的时候,其厚度是根据字体大小的变化而变化的,但是每个浏览器的计算方式也会有差异。
当父元素设置了 text-decoration:underline
,厚度计算有如下几种情况:
text-underline-position:under
,改变了渲染策略,下划线会随着父元素字号改变而改变。Chrome 33 现在的实现有很多 Bug,Demo
以上结论需要进一步测试。
通常,text-underline-position:under
是我们需要的中英文混排时的下划线效果,所以在使用 padding-bottom
模拟的时候是否可以尽量往这个效果靠拢?han.css
目前使用的是固定厚度1px
。
鑑於W3C在HTML 5.1 Nightly草案中對<cite>
所做的定義更動,將在v2.2.0版本中_棄用_原書名號修正樣式——仍同舊版本支援修正樣式,但在說明文件中標示停用,並建議直接使用書名號代替。
在未來更新的版本中(暫定v3.0),將會去除書名號樣式,僅在CJK語言屬性條件下,覆蓋瀏覽器的UA樣式(即斜體)。
您好,想請教一下。
如果 Han 包到這些 html5 framework 或 CSS framework 中,有沒有需要特別注意的地方?
我有看到文檔中提到 han.js 不能放在 html 底部,
但是我在 boilerplate 中測試,看起來是可以運作的。
這些 framework 大抵都有自己的 CSS Reset,我想應該是可以互通的?
(就是你的 Reset 被他的 Reset 蓋掉,他的 Reset 又被別人的 Reset 蓋掉 ....)
any comment?
oh, I found something related to!
http://stackoverflow.com/questions/4407891/html5-boilerplate-with-blueprint-css
http://shikiryu.com/html5/
http://codekickoff.com/
稍早同 @yhsiang 討論字體選用。由於OS X Mavericks已發行,其支援的新字體可能帶來較佳的閱讀體驗,以下為可能在「漢字標準格式」v2.2.0版本中的更動。歡迎提供建議。
Han Songti
Han Heiti
及Han Songti
分支成CNS及GB,始區分繁體字形及新字形(中國國標)
Han Heiti
及Han Songti
之字體以美觀、品質完善、收字齊全、區分字重者為優先,後方並排列所有黑、宋體,以求字集完整覆蓋Han Heiti/Songti CNS
則以符合上述條件之「舊字形」字體為優先排列,後方輔以台灣教育部之國字標準字形、中國國標字形之字體fallback,以求字集完整覆蓋(同Han Heiti/Songti
,惟順序排列選用標準稍有不同)Han Heiti/Songti GB
之字體需_完全符合_中國國標字形Han Kaiti [CNS/GB]
以上述原則修改之;至於Han Fangsong
則因主流作業系統(OS X及Windows)皆只收錄國標字形之仿宋體,將同Han Heiti
及Han Songti
分支為CNS及GB,但Han Fangsong [CNS/GB]
三者之字體排序將完全一致。
Han Kaiti CNS
採用「中華民國教育部國字標準字形」字體,且_不在_後方加入不符該標準之回退。Biaodian Pro Sans/Serif
(任何情況下推薦使用)Biaodian Pro Sans/Serif CNS
(台港式標點)Biaodian Pro Sans/Serif GB
(中式標點)《GB/T 15834―2011 标点符号用法》
4.14.3.5
以月、日为标志的事件或节日,用汉字数字表示时,只在一、十一和十二月后用间隔号;当直接用阿拉伯数字表示时,月、日之间均用间隔号(半角字符)。
示例 2:“一二·九”运动
示例 3:“3·15”消费者权益日
……
5.1.7 间隔号标在需要隔开的项目之间,占半个字位置,上下居中,不出现在一行之首。
在套用border-box
樣式reset的網頁中,「實驗性底線」顯示異常
*,
*:before,
*:after {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
使用如下代碼修正即可,
.han-js-rendered.han-lab-underline u,
.han-js-rendered.han-lab-underline u *,
.han-js-rendered.han-lab-underline u *:before,
.han-js-rendered.han-lab-underline u *:after {
-moz-box-sizing: content-box;
-webkit-box-sizing: content-box;
box-sizing: content-box;
}
input placeholder and select on http://ly.g0v.tw/calendar/today looks weird, and this comes from font-family
of select:lang(zh)
目前$(seclector).charize()
不會包裹「相容表意文字」,但有「12個例外」應予以收錄。
[\uFA0E-F]、[\uFA11]、[\uFA13-4]、[\uFA1F]、[\uFA21]、[\uFA23-4]、[\uFA27-9]
已知Font Awesome、Semantic UI等框架之CSS皆使用變音元素<i>
做為icon的承載標籤,而漢字標準格式對<i>
之字體樣式重設會因「語言屬性」的繼承問題干擾此類應用。
雖然此類icon用法不合HTML5元素之標準語意,但不可忽略此類框架的廣泛使用率,應探討其他重設樣式字體的方式。
So we can have han.css on cdnjs
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.