Update zh-Hans and zh-Hant font code

1 files changed, 25 insertions, 27 deletions

diff --git a/docs/src/contents/typography.pug b/docs/src/contents/typography.pug
index 876a956..0656f91 100644
--- a/docs/src/contents/typography.pug
+++ b/docs/src/contents/typography.pug
@@ -122,24 +122,22 @@ pre.code(data-lang='HTML')
 
 +docs-subheading('typography-east-asian', 'Optimized for East Asian fonts')
 
-p.h5
-  small(lang='zh-Hans') 你好
-  | , 
-  small(lang='ja') こんにちは
-  | ,
-  small(lang='ko') 안녕하세요
+.docs-demo.columns
+  .column
+    p.h5
+      | #[small(lang='zh-Hans') 你好], #[small(lang='ja') こんにちは], #[small(lang='ko') 안녕하세요]
+    p.h6 Chinese (Simplified)
+    p(lang='zh-Hans') 革命不是请客吃饭，不是做文章，不是绘画绣花，不能那样雅致，那样从容不迫，“文质彬彬”，那样“温良恭俭让”。革命就是暴动，是一个阶级推翻一个阶级的暴烈的行动。
+    p.h6 Chinese (Tranditional)
+    p(lang='zh-Hant')
+      | 山不在高，有仙則名；水不在深，有龍則靈。斯是陋室，惟吾德馨。苔痕上階綠，草色入簾青；談笑有鴻儒，往來無白丁。可以調素琴，閱金經。無絲竹之亂耳，無案牘之勞形。南陽諸葛廬，西蜀子雲亭。孔子云：「何陋之有？」
+    p.h6 Japanese
+    p(lang='ja')
+      | 祇園精舎の鐘の声、諸行無常の響きあり。沙羅双樹の花の色、盛者必衰の理をあらはす。おごれる人も久しからず。ただ春の夜の夢のごとし。たけき者も遂にはほろびぬ、ひとへ‌​に風の前の塵に同じ。
+    p.h6 Korean
+    p(lang='ko')
+      | 나라말이 중국과 달라, 한문・한자와 서로 통하지 아니하므로, 어리석은 백성들이 말하고자 하는 바가 있어도, 끝내 제 뜻을 펴지 못하는 사람이 많다. 내가 이를 불쌍히 여겨, 새로 스물 여덟 글자를 만드니, 사람마다 하여금 쉽게 익혀, 날마다 씀에 편하게 하고자 할 따름이다.
 
-p.h6 Chinese (Simplified)
-p(lang='zh-Hans') 革命不是请客吃饭，不是做文章，不是绘画绣花，不能那样雅致，那样从容不迫，“文质彬彬”，那样“温良恭俭让”。革命就是暴动，是一个阶级推翻一个阶级的暴烈的行动。
-p.h6 Chinese (Tranditional)
-p(lang='zh-Hant')
-  | 山不在高，有仙則名；水不在深，有龍則靈。斯是陋室，惟吾德馨。苔痕上階綠，草色入簾青；談笑有鴻儒，往來無白丁。可以調素琴，閱金經。無絲竹之亂耳，無案牘之勞形。南陽諸葛廬，西蜀子雲亭。孔子云：「何陋之有？」
-p.h6 Japanese
-p(lang='ja')
-  | 祇園精舎の鐘の声、諸行無常の響きあり。沙羅双樹の花の色、盛者必衰の理をあらはす。おごれる人も久しからず。ただ春の夜の夢のごとし。たけき者も遂にはほろびぬ、ひとへ‌​に風の前の塵に同じ。
-p.h6 Korean
-p(lang='ko')
-  | 나라말이 중국과 달라, 한문・한자와 서로 통하지 아니하므로, 어리석은 백성들이 말하고자 하는 바가 있어도, 끝내 제 뜻을 펴지 못하는 사람이 많다. 내가 이를 불쌍히 여겨, 새로 스물 여덟 글자를 만드니, 사람마다 하여금 쉽게 익혀, 날마다 씀에 편하게 하고자 할 따름이다.
 p
   | Use the #[code lang] attribute to the container element to have better Asian CJK (Chinese, Japanese and Korean) font support.
 
@@ -153,20 +151,18 @@ pre.code(data-lang='HTML')
 p
   | And you can use the #[code cjk] class or the #[code lang] attribute to add spacing between underlines and strike-through text for better Chinese and Japanese readability.
 
-p(lang='ja')
-  u 祇園
-  u 精舎
-  | の鐘の声、諸行無常の響きあり。
-p(lang='ja')
-  del 祇園
-  del 精舎
-  | の鐘の声、諸行無常の響きあり。
+.docs-demo.columns
+  .column
+    p(lang='ja').
+      <u>祇園</u><u>精舎</u>の鐘の声、諸行無常の響きあり。
+    p(lang='ja').
+      <del>祇園</del><del>精舎</del>の鐘の声、諸行無常の響きあり。
 
 pre.code(data-lang='HTML')
   code
     :highlight(lang="html")
       <p class="cjk"><u>祇園</u><u>精舎</u>の鐘の声、諸行無常の響きあり。……</p>
-      <p class="cjk"><del>祇園</del><del>精舎</del>の鐘の声、諸行無常の響きあり。……</p>
+      <p lang="ja"><del>祇園</del><del>精舎</del>の鐘の声、諸行無常の響きあり。……</p>
 
 +docs-subheading('typography-fonts', 'Fonts')
 
@@ -182,8 +178,10 @@ pre.code
       /* Monospace typography targeted */
       font-family: "SF Mono", "Segoe UI Mono", "Roboto Mono", Menlo, Courier, monospace;
 
-      /* Chinese (lang="zh-Hans" and lang="zh-Hant") targeted */
+      /* Chinese (lang="zh" and lang="zh-Hans") targeted */
       font-family: -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", sans-serif;
+      /* Chinese (lang="zh-Hant") targeted */
+      font-family: -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "PingFang TC", "Hiragino Sans CNS", "Microsoft JhengHei", "Helvetica Neue", sans-serif;
       /* Japanese (lang="ja") targeted */
       font-family: -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "Hiragino Sans", "Hiragino Kaku Gothic Pro", "Yu Gothic", YuGothic, Meiryo, "Helvetica Neue", sans-serif;
       /* Korean (lang="ko") targeted */