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