File: Padauk-webfont-example.html

package info (click to toggle)
fonts-sil-padauk 5.000-3
  • links: PTS, VCS
  • area: main
  • in suites: bookworm, sid, trixie
  • size: 3,504 kB
  • sloc: makefile: 6; sh: 1
file content (99 lines) | stat: -rw-r--r-- 7,431 bytes parent folder | download
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
<!doctype html>
<!--
Padauk-webfont-example.html
Padauk font family

This file is part of Padauk font family (http://software.sil.org/padauk)
and is Copyright (c) 2021 SIL International (http://www.sil.org/),
with Reserved Font Names "Padauk", "Namkio" and "Deemawso". This Font Software is 
licensed under the SIL Open Font License, Version 1.1. You should have received a 
copy of the license along with this Font Software. If this is not the case, go to
(http://scripts.sil.org/OFL) for all the details including a FAQ.
-->
<head>
	<link rel="stylesheet" href="Padauk-webfont-example.css" type="text/css">
	<meta charset="utf-8">
	<meta name="description" content="An example of using Padauk on your web page via WOFF">
	<meta name="author" content="SIL International: software.sil.org/wstech">

</head>
<body>
<div style="font-size: 125%;">
	
<h1>Using Padauk webfonts</h1>

<p>The page demonstrates how to use the WOFF2 version of Padauk for web pages, using local copies of the .woff2 files in this archive. For more information on this technique - and how to use the normal TrueType version as a web font - see <a href="http://scripts.sil.org/using_web_fonts">Using SIL Fonts on Web Pages</a>.</p>

<p>The body of this document is styled using an external stylesheet, with Padauk set as the default font, and loaded directly as a WOFF2 file using the @font-face rule. If you're seeing a sans-serif font here and the Padauk typeface in the next paragraph, then it is working. Otherwise the text will be in a serif font or your browser default. This technique should work in Firefox, Chrome, Safari and Edge.</p>

<p>Myanmar sample text (taken from <a href="http://www.unicode.org/udhr/d/udhr_mya.txt">Universal Declaration of Human Rights - Burmese</a>): </p>
<p> ၁၉၄၈ ခုနှစ်၊ဒီဇင်ဘာလ ၁၀ ရက်နေ့တွင် ကမ္ဘာ့ကုလသမဂ္ဂအဖွဲ့ညီလာခံ အစည်းအဝေးကြီးက လူ့အခွင့်အရေး ကြေညာစာတမ်းကြီးကို အတည်ပြု၍ ကြေညာလိုက်ရာထိုကြေညာစာတမ်းကြီး၏ စာသားသည်နောက်စာမျက်နှာ များတွင် အပြည့်အစုံပါရှိသည်။ ဤကဲ့သို့ရာဇဝင်တင်မည့် ကြေညာချက်ကို ပြုလုပ်ပြီးနောက် ဤညီလာခံအစည်းအဝေးကြီးက ကမ္ဘာ့ကုလသမဂ္ဂအဖွဲ့ဝင် နိုင်ငံ အားလုံးအား ထိုကြေညာစာတမ်းကြီး၏ စာသားကိုအများပြည်သူတို့ ကြားသိစေရန် ကြေညာပါမည့် အကြောင်းကိုလည်းကောင်း၊ ထို့ပြင်နိုင်ငံများ၊ သို့တည်းမဟုတ် နယ်မြေများ၏ နိုင်ငံရေး အဆင့်အတန်းကို လိုက်၍ ခွဲခြားခြင်း မပြုဘဲအဓိကအားဖြင့် စာသင်ကျောင်းများနှင့် အခြားပညာရေး အဖွဲ့အစည်းများတွင် ထိုကြေညာစာတမ်းကြီးကို ဖြန့်ချိ ဝေငှ စေရန်၊ မြင်သာအောင် ပြသထားစေရန်၊ဖတ်ကြားစေရန်နှင့် အဓိပ္ပါယ်ရှင်းလင်း ဖော်ပြစေရန် ဆောင်ရွက်ပါမည့် အကြောင်းဖြင့် လည်းကောင်း ဆင့်ဆို လိုက်သည်။ </p>


<h2>Padauk user-selectable features</h2>

<p>The Padauk font includes a number of optional features that provide alternative rendering that might be preferable for use in some contexts. The examples below show the results of applying these features. Whether these features are available to users will depend on both the application and the rendering technology (<a href="https://scripts.sil.org/cms/scripts/page.php?site_id=projects&item_id=graphite_apps">Graphite</a> or OpenType) being used. Graphite features are available in Firefox. The OpenType features are used in other browsers. Further documentation of these feature is available in the documentation folder of the font download.</p>

<p>To see specifically how these techniques are specified in the CSS and HTML, view the source to this page and the accompanying CSS file.</p>

<p><b>Character Variant 1 (Filled dots)</b><br>
No filled dots - feature cv01=0<br> 
ံ း ႇ ႈ ႉ ႊ ႚ ႛ ꩻ<br>
Filled dots - feature cv01=1<br> 
<span class="cv01"> ံ း ႇ ႈ ႉ ႊ ႚ ႛ ꩻ </span></p>

<p><b>Character Variant 2 (Tear drop style washwe)</b><br>
Round style washwe - feature cv02=0<br> 
တွ ျွ ြွ ွှ<br>
Tear drop style washwe - feature cv02=1<br> 
<span class="cv02"> တွ ျွ ြွ ွှ </span></p>

<p><b>Character Variant 3 (Asho Chin variants)</b><br>
No variant - feature cv03=0<br> 
ကၭ <br>
Asho Chin variant - feature cv03=1<br> 
<span class="cv03"> ကၭ </span></p>

<p><b>Character Variant 4 (Thai Mon variants)</b><br>
No variants - feature cv04=0<br> 
ဃ ဋ ဌ ဍ ဎ ဒ န သ ဠ အ ဣ ဿ ၉ ၊ ။ ၚ်္ <br>
Thai Mon variants - feature cv04=1<br> 
<span class="cv04"> ဃ ဋ ဌ ဍ ဎ ဒ န သ ဠ အ ဣ ဿ ၉ ၊ ။ ၚ်္ </span></p>

<p><b>Character Variant 5 (Aiton Phake special characters over Khamti)</b><br>
No variants - feature cv05=0<br> 
က︀ ၵ︀ ꩡ︀ ၺ တ︀ ꩫ︀ ၸ︀ ယ︀ ꩺ လ︀ ꩭ ဢ︀ ြ <br>
Aiton Phake special characters over Khamti - feature cv05=1<br> 
<span class="cv05"> က︀ ၵ︀ ꩡ︀ ၺ တ︀ ꩫ︀ ၸ︀ ယ︀ ꩺ လ︀ ꩭ ဢ︀ ြ </span></p>

<p><b>Character Variant 6 (Khamti variant)</b><br>
No variants - feature cv06=0<br> 
က︀ႆ က︀ႆႈꩰ <br>
Khamti variant U+1086 - feature cv06=1<br> 
<span class="cv06"> က︀ႆ က︀ႆႈꩰ </span></p>

<p><b>Character Variant 7 (Slanted hato)</b><br>
Upright - feature cv07=0<br> 
ှ ှု ှူ ၡ ၦ <br>
Sgaw style slanted leg with horizontal foot - feature cv07=1<br> 
<span class="cv071"> ှ ှု ှူ ၡ ၦ </span><br>
Slanted leg with right angled foot - feature cv07=2<br> 
<span class="cv072"> ှ ှု ှူ ၡ ၦ </span></p>

<p><b>Sgaw Karen language features</b><br>
Padauk with no special features.<br> 
ၡူး ၦ့ၤချ့ ခှ ကွ့ </p>

<p>Tone mark shifts left when language is set to "ksw".<br>
<span lang="ksw"> ၡူး ၦ့ၤချ့ ခှ ကွ့   </span></p>

<p>Language "ksw" with teardrop style washwe (feature cv02=1) and slanted hato (feature cv07=1)<br>
<span lang="ksw" class="cv02_071"> ၡူး ၦ့ၤချ့ ခှ ကွ့  </span></p>

<p><b>Rendering technology test</b><br>
Padauk has special code to show which rendering technology is being used right now in your browser, displaying it in green: <span style="color:green;"> RenderingUnknown.</span></p>

<p style="font-size: 75%;"> &copy 2021, SIL Interational </p>
	
</body>
</html>