-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
137 lines (135 loc) · 10.1 KB
/
index.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
<!DOCTYPE html>
<html>
<head>
<title>elianscript demo page</title>
<style type="text/css">
@font-face {
font-family: ElianWideCapsLight;
src: url('./ElianWideCapitalsLight.woff'),
url('./ElianWideCapitalsLight.otf'),
url('./ElianWideCapitalsLight.ttf')
;
font-weight: normal;
}
.ewcl {
font-family: ElianWideCapsLight, sans-serif;
}
</style>
<link rel="stylesheet" href="style.css"></link>
<link rel="stylesheet" href="tachyons.min.css"/>
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no, minimal-ui">
</head>
<body class="sans-serif">
<section class="cf">
<div class="fl w-50 tl pa1">
<h1 class="tc">Latin</h1>
<div class="tc"><div class="elian-grid f3 pa1 ba b--black"><span>A</span><span>B</span><span>C</span><span>D</span><span>E</span><span>F</span><span>G</span><span>H</span><span>I</span></div><div class="elian-grid f3 pa1 ba b--black"><span>J</span><span>K</span><span>L</span><span>M</span><span>N</span><span>O</span><span>P</span><span>Q</span><span>R</span></div><div class="elian-grid f3 pa1 ba b--black"><span>S</span><span>T</span><span>U</span><span>V</span><span>W</span><span>X</span><span>Y</span><span>Z</span></div></div>
<div class="tc"><div class="elian-grid f3 pa1 ba b--black"><span>a</span><span>b</span><span>c</span><span>d</span><span>e</span><span>f</span><span>g</span><span>h</span><span>i</span></div><div class="elian-grid f3 pa1 ba b--black"><span>j</span><span>k</span><span>l</span><span>m</span><span>n</span><span>o</span><span>p</span><span>q</span><span>r</span></div><div class="elian-grid f3 pa1 ba b--black"><span>s</span><span>t</span><span>u</span><span>v</span><span>w</span><span>x</span><span>y</span><span>z</span></div></div>
</div>
<div class="fl w-50 ewcl tl pa1 bl b--silver">
<h1 class="tc">Elian</h1>
<div class="tc"><div class="elian-grid f3 pa1 ba b--black"><span>A</span><span>B</span><span>C</span><span>D</span><span>E</span><span>F</span><span>G</span><span>H</span><span>I</span></div><div class="elian-grid f3 pa1 ba b--black"><span>J</span><span>K</span><span>L</span><span>M</span><span>N</span><span>O</span><span>P</span><span>Q</span><span>R</span></div><div class="elian-grid f3 pa1 ba b--black"><span>S</span><span>T</span><span>U</span><span>V</span><span>W</span><span>X</span><span>Y</span><span>Z</span></div></div>
<div class="tc"><div class="elian-grid f3 pa1 ba b--black"><span>a</span><span>b</span><span>c</span><span>d</span><span>e</span><span>f</span><span>g</span><span>h</span><span>i</span></div><div class="elian-grid f3 pa1 ba b--black"><span>j</span><span>k</span><span>l</span><span>m</span><span>n</span><span>o</span><span>p</span><span>q</span><span>r</span></div><div class="elian-grid f3 pa1 ba b--black"><span>s</span><span>t</span><span>u</span><span>v</span><span>w</span><span>x</span><span>y</span><span>z</span></div></div>
</div>
</section>
<section class="cf">
<div class="fl w-50 tl pa1">
<p>Text on this page using glyphs from <a href="http://www.ccelian.com/ElianScriptFull.html">the Elian script</a> is formatted using Elian Wide Capitals Light, a free-as-in-speech and free-as-in-beer font available under the terms of the <a href="https://en.wikipedia.org/wiki/SIL_Open_Font_License">SIL Open Font License</a>. For the purposes of that license, "Elian Wide Capitals Light" is not a reserved name.</p>
</div>
<div class="fl w-50 ewcl tl pa1 bl b--silver">
<p>Text on this page using glyphs from <a href="http://www.ccelian.com/ElianScriptFull.html">the Elian script</a> is formatted using Elian Wide Capitals Light, a free-as-in-speech and free-as-in-beer font available under the terms of the <a href="https://en.wikipedia.org/wiki/SIL_Open_Font_License">SIL Open Font License</a>. For the purposes of that license, "Elian Wide Capitals Light" is not a reserved name.</p>
</div>
</section>
<section class="cf">
<div class="fl w-100 tl pa1 bt bb b--black">
<p class="flex items-center justify-center-s">
<a class="f5 ma1 no-underline black bg-animate hover-bg-green hover-white items-center pa2 ba b--green border-box" href="./Elian_Wide_Capitals_Light/ElianWideCapitalsLight.woff">Download .woff</a>
<a class="f5 ma1 no-underline black bg-animate hover-bg-black hover-white items-center pa2 ba ba-black border-box" href="./Elian_Wide_Capitals_Light/ElianWideCapitalsLight.ttf">.ttf</a>
<a class="f5 ma1 no-underline black bg-animate hover-bg-black hover-white items-center pa2 ba ba-black border-box" href="./Elian_Wide_Capitals_Light/ElianWideCapitalsLight.otf">.otf</a>
</p>
<p class="mw6">
To use this font, first download these font files and save them to your server. Then use a <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face"><code>@font-face</code></a> declaration in your CSS to load the files from your server. <a href="https://caniuse.com/#search=woff">Modern browsers support WOFF</a>, so you ought not need the TTF or OTF files, but they may be desired for other purposes.
</p>
<pre class="pre"><code>
<style type="text/css">
@font-face {
font-family: ElianWideCapsLight;
src: url('./ElianWideCapitalsLight.woff'),
url('./ElianWideCapitalsLight.otf'),
url('./ElianWideCapitalsLight.ttf')
;
font-weight: normal;
}
.ewcl {
font-family: ElianWideCapsLight, sans-serif;
}
</style>
</code></pre>
<p class="mw6">This font can also be used on computers that support TrueType fonts.</p>
<p class="mw6">This font ("Elian Wide Capitals Light EWCL_1") is available under the terms of the SIL Open Font License; for more information see <a href="https://github.com/benlk/elian-wide-capitals-light">the font's Github repository</a>. Contributions and suggestions are welcome; please see <a href="https://github.com/benlk/elian-wide-capitals-light/blob/master/CONTRIBUTING.md">the contributing guide</a> for more information.</p>
</div>
</section>
<section class="cf">
<div class="fl w-50 tl pa1">
<p>
Elian Wide Capitals Light is designed with the following ideas in mind:
</p>
<dl>
<dt>Horizontal capitals</dt>
<dd>The 'long' segment of second- and third-cycle characters is aligned horizontally. In the case of characters with boxes, this is done by expanding the box.</dd>
<dt>Vertical lowercase letters</dt>
<dd>With the exceptions of the lowercase k, q, r, t, and z, where possible lowercase letters have been designed to use the 'long' segment of second- and third-cycle characters is aligned vertically.</dd>
<dt>Pure geometric design</dt>
<dd>Snap-to-grid, no serifs.</dd>
<dt></dt>
<dd></dd>
</dl>
<p>Because of the fineness of its lines, you should limit its use to high-contrast cases. In WCAG accessibility terms, <a href="https://www.w3.org/WAI/WCAG20/quickref/#visual-audio-contrast7">the contrast level should be AAA</a> at minimum.</p>
</div>
<div class="fl w-50 ewcl tl pa1 bl b--silver">
<p>
Elian Wide Capitals Light is designed with the following ideas in mind:
</p>
<dl>
<dt>Horizontal capitals</dt>
<dd>The 'long' segment of second- and third-cycle characters is aligned horizontally. In the case of characters with boxes, this is done by expanding the box.</dd>
<dt>Vertical lowercase letters</dt>
<dd>With the exceptions of the lowercase k, q, r, t, and z, where possible lowercase letters have been designed to use the 'long' segment of second- and third-cycle characters is aligned vertically.</dd>
<dt>Pure geometric design</dt>
<dd>Snap-to-grid, no serifs.</dd>
<dt></dt>
<dd></dd>
</dl>
<p>Because of the fineness of its lines, you should limit its use to high-contrast cases. In WCAG accessibility terms, <a href="https://www.w3.org/WAI/WCAG20/quickref/#visual-audio-contrast7">the contrast level should be AAA</a> at minimum.</p>
</div>
</section>
<section class="cf">
<div class="fl w-50 tl pa1">
<h3>Dingus</h3>
<p>Use this text box to see how different characters appear in the font.</p>
<script type="text/javascript">
function sync() {
var from = document.getElementById('from');
var to = document.getElementById('to');
to.innerHTML = from.innerHTML;
}
</script>
<div id="from" oninput="sync()" class="pa1 w-100 db b--black ba" contenteditable>Enter text here to see things happen. (Requires Javascript)</div>
</div>
<div class="fl w-50 ewcl tl pa1 bl b--silver">
<h3>Dingus</h3>
<p>This text box displays characters entered in the other text box.</p>
<div id="to" class="pa1 w-100 db ewcl b--black ba" disabled>Enter text to the left to see things happen here. (Requires JavaScript)</div>
</div>
</section>
<section class="cf">
<!-- What, you thought I was going to duplicate this left/right by hand? No, I elected to make the text duplicate itself with clever CSS that probably isn't very accessible. -->
<h3 class="fl w-100 tl pa1 duplicate-right" content="Sample Text"></h3>
<p class="fl w-100 tl pa1 duplicate-right" content="Velit ut labore ipsa sed fuga vel autem doloribus. Recusandae quia omnis earum dignissimos. Iure pariatur qui consequatur reprehenderit eos dolorem harum maxime. Qui nulla non sunt quia recusandae eaque. Qui tenetur quaerat illum voluptatem et."></p>
<p class="fl w-100 tl pa1 duplicate-right" content="Asperiores nam saepe et architecto excepturi dicta eaque reiciendis. Inventore eos veritatis ut aliquid quae earum soluta iste. Tempore dicta illo libero eum eos et illo. Sequi eum qui dolore qui voluptas voluptatibus tenetur. Accusamus deserunt eum accusantium aliquam id ipsum minus consequuntur."></p>
<p class="fl w-100 tl pa1 duplicate-right" content="Perspiciatis quibusdam et voluptas non cum consequatur velit. Aut quos rerum aspernatur dolorem architecto aperiam est. Totam sit veritatis asperiores."></p>
<p class="b fl w-100 tl pa1 duplicate-right" content="This paragraph is bolded. Elian Wide Capsitals Light does not come with built-in italic glyphs; your browser is generating them by itself."></p>
<p class="i fl w-100 tl pa1 duplicate-right" content="This paragraph is italicized. Elian Wide Capitals Light does not come with built-in italic glyphs; your browser is generating them by itself."></p>
</section>
</body>
</html>