han-css
Version:
The CSS typography framework optimised for Hanzi
37 lines (31 loc) • 7.18 kB
HTML
<html lang="zh-Hant"><head><meta charset="utf-8"><title>測試・標點擠壓 — 漢字標準格式</title><link rel="stylesheet" href="./han.min.css"><style>html {
/* box */
overflow-x: hidden;
padding: 0 1.5em;
}
article {
/* position */
margin: 0 auto;
/* box */
max-width: 35em;
padding: 0 0 15em;
/* style */
border-left: 1px solid #ccc;
border-right: 1px solid #ccc;
}
article h1:first-child {
margin-top: 0;
}
section.narrow {
/* box */
width: 15em;
/* style */
border-right: 1px solid #ccc;
}</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><p><strong>提示：</strong>調整瀏覽器視窗寬度來觀看各種標點在行間的擠壓及懸掛行為。</p><p><strong>提示二：</strong>為求較佳的效果展示，本測試頁已<em>停用</em>「行尾點號懸掛」渲染。</p><ul><li><a href="#hant">繁體中文</a></li><li><a href="#hans">簡體中文</a></li><li><a href="#ja">日文</a></li></ul><section id="hant" lang="zh-Hant"><h2>繁體中文標點</h2><p>點、點，點。點、點，點。點、點，點。點、點，點。點、點，點。點、點，點。點、點，點。點、點，點。點、點，點。點、點，點。點、點，點。</p><p>「標」、「『標』」，《標》、〈標〉。「標」、「『標』」，《標》、〈標〉。「標」、「『標』」，《標》、〈標〉。「標」、「『標』」，《標》、〈標〉。「標」、「『標』」，《標》、〈標〉。「標」、「『標』」，《標》、〈標〉。</p><p>「何謂『標點擠壓』？」</p><p>何謂「標點『擠壓』」呢？</p><p>讓我來告訴你何謂「『標點』擠壓」。</p><p>讓我來告訴你何謂「『標點』擠壓。」</p><p>「就這樣，我、『那個人』和他們戰鬥了數個鐘頭，（最後）沒輸沒贏……『那個人』逃之夭夭。」</p><p>輕聲叨唸道——「好的……」</p><p>「好」「不好」</p><p>「好」·「不好」「好」・「不好」「好」、「不好」</p><p>「『好』·不好」「『好』・不好」「『好』、不好」</p><p>「好·『不好』」「好、『不好』」</p><p>《書名》〈篇名〉（內容）</p><p><em>《書名》〈篇名〉（內容）「『好』、不好」</em></p><p><a href='#'>《書名》</a>、「文字」、<strong>『重點』</strong>。</p><p><a href='#'>《書名》、</a><em>「強調」、</em><strong>『重點』</strong>。</p><p><a href='#'>《書名》、</a><b>「關鍵字」、</b><strong>『重點』</strong>。</p><p><a href='#'>書名</a><em>強調</em><strong>重點</strong>。</p></section><section id="hans" lang="zh-Hans"><h2>简体中文标点</h2><p>点、点，点。点、点，点。点、点，点。点、点，点。点、点，点。点、点，点。点、点，点。点、点，点。点、点，点。点、点，点。点、点，点。</p><p>「标」、「『标』」，《标》、〈标〉。「标」、「『标』」，《标》、〈标〉。「标」、「『标』」，《标》、〈标〉。「标」、「『标』」，《标》、〈标〉。「标」、「『标』」，《标》、〈标〉。「标」、「『标』」，《标》、〈标〉。</p><p>「标」点、「『标』」点，《标》点、（标）点。「标」点、「『标』」点，《标》点、（标）点。「标」点、「『标』」点，《标》点、（标）点。「标」点、「『标』」点，《标》点、（标）点。「标」点、「『标』」点，《标》点、（标）点。</p><p>「何谓『标点挤压』？」</p><p>何谓「标点『挤压』」呢？</p><p>让我来告诉你何谓「『标点』挤压」。</p><p>让我来告诉你何谓「『标点』挤压。」</p><p>「就这样，我、『那个人』和他们战斗了数个钟头，（最后）没输没赢……『那个人』逃之夭夭。」</p><p>轻声叨念道——「好的……」</p><p>「『好』·不好」「『好』・不好」「『好』、不好」</p><p>「好·『不好』」「好、『不好』」</p><p>《书名》〈篇名〉（内容）</p><p><em>《书名》〈篇名〉（内容）「『好』、不好」</em></p><p><a href='#'>《书名》</a>、「文字」、<strong>『重点』</strong>。</p><p><a href='#'>《書名》、</a><em>「強調」、</em><strong>『重點』</strong>。</p><p><a href='#'>《書名》、</a><b>「關鍵字」、</b><strong>『重點』</strong>。</p><p><a href='#'>書名</a><em>強調</em><strong>重點</strong>。</p></section><section id="ja" lang="ja"><h2>日文標點</h2><p>點、點，點。點、點，點。點、點，點。點、點，點。點、點，點。點、點，點。點、點，點。點、點，點。點、點，點。點、點，點。點、點，點。</p><p>「標」、「『標』」，《標》、〈標〉。「標」、「『標』」，《標》、〈標〉。「標」、「『標』」，《標》、〈標〉。「標」、「『標』」，《標》、〈標〉。「標」、「『標』」，《標》、〈標〉。「標」、「『標』」，《標》、〈標〉。</p><p>「標」點、「『標』」點，《標》點、（標）點。「標」點、「『標』」點，《標》點、（標）點。「標」點、「『標』」點，《標》點、（標）點。「標」點、「『標』」點，《標》點、（標）點。「標」點、「『標』」點，《標》點、（標）點。</p><p>「何謂『標點擠壓』？」</p><p>何謂「標點『擠壓』」呢？</p><p>讓我來告訴你何謂「『標點』擠壓」。</p><p>讓我來告訴你何謂「『標點』擠壓。」</p><p>「就這樣，我、『那個人』和他們戰鬥了數個鐘頭，（最後）沒輸沒贏……『那個人』逃之夭夭。」</p><p>輕聲叨唸道——「好的……」</p><p>「好」「不好」</p><p>「好」·「不好」「好」・「不好」「好」、「不好」</p><p>「『好』·不好」「『好』・不好」「『好』、不好」</p><p>「好·『不好』」「好、『不好』」</p><p>《書名》〈篇名〉（內容）</p><p><em>《書名》〈篇名〉（內容）「『好』、不好」</em></p><p><a href='#'>《書名》</a>、「文字」、<strong>『重點』</strong>。</p><p><a href='#'>《書名》、</a><em>「強調」、</em><strong>『重點』</strong>。</p><p><a href='#'>《書名》、</a><b>「關鍵字」、</b><strong>『重點』</strong>。</p><p><a href='#'>書名</a><em>強調</em><strong>重點</strong>。</p></section></article><script src="./han.min.js"></script><script>void function(){
Han().setRoutine([
'initCond',
/* 'renderHanging', */ 'renderJiya', 'renderHWS',
'correctBasicBD', 'substCombLigaWithPUA',
'renderElem'
]).render()
}()</script></body></html>