han-css

Version:

The CSS typography framework optimised for Hanzi

32 lines (30 loc) • 5.7 kB

HTML

<!DOCTYPE html><html lang="zh-Hant" class="han-init"><head><meta charset="utf-8"><title>測試・漢字－西文混排間隙 — 漢字標準格式</title><link rel="stylesheet" href="./han.min.css"><style>html { overflow-x: hidden; } article { /* position */ margin: 0 auto; /* box */ max-width: 35em; padding: 0 .5em 15em; }</style><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta name="description" content="印刷品般的漢字網頁排版框架"><meta name="keywords" content="漢字標準格式, 中文, 排版, 排版規範, 日文, 字體排印, 文字設計, CLReq, CSS, Sass, typography"></head><body class="test"><article><h1>測試·漢字－西文混排間隙</h1><section id="jiben_hws"><h2>基本漢字－西文混排間隙</h2><section id="latn"><h3>拉丁字母及數字</h3><p>研究發現，全球狂銷的蘋果<span lang="en">iPad</span>超省電。根據非營利組織<abbr lang="en" title="Electric Power Research Institute">EPRI</abbr>（電力研究中心），<span lang="en">iPad</span>一年電費只需1.36美刀（<span lang="en">U.S. Dollar</span>）。</p></section><section id="el"><h3>希臘字母</h3><p>游離輻射可以區分為高能粒子流與高能電磁波，其中高能粒子流包含α粒子、β粒子（+/−）與中子，高能電磁波包含γ射線、X射線與特定波長的紫外線。每一種粒子或射線的電離能力與穿透性均不同，例如α粒子的電離能力很強，但穿透力非常弱，只要一張紙就能阻隔；γ射線的特性就恰與α粒子相反，其穿透能力非常強，需要幾英呎厚的混凝土才能降低γ射線，但是γ射線的電離能力卻很弱，對生物的影響相對較小。</p></section><section id="cyrl"><h3>西里爾字母</h3><p>我有學過<span lang="uk">українська мова</span>，所以<span lang="ru">русский язык</span>我可以稍微看得懂。</p></section></section><section id="cjk"><h2>完整中日韓意音文字區段支援</h2><p><strong>注意：</strong>部分擴展區漢字可能不為多數作業系統支援，而顯示為空白方框。<a href="http://fonts.jp/hanazono/">安裝花園明朝體</a>可以解決這個問題。</p><p><b>擴展A：</b>How㐀are㘻you䶵?<br> <b>擴展B：</b>A𠀀b𠄉C𪛖d<br> <b>擴展C：</b>E𪜀f𪶛G𪷼h𪜺I<br> <b>擴展D：</b>j𫝀K𫠝L<br> <b>意音數字零：</b>Θ〇Ω<br> <b>康熙及簡體字部首：</b>⼌Т⿕Я⺃ж⻍ы⻰Ӓ⻳Ӂ<br> <b>意音文字描述字元：</b>⿸Ҕ⿷ẳ⿳</p><section id="kana"><h3>假名</h3><p lang="ja">歯のEnamelに復元不可能な損害をもたらす。</p></section></section><section id="zuhezi"><h2>組合字（<span lang='en'>combining character</span>）</h2><p lang="zh-nan-Hant">天然ê上好！</p><p>荷<span lang="el">Ὅ̴̊̌ηρος̃</span>馬。</p><p>貓<span lang="ru">К҉о҈ш҉к҈а҈</span>咪。</p></section><section id="yuansu_bianjie_de_tiaozheng"><h2>元素邊界的調整</h2><p><u class="pn">美國</u><span lang="en">Chicago</span><em>是</em>這架飛船的目的地。</p><p>去<u lang='en'>Europe</u>旅行帶上<s lang='en'>Dollars</s> <u lang='hu'>Euró</u>就夠了！</p><section id="comment"><h3>有註解及機會斷行元素的情況</h3><p>不知道是不是<u lang='en'><wbr><wbr>like this</u>你用「元件檢閱器」看看。</p></section><section id="multiple"><h3>多層元素嵌套</h3><p lang="en">Who do you<em lang='zh-Hant'><s><b>自以為</b></s></em>you are?</p><p lang="zh-nan-Hant">你是咧com<u><i>啥物</i></u>plain啦！</p></section><section id="list"><h3>清單</h3><ol><li>Tissue</li><li><s>鴨蛋</s></li><li>Eggs</li><li><strong>垃圾袋XL</strong></li></ol></section></section><section id="atypical"><h2>非典型情況</h2><p>雖然很非典型,但是¿你說不可能嗎?不對哦.</p><p>他罵了一聲¡逼!就走——了.<br> 他罵了一句¡逼、逼逼!就走……了.</p><p>為‘什’麼;為“什”麼?</p><p>這是一個句子[漢字123]然後就沒有然後了;<br> 這是一個句子[漢123字]然後就沒有然後了;<br> 這是一個句子(漢字123)然後就沒有然後了;<br> 這是一個句子(漢123字)然後就沒有然後了.</p><p>選項(必填) for example,<br> For example: (必填)選項<br> 問題: 這是,答案.</p><p>這是一段包含單'引'號和雙"引"號'單引號'和"雙引號"的文字.<br> 單引號'大X中ZZ天'!<br> 單引號'大X中ZZ天'和雙引號"大X中Y天"哦!</p></section><section id="filtered"><h2>不作用的元素</h2><h3>文字區塊表單</h3><textarea style="height: 7em; width: 50%;">漢字and仮名カkaナna。</textarea><h3>代碼等元素</h3><p><code>代code碼</code>、<kbd>輸key入board鍵</kbd>、<samp>計算機samp輸出示例</samp>。</p><pre>格式pre處理</pre><p>中文加上 <code>some code</code>，中文加上 <code>some code</code> 放在中間，<code>some code</code> 加上中文，一般的 English。</p><p>中文加上<code>some code</code>，中文加上<code>some code</code>放在中間，<code>some code</code>加上中文，一般的English。</p><p class="noti"><strong>注意：</strong>在漢字–西文混排間隙「基本模式」下，<strong>代碼、輸入鍵、計算機輸出示例等元素仍經<code>renderHWS()</code>處理，</strong>惟使用樣式表將其下之<code>hws</code>元素隱藏，可藉樣式的改寫來顯示漢字–西文混排間隙；「嚴格模式」下，則<em>不</em>渲染以上元素。</p></section></article><script src="./han.min.js"></script></body></html>