han-css/test/jiya.jade

The CSS typography framework optimised for Hanzi

doctype html
html(lang='zh-Hant')
  head
    meta(charset='utf-8')
    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;
      }
    meta(name='viewport' content='width=device-width, initial-scale=1.0')
    meta(name='description' content='印刷品般的漢字網頁排版框架')
    meta(name='keywords' content='漢字標準格式, 中文, 排版, 排版規範, 日文, 字體排印, 文字設計, CLReq, CSS, Sass, typography')
  body.test

    article
      h1 測試·標點擠壓
      p <strong>提示：</strong>調整瀏覽器視窗寬度來觀看各種標點在行間的擠壓及懸掛行為。
      p <strong>提示二：</strong>為求較佳的效果展示，本測試頁已<em>停用</em>「行尾點號懸掛」渲染。
      ul
        li: a(href='#hant') 繁體中文
        li: a(href='#hans') 簡體中文
        li: a(href='#ja') 日文

      section#hant(lang='zh-Hant')
        h2 繁體中文標點
        p 點、點，點。點、點，點。點、點，點。點、點，點。點、點，點。點、點，點。點、點，點。點、點，點。點、點，點。點、點，點。點、點，點。
        p 「標」、「『標』」，《標》、〈標〉。「標」、「『標』」，《標》、〈標〉。「標」、「『標』」，《標》、〈標〉。「標」、「『標』」，《標》、〈標〉。「標」、「『標』」，《標》、〈標〉。「標」、「『標』」，《標》、〈標〉。
        p 「何謂『標點擠壓』？」
        p 何謂「標點『擠壓』」呢？
        p 讓我來告訴你何謂「『標點』擠壓」。
        p 讓我來告訴你何謂「『標點』擠壓。」
        p 「就這樣，我、『那個人』和他們戰鬥了數個鐘頭，（最後）沒輸沒贏……『那個人』逃之夭夭。」
        p 輕聲叨唸道——「好的……」
        p 「好」「不好」
        p 「好」·「不好」「好」・「不好」「好」、「不好」
        p 「『好』·不好」「『好』・不好」「『好』、不好」
        p 「好·『不好』」「好、『不好』」
        p 《書名》〈篇名〉（內容）
        p: em 《書名》〈篇名〉（內容）「『好』、不好」
        p <a href='#'>《書名》</a>、「文字」、<strong>『重點』</strong>。
        p <a href='#'>《書名》、</a><em>「強調」、</em><strong>『重點』</strong>。
        p <a href='#'>《書名》、</a><b>「關鍵字」、</b><strong>『重點』</strong>。
        p <a href='#'>書名</a><em>強調</em><strong>重點</strong>。

      section#hans(lang='zh-Hans')
        h2 简体中文标点
        p 点、点，点。点、点，点。点、点，点。点、点，点。点、点，点。点、点，点。点、点，点。点、点，点。点、点，点。点、点，点。点、点，点。
        p 「标」、「『标』」，《标》、〈标〉。「标」、「『标』」，《标》、〈标〉。「标」、「『标』」，《标》、〈标〉。「标」、「『标』」，《标》、〈标〉。「标」、「『标』」，《标》、〈标〉。「标」、「『标』」，《标》、〈标〉。
        p 「标」点、「『标』」点，《标》点、（标）点。「标」点、「『标』」点，《标》点、（标）点。「标」点、「『标』」点，《标》点、（标）点。「标」点、「『标』」点，《标》点、（标）点。「标」点、「『标』」点，《标》点、（标）点。
        p 「何谓『标点挤压』？」
        p 何谓「标点『挤压』」呢？
        p 让我来告诉你何谓「『标点』挤压」。
        p 让我来告诉你何谓「『标点』挤压。」
        p 「就这样，我、『那个人』和他们战斗了数个钟头，（最后）没输没赢……『那个人』逃之夭夭。」
        p 轻声叨念道——「好的……」
        p 「『好』·不好」「『好』・不好」「『好』、不好」
        p 「好·『不好』」「好、『不好』」
        p 《书名》〈篇名〉（内容）
        p: em 《书名》〈篇名〉（内容）「『好』、不好」
        p <a href='#'>《书名》</a>、「文字」、<strong>『重点』</strong>。
        p <a href='#'>《書名》、</a><em>「強調」、</em><strong>『重點』</strong>。
        p <a href='#'>《書名》、</a><b>「關鍵字」、</b><strong>『重點』</strong>。
        p <a href='#'>書名</a><em>強調</em><strong>重點</strong>。

      section#ja(lang='ja')
        h2 日文標點
        p 點、點，點。點、點，點。點、點，點。點、點，點。點、點，點。點、點，點。點、點，點。點、點，點。點、點，點。點、點，點。點、點，點。
        p 「標」、「『標』」，《標》、〈標〉。「標」、「『標』」，《標》、〈標〉。「標」、「『標』」，《標》、〈標〉。「標」、「『標』」，《標》、〈標〉。「標」、「『標』」，《標》、〈標〉。「標」、「『標』」，《標》、〈標〉。
        p 「標」點、「『標』」點，《標》點、（標）點。「標」點、「『標』」點，《標》點、（標）點。「標」點、「『標』」點，《標》點、（標）點。「標」點、「『標』」點，《標》點、（標）點。「標」點、「『標』」點，《標》點、（標）點。
        p 「何謂『標點擠壓』？」
        p 何謂「標點『擠壓』」呢？
        p 讓我來告訴你何謂「『標點』擠壓」。
        p 讓我來告訴你何謂「『標點』擠壓。」
        p 「就這樣，我、『那個人』和他們戰鬥了數個鐘頭，（最後）沒輸沒贏……『那個人』逃之夭夭。」
        p 輕聲叨唸道——「好的……」
        p 「好」「不好」
        p 「好」·「不好」「好」・「不好」「好」、「不好」
        p 「『好』·不好」「『好』・不好」「『好』、不好」
        p 「好·『不好』」「好、『不好』」
        p 《書名》〈篇名〉（內容）
        p: em 《書名》〈篇名〉（內容）「『好』、不好」
        p <a href='#'>《書名》</a>、「文字」、<strong>『重點』</strong>。
        p <a href='#'>《書名》、</a><em>「強調」、</em><strong>『重點』</strong>。
        p <a href='#'>《書名》、</a><b>「關鍵字」、</b><strong>『重點』</strong>。
        p <a href='#'>書名</a><em>強調</em><strong>重點</strong>。

    script(src='./han.min.js')
    script.
      void function(){
        Han().setRoutine([
          'initCond',
          /* 'renderHanging', */ 'renderJiya', 'renderHWS',
          'correctBasicBD', 'substCombLigaWithPUA',
          'renderElem'
        ]).render()
      }()