From: Sungsit Sawaiwan Date: Sat, 7 Nov 2015 22:31:14 +0000 (+0700) Subject: Create feature test page with font selector X-Git-Url: http://git.ipfire.org/?a=commitdiff_plain;h=1e3616e89c820e13e047f2737a46be54a856abff;p=thirdparty%2Fprompt.git Create feature test page with font selector --- diff --git a/.gitignore b/.gitignore new file mode 100644 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 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 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 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 index 0000000..5d8b6ff --- /dev/null +++ b/features.html @@ -0,0 +1,168 @@ + + + + + + + + + + + + Prompt Font + + + + + + + + + + + + + + + + +
+ +
+ +
+ +

Prompt Font
OpenType Feature Test

+ +
+ +

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.

+

Prompt in Thai also means ready.

+

The Prompt project is led by Cadson Demak, a type foundry in Thailand. To contribute, see github.com/cadsondemak/prompt

+ +
+ +
+

ภาษาไทย (Standard Thai)

+ +
+

ฝุ่นน้ำท้องฟ้า ทุ่งหญ้าป้ำเป๋อ ชนชั้นกระฎุมพี เป่าปี่กตัญญู

+
+
+ +
+ +
+

ภาษาบาลี/สันสกฤต (Pali/Sanskrit)

+ +
+

ฐาตุํ ญาติํ อุปฺปฏฺฐานํ ปุํลิงฺคํ วาปิํ ปํสุํ วฏฺฏุํ

+
+ +

Descenderless of “ญ” & “ฐ” are preferable forms when specify lang=pi or lang=sa in HTML elements.

+ + 
<p lang="pi-Thai">ฐาตุํ ญาติํ อุปฺปฏฺฐานํ ปุํลิงฺคํ วาปิํ ปํสุํ วฏฺฏุํ</p>
+ 
body { font-feature-settings: "locl"; }
+
+ +
+ +
+

ภาษาชาติพันธุ์ (Minority languages)

+
+

ปะเฺติ็ลฺ โฺญฺ็จฺ ปั็วฮฺ ทฺ็อง เปฺิ็ว มูํย แต็่ง เจฺํอ
เปรฺิ่ห์ โจ๊่ เปฺี่ย โฺทร ม็่อง เติ็ง อาื ยาึ จือรฺุ การฺู

+
+
+ +
+ +
+

Localized forms

+
+

Gheorghe, obezul, a reuşit să obţină jucându-se un flux în Quebec de o mie kilowaţioră.

+

COL·LEGI cel·la paral·lelo col·lecció

+
+ 
<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·LEGI cel·la paral·lelo col·lecció</p>
+
+ +
+ +
+

ligatures

+
+

ฤๅษีมีข่าวฦๅ five flowers

+
+ 
body { font-variant: common-ligatures; }
+
+ +
+ +
+

Fractions

+
+

1 ¼ 5 ½ 9 ¾ 1/3 2/3 1/8 3/8 5/8 7/8

+

12345/67890

+
+ 
1&thinsp;&frac14; 5&thinsp;&frac12; 9&thinsp;&frac34; <span class="frac">1/3 2/3 1/8 3/8 5/8 7/8</span>
+<span class="frac">12345/67890</span>
+ 
.frac { font-feature-settings: "frac"; }
+
+ +
+ +
+

Subscripts & Superscripts

+
+

H2O × 9.87654 ≠ √π ÷ World3!

+
+ + 
H<sub>2</sub>O &times; 9.87<sup>654</sup> &#x2260; &radic;&pi; &divide; World<sup>3</sup>!
+ 
sub { font-feature-settings: "subs"; }
+sup { font-feature-settings: "sups"; }
+
+ +
+ +
+

Ordinal indicator

+
+

9o 5a 7O 3A

+
+ + 
<p class="ordn">9o 5a 7O 3A</p>
+ 
.ordn { font-feature-settings: "ordn"; }
+
+ +
+ +
+ + + + + + + diff --git a/js/font-selector.js b/js/font-selector.js new file mode 100644 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; +}