doctype html
html(lang='zh-Hant').han-init
  head
    meta(charset='utf-8')
    title 測試・行間注元素 — 漢字標準格式
    link(rel='stylesheet', href='./han.min.css')
    //link(rel='stylesheet', href='//az.hanzi.co/201505/han.ruby.css')

    style.
      html {
        overflow-x: hidden;
      }

      article {
        /* position */
        margin: 0 auto;

        /* box */
        max-width: 35em;
        padding: 0 .5em 15em;
      }
    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 測試·行間注元素
      section(id='jiben_hangjianzhu')
        h2 基本行間注
        p: ruby
          | WWW<rt>World Wide Web
        p: ruby
          | 安倍晋三<rt>日本內閣總理大臣

        section#pinyin
          h3 拼音
          p: ruby
              | 世情<rt>shìqíng</rt>
              | 看<rt>kàn</rt>
              | 冷暖<rt>lěngnuǎn</rt>，<rt></rt>
              | 人面<rt>rénmiàn</rt>
              | 逐<rt>zhú</rt>
              | 高低<rt>gāodī</rt>。<rt></rt>
        p.
          好好地來<em><ruby class="pinyin">安<rt>ān</rt>裝<rt>zhuāng</rt></ruby></em><ruby class="pinyin">窗<rt>chuāng</rt>戶<rt>hù</rt></ruby>。
        section#zhuyin_fuhao
          h3 注音符號
          p: ruby.zhuyin
              | 事<rt>ㄕˋ</rt>情<rt>ㄑㄧㄥˊ</rt>
              | 看<rt>ㄎㄢˋ</rt>
              | 冷<rt>ㄌㄥˇ</rt>暖<rt>ㄋㄨㄢˇ</rt>，<rt></rt>
              | 人<rt>ㄖㄣˊ</rt>面<rt>ㄇㄧㄢˋ</rt>
              | 逐<rt>ㄓㄨˊ</rt>
              | 高<rt>ㄍㄠ</rt>
              | 低<rt>ㄉㄧ</rt>。
          section#qingsheng
            h4 輕聲
            p: ruby.zhuyin
              | 爸<rt>ㄅㄚˋ</rt>爸<rt>˙ㄅㄚ</rt></ruby><em><ruby class='zhuyin'>白<rt>ㄅㄞˊ</rt>天<rt>˙ㄊㄧㄢ</rt></ruby></em><ruby class='zhuyin'>的<rt>˙ㄉㄜ</rt>行程很滿<rt></rt>啊<rt>˙ㄚ</rt>！
            p: ruby.zhuyin
              | 你<rt>ㄌㄧˋ</rt>敢<rt>ㄍㆰˋ</rt>有<rt>ㄨ˫</rt>聽<rt>ㄊㄧㆩ</rt>著<rt>ㄉㄧㄜㆷ͘</rt>咱<rt>ㄌㄢˋ</rt>的<rt>ㆤˊ</rt>歌<rt>ㄍㄨㄚ</rt>？
          section
      section#fuheshi_hangjianzhu
        h2 複合式行間注
        p.
          好好地來<ruby class="complex"><em><rb>安</rb><rb>裝</rb></em><rb>窗</rb><h-jinze class="wei"><rb>戶</rb>。</h-jinze><rtc class="pinyin"><rt>ān</rt><rt>zhuāng</rt><rt>chuāng</rt><rt>hù</rt></rtc></ruby>
        p: ruby.complex
          | 辛亥革命發生在
          rb 1911-
          rb 10-
          rb 10，
          rtc
            rt 年
            rt 月
            rt 日
          rtc: rt(rbspan='3') 清宣統三年
          | 那天革命先烈們一同推翻了帝制。
        p
          | 歡迎來到 
          em: ruby.complex
            | 「
            rb 紐
            rb 約
            rb 市
            | 」
            rtc.reading.romanization(lang='cmn-Latn')
              rt(rbspan='2') Niǔyuē
              rt Shì
            rtc.reading.annotation
              rt(rbspan='3') New York City
          ruby.complex
            | 『
            rb 紐
            rb 約
            rb 市
            | 』
            rtc.reading.annotation(lang='en')
              rt(rbspan='3') New York City
            rtc.reading.romanization(lang='cmn-Latn')
              rt(rbspan='2') Niǔyuē
              rt Shì
          ruby.complex
            | ‘
            rb 紐
            rb 約
            rb 市
            | ’
            rtc.reading.annotation(lang='en')
              rt(rbspan='3') New York City
            rtc.reading.romanization(lang='cmn-Latn')
              rt niǔ
              rt yuē
              rt shì
          ruby.complex
            | &#x201E;
            rb 紐
            rb 約
            rb 市
            | &#x201F;
            rtc.reading.romanization(lang='cmn-Latn')
              rt niǔ
              rt yuē
              rt shì
            rtc.reading.annotation(lang='en')
              rt(rbspan='3') New York City
          ruby.complex
            | ⸘
            rb 紐
            rb 約
            rb 市
            | ‽
            rtc.reading.annotation(lang='en')
              rt(lang='en' rbspan='3') New York City
            rtc.reading.annotation
              rt(rbspan='3') 世界之都
        p: ruby.complex.
          俗語說
          <rb>三</rb>
          <rb>十</rb>
          <rb>六</rb>
          <rb>個</rb>
          <rb>牙</rb>
          <rb>齒</rb>，
          <rb>捉</rb>
          <rb>對</rb>
          <rb>兒</rb>
          <rb>廝</rb>
          <rb>打</rb>！

          <rtc class="romanization">
          <rt>san1</rt>
          <rt>shih2</rt>
          <rt>liu4</rt>
          <rt>ko0</rt>
          <rt>ya2</rt>
          <rt>ch'ih3</rt>
          <rt>cho1</rt>
          <rt rbspan="2">tuirh4</rt>
          <rt>ssu1</rt>
          <rt>ta3</rt>
          </rtc>

          <rtc class="romanization">
          <rt>sān</rt>
          <rt>shí</rt>
          <rt>liù</rt>
          <rt>ge</rt>
          <rt>yá</rt>
          <rt>chǐ</rt>
          <rt>zhuō</rt>
          <rt rbspan="2">duìr</rt>
          <rt>sī</rt>
          <rt>dǎ</rt>
          </rtc>
        section#pinyin-zhuyin_gongtong_xianshi
          h3 拼音－注音共同顯示
          p(lang='zh-nan-Hant')
            u 共我講
            ruby.rightangle
              | <u><rb>你</rb></u><!--
              | --><rb>敢</rb><rb>有</rb><!--
              | --><rb>聽</rb><rb>著</rb><!--
              | --><rb>咱</rb><rb>的</rb><!--
              | --><rb>歌</rb>？

              rtc.romanization(lang='nan-Latn')
                  rt Lí
                  rt(rbspan='2') kám-ū
                  rt(rbspan='2') thiann-tio̍h
                  rt(rbspan='2') lán-ê
                  rt kua
              rtc.zhuyin
                  rt ㄌㄧˋ
                  rt ㄍㆰˋ
                  rt ㄨ˫
                  rt ㄊㄧㆩ
                  rt ㄉㄧㄜㆷ̍
                  rt ㄌㄢˋ
                  rt ㆤˊ
                  rt ㄍㄨㄚ
              | 有無？
            ruby.rightangle
              | <rb>你</rb><!--
              | --><rb>敢</rb><rb>有</rb><!--
              | --><rb>聽</rb><rb>著</rb><!--
              | --><rb>咱</rb><rb>的</rb><!--
              | --><rb>歌</rb>？

              rtc.romanization(lang='nan-Latn')
                  rt Lí
                  rt(rbspan='2') kám-ū
                  rt(rbspan='2') thiann-tio̍h
                  rt(rbspan='2') lán-ê
                  rt kua
              rtc.zhuyin
                  rt ㄌㄧˋ
                  rt ㄍㆰˋ
                  rt ㄨ˫
                  rt ㄊㄧㆩ
                  rt ㄉㄧㄜㆷ̍
                  rt ㄌㄢˋ
                  rt ㆤˊ
                  rt ㄍㄨㄚ
              | 有無？
            ruby.rightangle
              | <rb>你</rb><!--
              | --><rb>敢</rb><rb>有</rb><!--
              | --><rb>聽</rb><rb>著</rb><!--
              | --><rb>咱</rb><rb>的</rb><!--
              | --><rb>歌</rb>？

              rtc.romanization(lang='nan-Latn')
                  rt Lí
                  rt(rbspan='2') kám-ū
                  rt(rbspan='2') thiann-tio̍h
                  rt(rbspan='2') lán-ê
                  rt kua
              rtc.zhuyin
                  rt ㄌㄧˋ
                  rt ㄍㆰˋ
                  rt ㄨ˫
                  rt ㄊㄧㆩ
                  rt ㄉㄧㄜㆷ̍
                  rt ㄌㄢˋ
                  rt ㆤˊ
                  rt ㄍㄨㄚ
              | 有無？
          p 俗語說，
            ruby.complex.
              <rb>一</rb>
              <rb>人</rb>
              <rb>煩</rb>
              <rb>惱</rb>
              <rb>一</rb>
              <rb>樣</rb>，
              <rb>無</rb>
              <rb>人</rb>
              <rb>煩</rb>
              <rb>惱</rb>
              <rb>親</rb>
              <rb>像</rb>。

              <rtc class="zhuyin">
                  <rt>ㄐㄧㆵ͘</rt>
                  <rt>ㄌㄤˊ</rt>
                  <rt>ㄏㄨㄢˊ</rt>
                  <rt>ㄌㄜˋ</rt>
                  <rt>ㄐㄧㆵ͘</rt>
                  <rt>ㄧㆫ˫</rt>
                  <rt>ㆠㄜˊ</rt>
                  <rt>ㄌㄤˊ</rt>
                  <rt>ㄏㄨㄢˊ</rt>
                  <rt>ㄌㄜˋ</rt>
                  <rt>ㄑㄧㄣ</rt>
                  <rt>ㄑㄧㆫ˫</rt>
                  <rt></rt>
              </rtc>
              <rtc class="romanization">
                <rt>Tsi̍t</rt>
                <rt>lâng</rt>
                <rt rbspan="2">hoân‑ló</rt>
                <rt>chi̍t</rt>
                <rt>iūⁿ</rt>
                <rt rbspan="2">bô‑lâng</rt>
                <rt rbspan="2">hoân‑ló</rt>
                <rt rbspan="2">chhin‑chhiūⁿ</rt>
              </rtc>
              <rtc class="romanization"><rt>Tsi̍t</rt>
                <rt>lâng</rt>
                <rt rbspan="2">huân-ló</rt>
                <rt>tsi̍t</rt>
                <rt>iūnn</rt>
                <rt rbspan="2">bô-lâng</rt>
                <rt rbspan="2">huân-ló</rt>
                <rt rbspan="2">tshin-tshiūnn</rt>
              </rtc>
          p: ruby.rightangle.
            <rb>僥</rb>
            <rb>倖</rb>
            <rb>錢</rb>，
            <rb>失</rb>
            <rb>德</rb>
            <rb>了</rb>；
            <rb>冤</rb>
            <rb>枉</rb>
            <rb>錢</rb>，
            <rb>跋</rb>
            <rb>輸</rb>
            <rb>筊</rb>。

            <rtc class="zhuyin"><rt>ㄏㄧㄠ</rt>
                <rt>ㄏㄧㄥ˫</rt>
                <rt>ㄐㆪˊ</rt>
                <rt>ㄒㄧㆵ</rt>
                <rt>ㄉㄧㆶ</rt>
                <rt>ㄌㄧㄠˋ</rt>
                <rt>ㄨㄢ</rt>
                <rt>ㆲˋ</rt>
                <rt>ㄐㆪˊ</rt>
                <rt>ㄅㄨㄚㆷ͘</rt>
                <rt>ㄙㄨ</rt>
                <rt>ㄍㄧㄠˋ</rt>
                <rt></rt>
            </rtc>
            <rtc class="romanization">
                <rt rbspan="3">Hiau‑hēng‑chîⁿ</rt>
                <rt rbspan="2">sit‑tek</rt>
                <rt>liáu</rt>
                <rt rbspan="2">oan‑óng</rt>
                <rt>chîⁿ</rt>
                <rt rbspan="2">poa̍h‑su</rt>
                <rt>kiáu</rt>
            </rtc>
            <rtc class="romanization"><rt rbspan="3">Hiau-hīng-tsînn</rt>
                <rt rbspan="2">sit-tik</rt>
                <rt>liáu</rt>
                <rt rbspan="2">uan-óng</rt>
                <rt>tsînn</rt>
                <rt rbspan="2">pua̍h-su</rt>
                <rt>kiáu</rt>
            </rtc>
          section#kaiti
            h3.
              預設<ruby class="complex"><rb>使</rb><rb>用</rb>「<rb>楷</rb><rb>體</rb>」<rb>的</rb><rb>元</rb><rb>素</rb><rb>下</rb><rtc class="zhuyin"><rt>ㄕˇ</rt><rt>ㄩㄥˋ</rt><rt>ㄎㄞˇ</rt><rt>ㄊㄧˇ</rt><rt>˙ㄉㄜ</rt><rt>ㄩㄢˊ</rt><rt>ㄙㄨˋ</rt><rt>ㄒㄧㄚˋ</rt></rtc><rtc class="pinyin"><rt>shǐ</rt><rt>yòng</rt><rt>kǎi</rt><rt>tǐ</rt><rt>de</rt><rt>yuán</rt><rt>sù</rt><rt>xià</rt></rtc></ruby>

            p: i.
              好好地來<ruby class="complex"><em><rb>安</rb><rb>裝</rb></em><rb>窗</rb><h-jinze class="wei"><rb>戶</rb>。</h-jinze><rtc class="pinyin"><rt>ān</rt><rt>zhuāng</rt><rt>chuāng</rt><rt>hù</rt></rtc></ruby>

            p: i
              ruby.zhuyin 爸<rt>ㄅㄚˋ</rt>爸<rt>˙ㄅㄚ</rt></ruby><em><ruby class='zhuyin'>白<rt>ㄅㄞˊ</rt>天<rt>˙ㄊㄧㄢ</rt></ruby></em><ruby class='zhuyin'>的<rt>˙ㄉㄜ</rt>行程很滿<rt></rt>啊<rt>˙ㄚ</rt>！
            p: i
              ruby.zhuyin
                | 你<rt>ㄌㄧˋ</rt>敢<rt>ㄍㆰˋ</rt>有<rt>ㄨ˫</rt>聽<rt>ㄊㄧㆩ</rt>著<rt>ㄉㄧㄜㆷ͘</rt>咱<rt>ㄌㄢˋ</rt>的<rt>ㆤˊ</rt>歌<rt>ㄍㄨㄚ</rt>？
            p: i
              | <ruby class="complex"><rb>爸</rb><rb>爸</rb><rb>白</rb><rb>天</rb><rb>的</rb><rb>行</rb><rb>程</rb><rb>很</rb><rb>滿</rb><h-jinze class="wei"><rb>啊</rb>！</h-jinze>
              | <rtc class="zhuyin"><rt>ㄅㄚˋ</rt><rt>˙ㄅㄚ</rt><rt>ㄅㄞˊ</rt><rt>˙ㄊㄧㄢ</rt><rt>˙ㄉㄜ</rt><rt>ㄒㄧㄥˊ</rt><rt>ㄔㄥˊ</rt><rt>ㄏㄣˇ</rt><rt>ㄇㄢˇ</rt><rt>˙ㄚ</rt></rtc></ruby>

            blockquote
              p
                u 共我講
                ruby.rightangle
                  | <u><rb>你</rb></u><!--
                  | --><rb>敢</rb><rb>有</rb><!--
                  | --><rb>聽</rb><rb>著</rb><!--
                  | --><rb>咱</rb><rb>的</rb><!--
                  | --><rb>歌</rb>？
                  rtc.romanization(lang='nan-Latn')
                      rt Lí
                      rt(rbspan='2') kám-ū
                      rt(rbspan='2') thiann-tio̍h
                      rt(rbspan='2') lán-ê
                      rt kua
                  rtc.zhuyin
                      rt ㄌㄧˋ
                      rt ㄍㆰˋ
                      rt ㄨ˫
                      rt ㄊㄧㆩ
                      rt ㄉㄧㄜㆷ̍
                      rt ㄌㄢˋ
                      rt ㆤˊ
                      rt ㄍㄨㄚ
                  | 有無？
                ruby.rightangle
                  | <rb>你</rb><!--
                  | --><rb>敢</rb><rb>有</rb><!--
                  | --><rb>聽</rb><rb>著</rb><!--
                  | --><rb>咱</rb><rb>的</rb><!--
                  | --><rb>歌</rb>？
                  rtc.romanization(lang='nan-Latn')
                      rt Lí
                      rt(rbspan='2') kám-ū
                      rt(rbspan='2') thiann-tio̍h
                      rt(rbspan='2') lán-ê
                      rt kua
                  rtc.zhuyin
                      rt ㄌㄧˋ
                      rt ㄍㆰˋ
                      rt ㄨ˫
                      rt ㄊㄧㆩ
                      rt ㄉㄧㄜㆷ̍
                      rt ㄌㄢˋ
                      rt ㆤˊ
                      rt ㄍㄨㄚ
                  | 有無？
                ruby.rightangle
                  | <rb>你</rb><!--
                  | --><rb>敢</rb><rb>有</rb><!--
                  | --><rb>聽</rb><rb>著</rb><!--
                  | --><rb>咱</rb><rb>的</rb><!--
                  | --><rb>歌</rb>？

                  rtc.romanization(lang='nan-Latn')
                      rt Lí
                      rt(rbspan='2') kám-ū
                      rt(rbspan='2') thiann-tio̍h
                      rt(rbspan='2') lán-ê
                      rt kua
                  rtc.zhuyin
                      rt ㄌㄧˋ
                      rt ㄍㆰˋ
                      rt ㄨ˫
                      rt ㄊㄧㆩ
                      rt ㄉㄧㄜㆷ̍
                      rt ㄌㄢˋ
                      rt ㆤˊ
                      rt ㄍㄨㄚ
                  | 有無？
              p 俗語說，
                ruby.complex.
                  <rb>一</rb>
                  <rb>人</rb>
                  <rb>煩</rb>
                  <rb>惱</rb>
                  <rb>一</rb>
                  <rb>樣</rb>，
                  <rb>無</rb>
                  <rb>人</rb>
                  <rb>煩</rb>
                  <rb>惱</rb>
                  <rb>親</rb>
                  <rb>像</rb>。

                  <rtc class="zhuyin">
                      <rt>ㄐㄧㆵ͘</rt>
                      <rt>ㄌㄤˊ</rt>
                      <rt>ㄏㄨㄢˊ</rt>
                      <rt>ㄌㄜˋ</rt>
                      <rt>ㄐㄧㆵ͘</rt>
                      <rt>ㄧㆫ˫</rt>
                      <rt>ㆠㄜˊ</rt>
                      <rt>ㄌㄤˊ</rt>
                      <rt>ㄏㄨㄢˊ</rt>
                      <rt>ㄌㄜˋ</rt>
                      <rt>ㄑㄧㄣ</rt>
                      <rt>ㄑㄧㆫ˫</rt>
                      <rt></rt>
                  </rtc>
                  <rtc class="romanization">
                    <rt>Tsi̍t</rt>
                    <rt>lâng</rt>
                    <rt rbspan="2">hoân‑ló</rt>
                    <rt>chi̍t</rt>
                    <rt>iūⁿ</rt>
                    <rt rbspan="2">bô‑lâng</rt>
                    <rt rbspan="2">hoân‑ló</rt>
                    <rt rbspan="2">chhin‑chhiūⁿ</rt>
                  </rtc>
                  <rtc class="romanization"><rt>Tsi̍t</rt>
                    <rt>lâng</rt>
                    <rt rbspan="2">huân-ló</rt>
                    <rt>tsi̍t</rt>
                    <rt>iūnn</rt>
                    <rt rbspan="2">bô-lâng</rt>
                    <rt rbspan="2">huân-ló</rt>
                    <rt rbspan="2">tshin-tshiūnn</rt>
                  </rtc>
    // Here goes scripts
    script(src='./han.min.js')