diff options
Fix code font-family issue for asian languages #476
2 files changed, 38 insertions, 11 deletions
| -rw-r--r-- | docs/src/elements/typography.pug | 24 | ||||
| -rw-r--r-- | docs/src/getting-started.pug | 25 |
diff --git a/docs/src/elements/typography.pug b/docs/src/elements/typography.pug index 53e47f1..2fb7733 100644 --- a/docs/src/elements/typography.pug +++ b/docs/src/elements/typography.pug @@ -137,31 +137,33 @@ block docs-content .docs-demo.columns .column p.h5 - | #[small(lang='zh-Hans') 你好], #[small(lang='ja') こんにちは], #[small(lang='ko') 안녕하세요] + | #[small.lang-zh-hans 你好], #[small.lang-ja こんにちは], #[small.lang-ko 안녕하세요] p.h6 Chinese (Simplified) - p(lang='zh-Hans') 革命不是请客吃饭，不是做文章，不是绘画绣花，不能那样雅致，那样从容不迫，“文质彬彬”，那样“温良恭俭让”。革命就是暴动，是一个阶级推翻一个阶级的暴烈的行动。 + p.lang-zh-hans 革命不是请客吃饭，不是做文章，不是绘画绣花，不能那样雅致，那样从容不迫，“文质彬彬”，那样“温良恭俭让”。革命就是暴动，是一个阶级推翻一个阶级的暴烈的行动。 p.h6 Chinese (Tranditional) - p(lang='zh-Hant') + p.lang-zh-hant | 山不在高，有仙則名；水不在深，有龍則靈。斯是陋室，惟吾德馨。苔痕上階綠，草色入簾青；談笑有鴻儒，往來無白丁。可以調素琴，閱金經。無絲竹之亂耳，無案牘之勞形。南陽諸葛廬，西蜀子雲亭。孔子云：「何陋之有？」 p.h6 Japanese - p(lang='ja') + p.lang-ja | 祇園精舎の鐘の声、諸行無常の響きあり。沙羅双樹の花の色、盛者必衰の理をあらはす。おごれる人も久しからず。ただ春の夜の夢のごとし。たけき者も遂にはほろびぬ、ひとへに風の前の塵に同じ。 p.h6 Korean - p(lang='ko') + p.lang-ko | 나라말이 중국과 달라, 한문・한자와 서로 통하지 아니하므로, 어리석은 백성들이 말하고자 하는 바가 있어도, 끝내 제 뜻을 펴지 못하는 사람이 많다. 내가 이를 불쌍히 여겨, 새로 스물 여덟 글자를 만드니, 사람마다 하여금 쉽게 익혀, 날마다 씀에 편하게 하고자 할 따름이다. p - | Use the #[code lang] attribute to the container element to have better Asian CJK (Chinese, Japanese and Korean) font support. + | Add the #[code lang] attribute to the #{'<html>'} element or use the class #[code lang-zh], #[code lang-zh-hans], #[code lang-zh-hant], #[code lang-ja] or #[code lang-ko] to have better Asian CJK (Chinese, Japanese and Korean) font support. pre.code(data-lang='HTML') code :highlight(lang="html") - <p lang="zh-Hans">革命不是请客吃饭，不是做文章……</p> - <p lang="ja">祇園精舎の鐘の声、諸行無常の響きあり……</p> - <p lang="ko">나라말이 중국과 달라, 한문・한자와 서로 통하지 아니하므로……</p> + <html lang="zh-Hans">……</html> + + <p class="lang-zh-hans">革命不是请客吃饭，不是做文章……</p> + <p class="lang-ja">祇園精舎の鐘の声、諸行無常の響きあり……</p> + <p class="lang-ko">나라말이 중국과 달라, 한문・한자와 서로 통하지 아니하므로……</p> 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. + | And you can use the #[code lang-cjk] class or the #[code lang] attribute to add spacing between underlines and strike-through text for better Chinese and Japanese readability. .docs-demo.columns .column @@ -173,7 +175,7 @@ block docs-content pre.code(data-lang='HTML') code :highlight(lang="html") - <p class="cjk"><u>祇園</u><u>精舎</u>の鐘の声、諸行無常の響きあり。……</p> + <p class="lang-cjk"><u>祇園</u><u>精舎</u>の鐘の声、諸行無常の響きあり。……</p> <p lang="ja"><del>祇園</del><del>精舎</del>の鐘の声、諸行無常の響きあり。……</p> +docs-subheading('typography-fonts', 'Fonts') diff --git a/docs/src/getting-started.pug b/docs/src/getting-started.pug index 1e83c26..d8e369d 100644 --- a/docs/src/getting-started.pug +++ b/docs/src/getting-started.pug @@ -15,4 +15,29 @@ block docs-content p | Spectre provides basic styles for typography and elements, flexbox based responsive layout system, pure CSS components and utilities with best practice coding and consistent design language. + .columns + .column + .tile.tile-centered + .tile-icon + .example-tile-icon + i.icon.icon-mail.centered + .tile-content + .tile-title spectre-docs.pdf + .tile-subtitle.text-gray 14MB · Public · 1 Jan, 2017 + .tile-action + button.btn.btn-link.btn-action + i.icon.icon-more-vert + .column + .tile.tile-centered + .tile-icon + .example-tile-icon + i.icon.icon-mail.centered + .tile-content + .tile-title spectre-docs.pdf + .tile-subtitle.text-gray 14MB · Public · 1 Jan, 2017 + .tile-action + button.btn.btn-link.btn-action + i.icon.icon-more-vert + + include _layout/_footer.pug |