-
Notifications
You must be signed in to change notification settings - Fork 13
/
features.html
169 lines (129 loc) · 7.26 KB
/
features.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
<!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-300i">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>
<p>ฝุ่น<span style="color:red;">น้ำ</span>ท้องฟ้า ทุ่งหญ้า<span style="color:red;">ป้ำ</span>เป๋อ ชนชั้นกระฎุมพี เป่าปี่กตัญญู ดูนาฬิกา<span style="color:red;">ซ้ำ</span>ซ้อน</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 “ญ” & “ฐ” are preferable forms when specify <code>lang=pi</code> or <code>lang=sa</code> in HTML elements.</small></p>
<pre class="html"><code><p lang="pi-Thai">ฐาตุํ ญาติํ อุปฺปฏฺฐานํ ปุํลิงฺคํ วาปิํ ปํสุํ วฏฺฏุํ</p></code></pre>
<pre class="css"><code>body { font-feature-settings: "locl"; }</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·LEGI cel·la paral·lelo col·lecció</p>
</div>
<pre class="html"><code><p lang="ro">Gheorghe, obezul, a reuşit să obţină jucându-se un flux în Quebec de o mie kilowaţioră.</p></code></pre>
<pre class="html"><code><p lang="ca">COL·LEGI cel·la paral·lelo col·lecció</p></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&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></code></pre>
<pre class="css"><code>.frac { font-feature-settings: "frac"; }</code></pre>
</section>
<hr>
<section id="sub-supe">
<h4>Subscripts & 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<sub>2</sub>O &times; 9.87<sup>654</sup> &#x2260; &radic;&pi; &divide; World<sup>3</sup>!</code></pre>
<pre class="css"><code>sub { font-feature-settings: "subs"; }
sup { font-feature-settings: "sups"; }</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><p class="ordn">9o 5a 7O 3A</p></code></pre>
<pre class="css"><code>.ordn { font-feature-settings: "ordn"; }</code></pre>
</section>
<hr>
</div>
<!-- /.container -->
<script src="js/font-selector.js"></script>
</body>
</html>