Create feature test page with font selector

diff --git a/.gitignore b/.gitignore
new file mode 100644 (file)
index 0000000..5df1b9b
--- /dev/null
+++ b/.gitignore
@@ -0,0 +1 @@
+.sass-cache

diff --git a/css/fonts.css b/css/fonts.css
new file mode 100644 (file)
index 0000000..005ce67
--- /dev/null
+++ b/css/fonts.css
@@ -0,0 +1,263 @@
+/* Include all fonts & customized classes */
+@font-face {
+  font-family: "Prompt";
+  src: url(../font/Prompt-Thin.ttf) format("truetype");
+  font-weight: 100;
+  font-style: normal; }
+@font-face {
+  font-family: "Prompt";
+  src: url(../font/Prompt-ThinItalic.ttf) format("truetype");
+  font-weight: 100;
+  font-style: italic; }
+.prompt-100 {
+  font-family: "Prompt";
+  font-weight: 100;
+  font-style: normal; }
+
+.prompt-100i {
+  font-family: "Prompt";
+  font-weight: 100;
+  font-style: italic; }
+
+@font-face {
+  font-family: "Prompt";
+  src: url(../font/Prompt-ExtraLight.ttf) format("truetype");
+  font-weight: 200;
+  font-style: normal; }
+@font-face {
+  font-family: "Prompt";
+  src: url(../font/Prompt-ExtraLightItalic.ttf) format("truetype");
+  font-weight: 200;
+  font-style: italic; }
+.prompt-200 {
+  font-family: "Prompt";
+  font-weight: 200;
+  font-style: normal; }
+
+.prompt-200i {
+  font-family: "Prompt";
+  font-weight: 200;
+  font-style: italic; }
+
+@font-face {
+  font-family: "Prompt";
+  src: url(../font/Prompt-Light.ttf) format("truetype");
+  font-weight: 300;
+  font-style: normal; }
+@font-face {
+  font-family: "Prompt";
+  src: url(../font/Prompt-LightItalic.ttf) format("truetype");
+  font-weight: 300;
+  font-style: italic; }
+.prompt-300 {
+  font-family: "Prompt";
+  font-weight: 300;
+  font-style: normal; }
+
+.prompt-300i {
+  font-family: "Prompt";
+  font-weight: 300;
+  font-style: italic; }
+
+@font-face {
+  font-family: "Prompt";
+  src: url(../font/Prompt-Regular.ttf) format("truetype");
+  font-weight: 400;
+  font-style: normal; }
+@font-face {
+  font-family: "Prompt";
+  src: url(../font/Prompt-Italic.ttf) format("truetype");
+  font-weight: 400;
+  font-style: italic; }
+.prompt-400 {
+  font-family: "Prompt";
+  font-weight: 400;
+  font-style: normal; }
+
+.prompt-400i {
+  font-family: "Prompt";
+  font-weight: 400;
+  font-style: italic; }
+
+@font-face {
+  font-family: "Prompt";
+  src: url(../font/Prompt-Medium.ttf) format("truetype");
+  font-weight: 500;
+  font-style: normal; }
+@font-face {
+  font-family: "Prompt";
+  src: url(../font/Prompt-MediumItalic.ttf) format("truetype");
+  font-weight: 500;
+  font-style: italic; }
+.prompt-500 {
+  font-family: "Prompt";
+  font-weight: 500;
+  font-style: normal; }
+
+.prompt-500i {
+  font-family: "Prompt";
+  font-weight: 500;
+  font-style: italic; }
+
+@font-face {
+  font-family: "Prompt";
+  src: url(../font/Prompt-SemiBold.ttf) format("truetype");
+  font-weight: 600;
+  font-style: normal; }
+@font-face {
+  font-family: "Prompt";
+  src: url(../font/Prompt-SemiBoldItalic.ttf) format("truetype");
+  font-weight: 600;
+  font-style: italic; }
+.prompt-600 {
+  font-family: "Prompt";
+  font-weight: 600;
+  font-style: normal; }
+
+.prompt-600i {
+  font-family: "Prompt";
+  font-weight: 600;
+  font-style: italic; }
+
+@font-face {
+  font-family: "Prompt";
+  src: url(../font/Prompt-Bold.ttf) format("truetype");
+  font-weight: 700;
+  font-style: normal; }
+@font-face {
+  font-family: "Prompt";
+  src: url(../font/Prompt-BoldItalic.ttf) format("truetype");
+  font-weight: 700;
+  font-style: italic; }
+.prompt-700 {
+  font-family: "Prompt";
+  font-weight: 700;
+  font-style: normal; }
+
+.prompt-700i {
+  font-family: "Prompt";
+  font-weight: 700;
+  font-style: italic; }
+
+@font-face {
+  font-family: "Prompt";
+  src: url(../font/Prompt-ExtraBold.ttf) format("truetype");
+  font-weight: 800;
+  font-style: normal; }
+@font-face {
+  font-family: "Prompt";
+  src: url(../font/Prompt-ExtraBoldItalic.ttf) format("truetype");
+  font-weight: 800;
+  font-style: italic; }
+.prompt-800 {
+  font-family: "Prompt";
+  font-weight: 800;
+  font-style: normal; }
+
+.prompt-800i {
+  font-family: "Prompt";
+  font-weight: 800;
+  font-style: italic; }
+
+@font-face {
+  font-family: "Prompt";
+  src: url(../font/Prompt-Black.ttf) format("truetype");
+  font-weight: 900;
+  font-style: normal; }
+@font-face {
+  font-family: "Prompt";
+  src: url(../font/Prompt-BlackItalic.ttf) format("truetype");
+  font-weight: 900;
+  font-style: italic; }
+.prompt-900 {
+  font-family: "Prompt";
+  font-weight: 900;
+  font-style: normal; }
+
+.prompt-900i {
+  font-family: "Prompt";
+  font-weight: 900;
+  font-style: italic; }
+
+body {
+  font-family: "Prompt";
+  -webkit-font-feature-settings: "ccmp";
+  -moz-font-feature-settings: "ccmp";
+  -ms-font-feature-settings: "ccmp";
+  font-feature-settings: "ccmp";
+  -webkit-font-feature-settings: "locl";
+  -moz-font-feature-settings: "locl";
+  -ms-font-feature-settings: "locl";
+  font-feature-settings: "locl";
+  -webkit-font-kerning: normal;
+  -moz-font-kerning: normal;
+  -ms-font-kerning: normal;
+  font-kerning: normal;
+  -webkit-font-variant: common-ligatures;
+  -moz-font-variant: common-ligatures;
+  -ms-font-variant: common-ligatures;
+  font-variant: common-ligatures; }
+  body .test-text {
+    font-size: 36px; }
+  body .tnum {
+    -webkit-font-feature-settings: "tnum";
+    -moz-font-feature-settings: "tnum";
+    -ms-font-feature-settings: "tnum";
+    font-feature-settings: "tnum"; }
+  body .pnum {
+    -webkit-font-feature-settings: "pnum";
+    -moz-font-feature-settings: "pnum";
+    -ms-font-feature-settings: "pnum";
+    font-feature-settings: "pnum"; }
+  body sup, body .sups {
+    -webkit-font-feature-settings: "sups";
+    -moz-font-feature-settings: "sups";
+    -ms-font-feature-settings: "sups";
+    font-feature-settings: "sups";
+    vertical-align: unset; }
+  body sub, body .subs {
+    -webkit-font-feature-settings: "subs";
+    -moz-font-feature-settings: "subs";
+    -ms-font-feature-settings: "subs";
+    font-feature-settings: "subs";
+    vertical-align: unset; }
+  body .numr {
+    -webkit-font-feature-settings: "numr";
+    -moz-font-feature-settings: "numr";
+    -ms-font-feature-settings: "numr";
+    font-feature-settings: "numr";
+    vertical-align: unset; }
+  body .dnom {
+    -webkit-font-feature-settings: "dnom";
+    -moz-font-feature-settings: "dnom";
+    -ms-font-feature-settings: "dnom";
+    font-feature-settings: "dnom";
+    vertical-align: unset; }
+  body .frac {
+    -webkit-font-feature-settings: "frac";
+    -moz-font-feature-settings: "frac";
+    -ms-font-feature-settings: "frac";
+    font-feature-settings: "frac"; }
+  body .ordn {
+    -webkit-font-feature-settings: "ordn";
+    -moz-font-feature-settings: "ordn";
+    -ms-font-feature-settings: "ordn";
+    font-feature-settings: "ordn"; }
+
+/* Font selector */
+.select-form {
+  position: fixed;
+  z-index: 1000;
+  top: 15px;
+  right: 15px; }
+  .select-form #font-selector {
+    padding: 02px 5px;
+    border: 1px solid #e6e6e6;
+    border-radius: 0;
+    overflow: hidden;
+    background-color: #555;
+    color: #fff; }
+    .select-form #font-selector:focus {
+      outline: none; }
+
+/*# sourceMappingURL=fonts.css.map */

diff --git a/css/fonts.css.map b/css/fonts.css.map
new file mode 100644 (file)
index 0000000..2b55aac
--- /dev/null
+++ b/css/fonts.css.map
@@ -0,0 +1,7 @@
+{
+"version": 3,
+"mappings": "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",
+"sources": ["fonts.scss"],
+"names": [],
+"file": "fonts.css"
+}

diff --git a/css/fonts.scss b/css/fonts.scss
new file mode 100644 (file)
index 0000000..488b077
--- /dev/null
+++ b/css/fonts.scss
@@ -0,0 +1,118 @@
+$font-family: "Prompt";
+$class-name: "prompt";
+
+$weightnames: Thin 100, ExtraLight 200, Light 300, Regular 400, Medium 500, SemiBold 600, Bold 700, ExtraBold 800, Black 900;
+
+@mixin font-include($name, $weight, $style) {
+  font-family: $font-family;
+  src: url(../font/#{$name}.ttf) format('truetype');
+  font-weight: $weight;
+  font-style: $style;
+}
+
+@mixin font-class($weight, $style) {
+  font-family: $font-family;
+  font-weight: $weight;
+  font-style: $style;
+}
+
+/* Include all fonts & customized classes */
+@each $n in $weightnames {
+  $name: nth($n, 1);
+  $weight: nth($n, 2);
+
+  @font-face {
+    @include font-include(#{$font-family}-#{$name}, #{$weight}, normal);
+  }
+  @font-face {
+    @if $name == Regular {
+      @include font-include(#{$font-family}-Italic, #{$weight}, italic);
+    }
+    @else {
+      @include font-include(#{$font-family}-#{$name}Italic, #{$weight}, italic);
+    }
+  }
+  .#{$class-name}-#{$weight} {
+    @include font-class(#{$weight}, normal);
+  }
+  .#{$class-name}-#{$weight}i {
+    @include font-class(#{$weight}, italic);
+  }
+}
+
+@mixin vendor-prefix($name, $arg) {
+  -webkit-#{$name}: #{$arg};
+  -moz-#{$name}: #{$arg};
+  -ms-#{$name}: #{$arg};
+  #{$name}: #{$arg};
+}
+
+@mixin ot-feature($arg) {
+  @include vendor-prefix(font-feature-settings, #{$arg})
+}
+
+// Font options
+body {
+  font-family: $font-family;
+  @include ot-feature('"ccmp"');
+  @include ot-feature('"locl"');
+  @include vendor-prefix(font-kerning, normal);
+  @include vendor-prefix(font-variant, common-ligatures);
+
+  .test-text {
+    font-size: 36px;
+  }
+
+  .tnum {
+    @include ot-feature('"tnum"');
+  }
+  
+  .pnum {
+    @include ot-feature('"pnum"');
+  }
+  
+  sup, .sups {
+    @include ot-feature('"sups"');
+    vertical-align: unset;
+  }
+  
+  sub, .subs {
+    @include ot-feature('"subs"');
+    vertical-align: unset;
+  }
+  
+  .numr {
+    @include ot-feature('"numr"');
+    vertical-align: unset;
+  }
+  
+  .dnom {
+    @include ot-feature('"dnom"');
+    vertical-align: unset;
+  }
+  
+  .frac {
+    @include ot-feature('"frac"');
+  }
+
+  .ordn {
+    @include ot-feature('"ordn"');
+  }
+}
+
+/* Font selector */
+.select-form {
+  position: fixed;
+  z-index: 1000;
+  top: 15px;
+  right: 15px;
+  #font-selector {
+    padding: 02px 5px;
+    border: 1px solid darken( #fff, 10% );
+    border-radius: 0;
+    overflow: hidden;
+    background-color: #555;
+    color: #fff;
+    &:focus{ outline: none; }
+  }
+}

diff --git a/features.html b/features.html
new file mode 100644 (file)
index 0000000..5d8b6ff
--- /dev/null
+++ b/features.html
@@ -0,0 +1,168 @@
+<!DOCTYPE html>
+<html class="full" lang="th">
+<!-- Make sure the <html> tag is set to the .full CSS class. Change the background image in the full.css file. -->
+
+<head>
+
+    <meta charset="utf-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <meta name="author" content="Sungsit Sawaiwan" />
+
+    <title>Prompt Font</title>
+  
+    <!-- Latest compiled and minified CSS -->
+    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" integrity="sha512-dTfge/zgoMYpP7QbHy4gWMEGsbsdZeCXz7irItjcC3sPUFtf0kuFbDz/ixG7ArTxmDjLXDmezHubeNikyKGVyQ==" crossorigin="anonymous">
+
+    <!-- Fonts CSS -->
+    <link href="css/fonts.css" rel="stylesheet">
+
+    <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
+    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
+    <!--[if lt IE 9]>
+        <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
+        <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
+    <![endif]-->
+
+</head>
+
+<body>
+
+  <!-- Page Content -->
+  <div class="container">
+
+    <form class="select-form print-hide">
+      <select name="font-selector" id="font-selector" onchange="fontSelector()">
+        <option value="prompt-100">Prompt 100</option>
+        <option value="prompt-100i">Prompt 100i</option>
+        <option value="prompt-200">Prompt 200</option>
+        <option value="prompt-200i">Prompt 200i</option>
+        <option value="prompt-300">Prompt 300</option>
+        <option value="prompt-300">Prompt 300i</option>
+        <option value="prompt-400" selected>Prompt 400</option>
+        <option value="prompt-400i">Prompt 400i</option>
+        <option value="prompt-500">Prompt 500</option>
+        <option value="prompt-500i">Prompt 500i</option>
+        <option value="prompt-600">Prompt 600</option>
+        <option value="prompt-600i">Prompt 600i</option>
+        <option value="prompt-700">Prompt 700</option>
+        <option value="prompt-700i">Prompt 700i</option>
+        <option value="prompt-800">Prompt 800</option>
+        <option value="prompt-800i">Prompt 800i</option>
+        <option value="prompt-900">Prompt 900</option>
+        <option value="prompt-900i">Prompt 900i</option>
+      </select>
+    </form>
+
+    <h1>Prompt Font <br><small>OpenType Feature Test</small></h1>
+
+    <hr>
+
+    <p>Prompt is a Loopless Thai and Sans Latin typeface. This simple and geometric Latin was developed to work harmoniously with Loopless Thai that has wide proportion and airy negative space. It is suitable for any layout and communication usage.</p>
+    <p>Prompt in Thai also means ready.</p>
+    <p>The Prompt project is led by Cadson Demak, a type foundry in Thailand. To contribute, see <a href="//github.com/cadsondemak/prompt">github.com/cadsondemak/prompt</a></p>
+
+    <hr>
+
+    <section id="thai">
+      <h4>ภาษาไทย (Standard Thai)</h4>
+
+      <div class="test-text">
+        <p>ฝุ่นน้ำท้องฟ้า ทุ่งหญ้าป้ำเป๋อ ชนชั้นกระฎุมพี เป่าปี่กตัญญู</p>
+      </div>
+    </section>
+
+    <hr>
+
+    <section id="pal-san">
+      <h4>ภาษาบาลี/สันสกฤต (Pali/Sanskrit)</h4>
+
+      <div class="test-text">
+        <p lang="pi-Thai">ฐาตุํ ญาติํ อุปฺปฏฺฐานํ ปุํลิงฺคํ วาปิํ ปํสุํ วฏฺฏุํ</p>
+      </div>
+
+      <p><small>Descenderless of “ญ” &amp; “ฐ” are preferable forms when specify <code>lang=pi</code> or <code>lang=sa</code> in HTML elements.</small></p>
+
+      <pre class="html"><code>&lt;p lang=&quot;pi-Thai&quot;&gt;ฐาตุํ ญาติํ อุปฺปฏฺฐานํ ปุํลิงฺคํ วาปิํ ปํสุํ วฏฺฏุํ&lt;/p&gt;</code></pre>
+      <pre class="css"><code>body { font-feature-settings: &quot;locl&quot;; }</code></pre>
+    </section>
+
+    <hr>
+
+    <section id="minority-languages">
+      <h4>ภาษาชาติพันธุ์ (Minority languages)</h4>
+      <div class="test-text">
+        <p>ปะเฺติ็ลฺ โฺญฺ็จฺ ปั็วฮฺ ทฺ็อง เปฺิ็ว มูํย แต็่ง เจฺํอ<br>เปรฺิ่ห์ โจ๊่ เปฺี่ย โฺทร ม็่อง เติ็ง อาื ยาึ จือรฺุ การฺู</p>
+      </div>
+    </section>
+
+    <hr>
+
+    <section id="localized-forms">
+      <h4>Localized forms</h4>
+      <div class="test-text">
+        <p lang="ro">Gheorghe, obezul, a reuşit să obţină jucându-se un flux în Quebec de o mie kilowaţioră.</p>
+        <p lang="ca">COL&middot;LEGI cel&middot;la paral&middot;lelo col&middot;lecció</p>
+      </div>
+      <pre class="html"><code>&lt;p lang=&quot;ro&quot;&gt;Gheorghe, obezul, a reuşit să obţină jucându-se un flux în Quebec de o mie kilowaţioră.&lt;/p&gt;</code></pre>
+      <pre class="html"><code>&lt;p lang=&quot;ca&quot;&gt;COL·LEGI cel·la paral·lelo col·lecció&lt;/p&gt;</code></pre>
+    </section>
+
+    <hr>
+
+    <section id="ligatures">
+      <h4>ligatures</h4>
+      <div class="test-text">
+        <p>ฤๅษีมีข่าวฦๅ five flowers</p>
+      </div>
+      <pre class="css"><code>body { font-variant: common-ligatures; }</code></pre>
+    </section>
+
+    <hr>
+
+    <section id="fractions">
+      <h4>Fractions</h4>
+      <div class="test-text">
+        <p>1 ¼ 5 ½ 9 ¾ <span class="frac">1/3 2/3 1/8 3/8 5/8 7/8</span></p>
+        <p class="frac">12345/67890</p>
+      </div>
+      <pre class="html"><code>1&amp;thinsp;&amp;frac14; 5&amp;thinsp;&amp;frac12; 9&amp;thinsp;&amp;frac34; &lt;span class=&quot;frac&quot;&gt;1/3 2/3 1/8 3/8 5/8 7/8&lt;/span&gt;
+&lt;span class=&quot;frac&quot;&gt;12345/67890&lt;/span&gt;</code></pre>
+      <pre class="css"><code>.frac { font-feature-settings: &quot;frac&quot;; }</code></pre>
+    </section>
+
+    <hr>
+
+    <section id="sub-supe">
+      <h4>Subscripts &amp; Superscripts</h4>
+      <div class="test-text">
+        <p>H<sub>2</sub>O × 9.87<sup>654</sup> ≠ √π ÷ World<sup>3</sup>!</p>
+      </div>
+  
+      <pre class="html"><code>H&lt;sub&gt;2&lt;/sub&gt;O &amp;times; 9.87&lt;sup&gt;654&lt;/sup&gt; &amp;#x2260; &amp;radic;&amp;pi; &amp;divide; World&lt;sup&gt;3&lt;/sup&gt;!</code></pre>
+      <pre class="css"><code>sub { font-feature-settings: &quot;subs&quot;; }
+sup { font-feature-settings: &quot;sups&quot;; }</code></pre>
+    </section>
+
+    <hr>
+
+    <section id="ordinal">
+      <h4>Ordinal indicator</h4>
+      <div class="test-text">
+        <p class="ordn">9o 5a 7O 3A</p>
+      </div>
+  
+      <pre class="html"><code>&lt;p class=&quot;ordn&quot;&gt;9o 5a 7O 3A&lt;/p&gt;</code></pre>
+      <pre class="css"><code>.ordn { font-feature-settings: &quot;ordn&quot;; }</code></pre>
+    </section>
+
+    <hr>
+
+  </div>
+  <!-- /.container -->
+
+  <script src="js/font-selector.js"></script>
+  
+</body>
+
+</html>

diff --git a/js/font-selector.js b/js/font-selector.js
new file mode 100644 (file)
index 0000000..f5174a1
--- /dev/null
+++ b/js/font-selector.js
@@ -0,0 +1,8 @@
+// Font switcher
+function fontSelector(){
+  fontselector = document.getElementById('font-selector');
+  fontcanvas = document.getElementsByTagName('body')[0];
+  fontclass = fontselector.options[fontselector.selectedIndex].value;
+  fontcanvas.className = '';
+  fontcanvas.className = fontclass;
+}