han-css/test/em.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='./em-han.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_zhuozhonghao')
        h2 基本着重號
        p
          em 繁體中文的着重號
          | 和簡體中文一樣。
        p(lang='zh-Hans')
          em 简体中文的着重号
          | 和繁体中文一样。
        p(lang='ja')
          em 日本語の著重奌
          | 独特の風味。
      section(id='wanzheng-cjk')
        h2 完整中日韓意音文字區段支援
        p
          strong 注意：
          | 部分擴展區漢字可能不為多數作業系統支援，而顯示為空白方框。
          a(href='http://fonts.jp/hanazono/') 安裝花園明朝體
          | 可以解決這個問題。
        p
          | 中日韓意音文字擴展區段：<em>𫞵𫞦𠁻𠁶</em><br>
          | 意音數字零：<em>〇</em><br>
          | 康熙字典及簡體字部首：<em>⼌⿕⺃⻍⻰⻳</em><br>
          | 意音文字描述字元：<em>⿸⿷⿳</em>
      section(id='biaodian_guibi')
        h2 標點規避
        p
          | 唐朝是中國歷史上一個重要的朝代。唐王李淵於618年逼隋恭帝禪位，遂建唐朝取代隋朝，設首都於長安。在其鼎盛時的7世紀，遙遠的中亞綠洲地帶亦受唐支配。
          em 唐朝在文化、政治、經濟、外交&#x2026;&#x2026;等方面都達到了很高的成就，
          | 是中國歷史上的盛世之一，也是當時的世界強國。
        section(id='biaodian_guibi-riyu')
          h3 日語着重號的標點規避
          p(lang='ja')
            | アンネリース・マリー・フランク（ドイツ語：
            span(lang='de') Annelies Marie Frank
            | 、1929年6月12日－1945年3月上旬）は、
            em <cite>『アンネの日記』</cite>の著者として知られるユダヤ系ドイツ人の少女である。
      section(id='xiwen')
        h2 西文
        section(id='xiwen-latin')
          h3 拉丁字母
          p: em 我道，<span lang='es'>¡Hola!</span> 他問，<span lang='es'>¿Cómo estás?</span>
          p
            | 德文中如何表達「羅曼式建築」這個概念？德國學者
            em 最初在<span lang='de'>teutsch</span>、<span lang='de'>longobardisch</span>和<span lang='de'>romantische</span>三詞間猶豫
            | ，最終在19世紀30年代偏向了「<span lang='de'>romantishce</span>」一詞。
        section(id='xiwen-greek')
          h3 希臘字母
          p
            | 至今
            em 關於古希臘遊吟詩人<span lang='el'>Ὅμηρος</span>的資料很少
            | ，所以對其生平有很多說法，但都無確鑿證據。
        section(id='xiwen-cyrillic')
          h3 西里爾字母
          p
            em <span lang='bg'>Храм-паметник „Свети Александър Невски‟</span>是一座位於保加利亞首都索菲亞的保加利亞東正教大教堂。
            | 該教堂為新拜占庭式建築，是保加利亞主教的主座教堂，也是東正教在世界上最大的教堂之一，還是索菲亞的象徵之一以及主要的遊覽景點。
        section(id='xiwen-zuhezi')
          h3 組合字（<span lang='en'>combining character</span>）
          p
            em 對你吶喊一聲，<!--
              | -->&#x0443;&#x0310;&#x0065;&#x0308;&#x0308;&#x0308;&#x0391;&#x032b;&#x0389;&#x0325;！
        section(id='xiwen-zichengyiti')
          h3 自成一體的西文強調
          p(lang='en')
            | I will have to tell you —
            | <em>The cat is cute.</em>
          p
            | 我必須說——
            em(lang='el') Η γάτα είναι χαριτωμένο.
          p(lang='ja')
            | 言う必要があります、
            em(lang='ru') Кошка мило.
      section(id='yu_qita_zijiyuyi_yuansu_gongyong')
        h2 與其他字級語意元素共用
        p: em
          ruby.pinyin 行間注<rt>hángjiānzhù
          | ruby
          ruby.zhuyin(lang='zh-nan-Hant') 是<rt>ㄒㄧ˫</rt>按<rt>ㄢˋ</rt>怎<rt>ㄗㄨㆩˋ</rt>
          | ？
          u 註記元素u
          | 與
          i 變音元素i
          | 。
      section(id='dingzhi')
        h2 定制
        p
          | 無論你想要把
          em.above 着重號放在上邊
          | ，或是想用
          em.sesame 空心「芝麻號」
          | 都沒有問題！抑或是
          em.above-dc 這樣搞怪的圈圈
          | ，也可以用
          em.rebecca 有紀念意義的顏色。
        p: em.no-skip 不想「規避標點」也行。
        section(id='dingzhi_fangshi')
          h3 定制方式
          p
            | 定制功能需要自行引用<code>han.sass</code>模塊<!--
            | -->（而無法直接使用CDN文件），並依需求設定變數等，詳見
            a(href='https://css.hanzi.co/manual/sass-api#inline-emphasis-mark') 說明文件
            | 及<cite lang='en'><a href='//www.w3.org/TR/css-text-decor-3/#emphasis-marks'>CSS Text Decoration Module Level 3</a></cite>。

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