Update East Asian language support and docs

trilbymedia · Jun 28, 2017 · ef49185 · ef49185
1 parent a827f7e
commit ef49185
Show file tree

Hide file tree

Showing 6 changed files with 44 additions and 19 deletions.
diff --git a/README.md b/README.md
@@ -11,10 +11,17 @@ Read [the documentation](https://picturepan2.github.io/spectre/) to learn more.
 
 ### Getting started
 
-There are 4 ways to get started with Spectre CSS framework in your projects. You can either manually install or use NPM, Yarn and Bower.
+There are 5 ways to get started with Spectre CSS framework in your projects. You can either manually install or use NPM, Yarn and Bower.
 
 ##### Install manually
-Download the compiled and minified [Spectre CSS file](https://github.com/picturepan2/spectre/tree/master/docs/dist).
+Download the compiled and minified [Spectre CSS file](https://github.com/picturepan2/spectre/tree/master/docs/dist). And include `spectre.css` located in `/docs/dist` in your website or Web app &lt;head&gt; part.
+
+`<link rel="stylesheet" href="spectre.min.css" />`
+
+##### Install from CDN
+Alternatively, you can use the [unpkg](https://unpkg.com/) CDN to load compiled Spectre.css.
+
+`<link rel="stylesheet" href="https://unpkg.com/spectre.css/dist/spectre.min.css" />`
 
 ##### Install with NPM
 `$ npm install spectre.css --save`
@@ -25,9 +32,7 @@ Download the compiled and minified [Spectre CSS file](https://github.com/picture
 ##### Install with Bower
 `$ bower install spectre.css --save`
 
-And include `spectre.css` located in `/docs/dist` in your website or Web app &lt;head&gt; part.
 
-`<link rel="stylesheet" href="spectre.min.css" />`
 
 ### Compiling custom version
 

diff --git a/docs/dist/spectre.css b/docs/dist/spectre.css
@@ -519,11 +519,14 @@ dl dt {
 dl dd {
   margin: .5rem 0 1.5rem 0;
 }
-:lang(zh),
-:lang(ja),
-:lang(ko),
-.cjk {
-  font-family: -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Hiragino Kaku Gothic Pro", Meiryo, "Malgun Gothic", "Helvetica Neue", sans-serif;
+:lang(zh) {
+  font-family: -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", sans-serif;
+}
+:lang(ja) {
+  font-family: -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "Hiragino Sans", "Hiragino Kaku Gothic Pro", "Yu Gothic", YuGothic, Meiryo, "Helvetica Neue", sans-serif;
+}
+:lang(ko) {
+  font-family: -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "Malgun Gothic", "Helvetica Neue", sans-serif;
 }
 :lang(zh) ins,
 :lang(ja) ins,

diff --git a/docs/dist/spectre.min.css b/docs/dist/spectre.min.css
diff --git a/docs/elements.html b/docs/elements.html
@@ -202,12 +202,26 @@ <h5>Korean</h5>
             <p lang="ko">나라말이 중국과 달라, 한문・한자와 서로 통하지 아니하므로, 어리석은 백성들이 말하고자 하는 바가 있어도, 끝내 제 뜻을 펴지 못하는 사람이 많다. 내가 이를 불쌍히 여겨, 새로 스물 여덟 글자를 만드니, 사람마다 하여금 쉽게 익혀, 날마다 씀에 편하게 하고자 할 따름이다.</p>
           </section>
           <section class="notes">
-            <p>Use the <code>lang</code> attribute or add the <code>cjk</code> class to the container element to have better Asian CJK (Chinese, Japanese and Korean) support.</p>
+            <p>Use the <code>lang</code> attribute to the container element to have better Asian CJK (Chinese, Japanese and Korean) font support. </p>
           </section>
 
 <!-- east asian example -->
-<pre class="code" data-lang="HTML"><code>&lt;<span class="tag">p</span> <span class="atn">class</span>=<span class="atv">&quot;cjk&quot;</span>&gt;祇園精舎の鐘の声、諸行無常の響きあり。……&lt;<span class="tag">/p</span>&gt;
-&lt;<span class="tag">p</span> <span class="atn">lang</span>=<span class="atv">&quot;ja&quot;</span>&gt;祇園精舎の鐘の声、諸行無常の響きあり。……&lt;<span class="tag">/p</span>&gt;
+<pre class="code" data-lang="HTML"><code>&lt;<span class="tag">p</span> <span class="atn">lang</span>=<span class="atv">&quot;zh-Hans&quot;</span>&gt;革命不是请客吃饭，不是做文章……&lt;<span class="tag">/p</span>&gt;
+&lt;<span class="tag">p</span> <span class="atn">lang</span>=<span class="atv">&quot;ja&quot;</span>&gt;祇園精舎の鐘の声、諸行無常の響きあり……&lt;<span class="tag">/p</span>&gt;
+&lt;<span class="tag">p</span> <span class="atn">lang</span>=<span class="atv">&quot;ko&quot;</span>&gt;나라말이 중국과 달라, 한문・한자와 서로 통하지 아니하므로……&lt;<span class="tag">/p</span>&gt;
+</code></pre>
+
+          <section class="notes">
+            <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>
+          </section>
+          <section class="notes">
+            <p lang="ja"><u>祇園</u><u>精舎</u>の鐘の声、諸行無常の響きあり。</p>
+            <p lang="ja"><del>祇園</del><del>精舎</del>の鐘の声、諸行無常の響きあり。</p>
+          </section>
+
+<!-- east asian example -->
+<pre class="code" data-lang="HTML"><code>&lt;<span class="tag">p</span> <span class="atn">class</span>=<span class="atv">&quot;cjk&quot;</span>&gt;&lt;<span class="tag">u</span>&gt;祇園&lt;<span class="tag">/u</span>&gt;&lt;<span class="tag">u</span>&gt;精舎&lt;<span class="tag">/u</span>&gt;の鐘の声、諸行無常の響きあり。……&lt;<span class="tag">/p</span>&gt;
+&lt;<span class="tag">p</span> <span class="atn">class</span>=<span class="atv">&quot;cjk&quot;</span>&gt;&lt;<span class="tag">del</span>&gt;祇園&lt;<span class="tag">/del</span>&gt;&lt;<span class="tag">del</span>&gt;精舎&lt;<span class="tag">/del</span>&gt;の鐘の声、諸行無常の響きあり。……&lt;<span class="tag">/p</span>&gt;
 </code></pre>
 
           <header class="text-center"><h4>Blockquote</h4></header>

diff --git a/src/asian.less b/src/asian.less
@@ -1,14 +1,16 @@
 // Optimized for East Asian CJK
-:lang(zh),
-:lang(ko),
-.cjk {
-  font-family: @cjk-font-family;
+:lang(zh) {
+  font-family: @cjk-zh-font-family;
 }
 
 :lang(ja) {
   font-family: @cjk-jp-font-family;
 }
 
+:lang(ko) {
+  font-family: @cjk-ko-font-family;
+}
+
 :lang(zh),
 :lang(ja),
 .cjk {
@@ -17,7 +19,7 @@
     border-bottom: .1rem solid;
     text-decoration: none;
   }
-  // Credit: https://github.com/ethantw/Han
+
   del + del,
   del + s,
   ins + ins,

diff --git a/src/variables.less b/src/variables.less
@@ -14,7 +14,8 @@
 @base-font-family: -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto;
 @fallback-font-family: "Helvetica Neue", sans-serif;
 @cjk-jp-font-family: @base-font-family, "Hiragino Sans", "Hiragino Kaku Gothic Pro", "Yu Gothic", YuGothic, Meiryo, @fallback-font-family;
-@cjk-font-family: @base-font-family, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Hiragino Kaku Gothic Pro", Meiryo, "Malgun Gothic", @fallback-font-family;
+@cjk-zh-font-family: @base-font-family, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", @fallback-font-family;
+@cjk-ko-font-family: @base-font-family, "Malgun Gothic", @fallback-font-family;
 @body-font-family: @base-font-family, @fallback-font-family;
 
 // Sizes