han-css/test/hanging.jade

The CSS typography framework optimised for Hanzi

doctype html
html(lang='zh-Hant').han-init
  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>行尾點號懸掛，可透過相應的Sass變數啓用。
      ul
        li: a(href='#hant') 繁體中文
        li: a(href='#hans') 簡體中文
        li: a(href='#ja') 日文

      section#hant(lang='zh-Hant')
        h2 繁體中文標點
        p 點、點，點。點、點，點。點、點，點。點、點，點。點、點，點。點、點，點。點、點，點。點、點，點。點、點，點。點、點，點。點、點，點。
        p 「標」、「『標』」，《標》、〈標〉。「標」、「『標』」，《標》、〈標〉。「標」、「『標』」，《標》、〈標〉。「標」、「『標』」，《標》、〈標〉。「標」、「『標』」，《標》、〈標〉。「標」、「『標』」，《標》、〈標〉。
        p 標、「點」標、「點」標、「點」標、「點」。
        p 「標點。」「『標』點，」《標點。》（Biao、）〔Dian、〕「標點。」「『標』點，」《標點。》（Biao、）〔Dian、〕「標點。」「『標』點，」《標點。》（Biao、）〔Dian、〕
      section#hans(lang='zh-Hans')
        h2 简体中文标点
        p 点、点，点。点、点，点。点、点，点。点、点，点。点、点，点。点、点，点。点、点，点。点、点，点。点、点，点。点、点，点。点、点，点。
        p 「标」、「『标』」，《标》、〈标〉。「标」、「『标』」，《标》、〈标〉。「标」、「『标』」，《标》、〈标〉。「标」、「『标』」，《标》、〈标〉。「标」、「『标』」，《标》、〈标〉。「标」、「『标』」，《标》、〈标〉。
        p 标、「点」标、「点」标、「点」标、「点」。
        p 「标点。」「『标』点，」《标点。》（Biao、）〔Dian、〕「标点。」「『标』点，」《标点。》（Biao、）〔Dian、〕「标点。」「『标』点，」《标点。》（Biao、）〔Dian、〕
        p Dian、Dian，Dian。Dian、Dian，Dian。Dian、Dian，Dian。Dian、Dian，Dian。Dian、Dian，Dian。Dian、Dian，Dian。Dian、Dian，Dian。Dian、Dian，Dian。Dian、Dian，Dian。Dian、Dian，Dian。
        p 「Biao」Dian，「〔Biao〕」Dian，［Biao］。「Biao」Dian，「〔Biao〕」Dian，［Biao］。「Biao」Dian，「〔Biao〕」Dian，［Biao］。
        section.narrow
          p 我认为，没人可以「如此」放肆，你说是吧！
          p 请你们告诉我这是怎么一回事……。
          p 把示例给看清楚了，这是一种点号、「开引号」的组合也可以标点悬挂的概念。

      section#ja(lang='ja')
        h2 日文標點
        p 點、點，點。點、點，點。點、點，點。點、點，點。點、點，點。點、點，點。點、點，點。點、點，點。點、點，點。點、點，點。點、點，點。
        p 「標」、「『標』」，《標》、〈標〉。「標」、「『標』」，《標》、〈標〉。「標」、「『標』」，《標》、〈標〉。「標」、「『標』」，《標》、〈標〉。「標」、「『標』」，《標》、〈標〉。「標」、「『標』」，《標》、〈標〉。
        p 標、「點」標、「點」標、「點」標、「點」。
        p 「標點。」「『標』點，」《標點。》（Biao、）〔Dian、〕「標點。」「『標』點，」《標點。》（Biao、）〔Dian、〕「標點。」「『標』點，」《標點。》（Biao、）〔Dian、〕
        p Dian、Dian，Dian。Dian、Dian，Dian。Dian、Dian，Dian。Dian、Dian，Dian。Dian、Dian，Dian。Dian、Dian，Dian。Dian、Dian，Dian。Dian、Dian，Dian。Dian、Dian，Dian。Dian、Dian，Dian。
        p 「Biao」Dian，「〔Biao〕」Dian，［Biao］。「Biao」Dian，「〔Biao〕」Dian，［Biao］。「Biao」Dian，「〔Biao〕」Dian，［Biao］。
        section.narrow
          p 我認為，沒人可以「如此」放肆，你說是吧！
          p 請你們告訴我這是怎麼一回事⋯⋯。
          p 把示例給看清楚了，這是一種點號、「開引號」的組合也可以標點懸掛的概念。

    script(src='./han.min.js')