-
Notifications
You must be signed in to change notification settings - Fork 2
/
inkling.html
executable file
·262 lines (224 loc) · 9.51 KB
/
inkling.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
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
<html>
<head>
<title> Inkling (Splatoon) font by eli </title>
<style type="text/css">
html {
background-color: #f5f5f5;
color: #373d49;
text-align: left;
font-family: Georgia, Cambria, serif;
font-size: 11pt;
}
body {
position: relative;
background-color:#fff;
width: 750px;
margin: 0 auto;
padding: 15px;
z-index:1;
}
h1, h2, h3, h4, a {
font-family: "Source Sans Pro", "Helvetica Neue", Helvetica, Arial, sans-serif;
display: inline;
}
h4 {
margin-top: -25px;
margin-left: 10px;
color: #f38834;
}
p {
margin: 15px 0;
}
blockquote {
margin-left: 25px;
border-left: 1px #999 solid;
padding-left: 15px;
}
.small {
height: 0px;
overflow:hidden;
}
.big {
height: auto;
}
a {
color: #aadc00;
text-decoration: none;
}
a:hover {
color: #acacac;
border-bottom: 1px #aadc00 solid;
}
a.name {
color: #f38834;
text-decoration: underline;
border-bottom: none;
}
a.name:hover {
color: #cf7229;
}
tt {
color: #000;
}
b i {
font-style: normal;
color: #001947;
}
.black {
background-color: #333;
color: #fff;
margin: 0 -15px;
padding: 0 15px;
width:100%;
}
.teal {
background-color: #0fc3b8;
color: #fff;
margin: 0 -15px;
padding: 0 15px;
width:100%;
}
.download {
text-align: right;
margin-right: 15px;
margin-top: -5px;
z-index: 4;
}
.download a {
color: #f38834; /* orange ink color! */
}
.download a:hover {
border-bottom: none;
color: #0fc3b8;
}
.terms {
color: #00433f;
font-weight: bold;
font-family: "Gill Sans", Helvetica, Arial, sans-serif;
position: absolute;
left: 31px;
bottom: 18px;
}
</style>
<script type="text/javascript" src="//code.jquery.com/jquery-1.11.3.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('.wrapper').find('a[href="#"]').on('click', function (e) {
e.preventDefault();
this.expand = !this.expand;
$(this).text(this.expand?"Collapse":"Expand");
$(this).closest('.wrapper').find('.small, .big').toggleClass('small big');
});
});
</script>
</head>
<body>
<h1>INKLING </h1><h2 style="color:#0fc3b8;">VERSION 2.0</h2><br>
<h4>by <a class="name" href="https://twitter.com/frozenpandaman">@frozenpandaman</a></h4>
<div style="position:absolute; right:50px; top:25px;">
<img src="inkling.png">
</div>
<span style="display:none;">スプラトゥーン フォント インクイング</span>
<br><br>
<div class="teal" style="padding: 7px 15px; line-height: 1.4em; text-align: center;">
<b>— UPDATE —</b>
<br>
Download the official <i>Splatoon</i> and <i>Splatoon 2</i> fonts ripped from the SplatNet 2 app here:
<br>
<a style="color:#fff;" href="Splatoon1.otf">Splatoon1.otf</a> | <a style="color:#fff;" href="Splatoon2.otf">Splatoon2.otf</a>
</div>
<p><i>Inkling</i>, a font created from characters that appear in the game <i>Splatoon</i>—seen on Sunken Scrolls, in Octo Valley, written on in-game gear, etc.</p>
<div style="text-align:center; margin:-10px 0;"><img src="preview.png"><br>
<h4 style="color:#0fc3b8;">DOWNLOAD BELOW!</h4></div>
<p><b>17</b> distinct alphabetical glyphs (excluding rotations/mirrored versions) of this writing system have been seen in-game so far. I've vectorized and mapped each character to its closest English (Latin alphabet) equivalent, when possible, so typing English words in this font will lead to somewhat readable text. Unfortunately, Inkling is essentially gibberish—in-game Inkling text cannot be translated and in most cases has no meaning (i.e. the choice of which glyph goes to which character in this font was completely arbitrary, but made to expedite being able to type the characters you want).<br><br>
By no means does this font provide all the non-English characters seen in-game, as multiple writing systems exist; the characters in this font are those that are the most predominant and widely used.<br></p>
<p style="margin-top: -25px;">
<div class="black" style="padding: 5px 15px;"><b>IMPORTANT NOTE</b> about how this non-standard font works and how to type the 100+ (!) different characters:</div><br>
As seen on in-game materials, many glyphs have rotations and mirrored versions of them. I've included these characters in the font via uppercase letters and <b>ligatures</b> (make sure you don't have them disabled!)<br><br>
The base glyph can be achieved by simply typing the letter in lowercase, e.g. <tt>a</tt><br>
Vertical flips can be achieved by typing the letter in uppercase, e.g. <tt>A</tt><br>
Horizontal flips can be achieved by typing the letter twice, e.g. <tt>aa</tt><br>
180-degree rotations (vertical + horizontal flip) can be achieved by using both of these methods, e.g. <tt>AA</tt><br><br>
The <b>comma</b> character acts as a delimiter of sorts, and should be used when typing a repeated character. <tt>aa</tt> would produce a horizontally flipped version of the base character, while <tt>a,a</tt> would type the base character twice. The comma-delimiter character has zero width.<br><br>
Some symmetrical characters have no need for certain mirrors (e.g. 'E' and vertically-flipped 'E' are identitcal). Typing these characters twice will simply result in two of the glyph—the comma delimiter does not have to be used here. This applies to the following characters: <tt>entEINT</tt>
</p>
<div class="black" style="height: 4px;"></div>
<p>
<b><i>Available characters:</i></b>
<blockquote>Alphanumeric: <tt>abcdefghiíjklmnoópqrstuvwxyzABCDEFGHIJKLMNOÓPQRSTUVWXYZ0123456789</tt>
<br><br>
Punctuation: <tt>-. !?¡¿/'"</tt>
<br><br>
Other: <tt>@#$%^&*[]{}\|=+_<>;©®</tt>
</blockquote>
</p>
<p style="margin-top: -25px;">
<div class="teal" style="padding: 5px 15px;"><b>Version 2.0 changelog:</b></div>
<ul>
<li>Added all missing letters and numbers, borrowing from Project Paintball (traced in-game font)</li>
<li>Added <tt>'</tt> and <tt>"</tt> characters</li>
<li>Fixed <tt>y</tt> and <tt>c</tt> glyphs, which sometimes appeared broken in a certain orientation</li>
</ul></p>
<div class="teal" style="height: 4px;"></div>
<p><b><i>Special characters</i></b> worth noting:
<blockquote>
The double-i character can be achieved by typing <tt>i</tt> twice (provided ligature) or <tt>í</tt>
<br><br>
The sans-bar 'o' character is mapped to <tt>ó</tt>; its vertically-flipped counterpart is mapped to <tt>Ó</tt>
</blockquote>
</p>
<div style="margin-left:15px">Letters listed under "Other" in the list of available characters above will not produce their designated character, but rather one of the various symbols from in-game such as brands and other logos. Image-based characters are listed below:</div>
<blockquote>
<div class="wrapper">
<div class="small">
The main brands in alphabetical order are mapped to the keys <tt>@#$%^&*[]{}\|</tt>.
<br><br>
The dolphin logo is mapped to <tt>=</tt>.
<br><br>
The tentacle logo is mapped to <tt>+</tt>.
<br><br>
The Squid Systers logo is mapped to <tt>_</tt>.
<br><br>
The White Tee (いか t-shirt) logo is mapped to <tt><</tt>.
<br><br>
The White Anchor Tee logo is mapped to <tt>></tt>.
<br><br>
The Splatfest logo is mapped to <tt>;</tt>.
<br><br>
The ヒ "copyright" symbol appearing in many logos is mapped to <tt>©</tt>.
<br><br>
The wakaba logo found on the back of the Basic Tee is mapped to <tt>®</tt>.
</div> <a href="#">Expand</a> </div>
</blockquote>
</p>
<p style="padding-top:10px;"><i>Notes:</i>
<ul>
<li>When installing the font via Font Book on macOS, a warning may appear that the 'name' table structure is incorrect. You may safely ignore this.</li>
</ul></p>
<p style="padding-top:10px;"><i>Acknowledgements:</i>
<ul>
<li>The folks at SquidBoards in <a href="https://squidboards.com/threads/inkling-the-language-of-splatoon.195/">this thread</a>, for helping figure out if the language was decipherable and discussing the language in-depth.</li>
<li><a href="http://vectorfriend.imgur.com/">Vectorfriend</a> from /ink/, many of whose vectorized brand logos can be found in this font.</li>
<li>JapanYoshi, for providing a few glyphs from Project Paintball (linked below) for use in this font.</li>
</ul></p>
<p style="padding-top:10px;"><i>Related font projects:</i>
<ul>
<li>The official versions of the in-game fonts are available for download – see the note at the top of the page!</li>
<li>JapanYoshi's Project Paintball font (Latin characters), available <a href="http://fizzystack.web.fc2.com/paintball.html">here</a>.</li>
<li>Aramugi's イカモドキ (Ikamodoki) font (Japanese characters), previously available <a href="https://aramugi.com/?page_id=807">here</a>.</li>
</ul></p>
<div style="text-align:center; font-family:Inkling;"><h3>THIS FONT MAY NOT BE USED FOR COMMERCIAL PURPOSES.<br>PLEASE GIVE CREDIT IF USED.</h3></div><br>
<div style="font-family:Inkling; padding-bottom:2px; color:#333;">This text should be in Inkling if you have the font installed!</div>
Please direct any questions to eli (frozenpandaman). Feel free to shoot me a message via <a href="https://twitter.com/frozenpandaman">Twitter</a>, <a href="https://www.reddit.com/user/frozenpandaman">Reddit</a>, or <a href="mailto:[email protected]">email</a>.
<br>質問があれば、<a href="https://twitter.com/frozenpandaman">ツイッター</a>で連絡してください。日本語OK。
<br><i>I'd like to see anything you make with this font!</i><br><br><br>
<div class="download"><h1><a href="Inkling_v2.otf">DOWNLOAD</a></h1></div>
<div style="position:absolute; right:31px; bottom:23px; z-index:-1; text-decoration:none;">
<img src="download.png">
<br><a style="font-size:8pt;">ダウンロード</a>
</div>
<div class="terms">
By clicking the download link,<br>you agree to the terms (bold, caps) above.
</div>
</body>
</html>