-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
200 lines (159 loc) · 9.48 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
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
<!DOCTYPE html>
<html lang="en-AU" id="colour-target" class="dark-mode">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta charset="UTF-8">
<!-- Website information -->
<title>Gloss My Gloss</title>
<meta name="description" content="Neonnaut's website where he keeps his stuff.">
<meta name="description" content="A tool designed for formatting linguistic interlinear gloss">
<meta name="keywords" content="linguistic gloss,interlinear gloss,conlang">
<!-- Scripts and stylings -->
<link href="style.css" rel="stylesheet" type="text/css" media="all">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script src="script/theme-picker.js"></script>
<script src="script/glossmygloss.js"></script>
<!-- Fonts -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<!-- Icons -->
<link rel="apple-touch-icon" sizes="180x180" href="img/apple-touch-icon.png" />
<link rel="icon" type="image/png" sizes="32x32" href="img/favicon-32x32.png" />
<link rel="icon" type="image/png" sizes="16x16" href="img/favicon-16x16.png" />
</head>
<body>
<nav id="myNav">
<ol class="breadcrumbs">
<li>
<a href="https://neonnaut.neocities.org/"><img alt="neocities favicon" src="./img/neonnaut.png"></a>
</li>
</ol>
</nav>
<div id="content">
<section id="top">
<h1>Linguistic Gloss Generator</h1>
<textarea rows="5" id="input" name="input" spellcheck="false" placeholder='Astra inclinant, sed non obligant.
[astra inkliːnant sed non obligant]
star.ACC.PL incline.PRS.PTCP but NEG bind.3P.PRS.ACT.IND
"The stars incline us, they do not bind us."'></textarea>
<div id="GMGSwitch-field" class="switch-field">
<input type="submit" id="plainText" value="Plain text" name="markupButton">
<input type="submit" id="htmlTable" value="HTML table" name="markupButton">
<input type="submit" id="interlinear" value="HTML div" name="markupButton">
<input type="submit" id="latexGloss" value="Latex" name="markupButton">
<input type="submit" id="zbbGloss" value="ZBB" name="markupButton">
<input type="submit" id="cwsGloss" value="CWS" name="markupButton">
<input type="submit" id="wikiTable" value="Wiki" name="markupButton">
<input type="submit" id="redditTable" value="Reddit" name="markupButton">
</div>
<div id="GMGResult"></div>
<hr>
<fieldset id="bottom-content">
<legend>Options</legend>
<input type="checkbox" id="useAbbrv" name="useAbbrv" checked>
<label for="useAbbrv">Use abbreviations</label><br>
<input type="checkbox" id="useInputAbbrv" name="useInputAbbrv" checked>
<label for="useInputAbbrv">Use in-built abbreviations</label><br>
<input type="checkbox" id="useSmallCaps" name="useSmallCaps">
<label for="useSmallCaps">Use small caps on gloss line</label><br>
<input type="checkbox" id="useAcknowledgement" name="useAcknowledgement">
<label for="useAcknowledgement">Append an acknowledgement of this tool when using HTML options</label><br><br>
<label for="notInterlinear">Single column lines, comma delimited</label>
<input id="notInterlinear" name="notInterlinear" spellcheck="false"><br><br>
<label for="abbrvInput">Glossing abbreviations, comma and line delimited</label><br>
<textarea id="abbrvInput" name="abbrvInput" spellcheck="false">
ACT,actor voice
YABRV,your abbreviation
</textarea><br><br>
<label for="abbrvDelimiterInput">Glossing seperators, comma delimited</label>
<input id="abbrvDelimiterInput" name="abbrvDelimiterInput" value=".,-,=,›,:" spellcheck="false">
</fieldset>
</section>
<section>
<p>GlossMyGloss Copyright (c) 2021 - 2023 'Neonnaut', MIT License</p>
<p>Linguistic Gloss Generator, "GlossMyGloss" also lives on my website <a href=https://neonnaut.neocities.org/glossmygloss>neonnaut.neocities.org/glossmygloss</a></p>
<h2>Instructions</h2>
<p>This tool will format linguistic interlinear gloss into ordered columns, and also generate hover text for linguistic abbreviations.</p>
<p>If you discover any bugs or issues, please go to <a href="https://github.com/Neonnaut/Neonnaut.github.io">Neonnaut.github.io</a> and create a new issue.</p>
<p>Refer to the following information on interlinear gloss is and it's purpose:</p>
<a href="https://www.eva.mpg.de/lingua/resources/glossing-rules.php">Lingua Glossing Rules</a>
<a href="https://www.eva.mpg.de/lingua/pdf/Glossing-Rules.pdf">Lingua Glossing Rules 2</a>
<h3>Setting Up The Input</h3>
<p>Be sure to provide at least three lines in the input, with your gloss on the second last line and your translation on the last line. (The ZBB option can work with just two). In this case your input would look like this:</p>
<pre class="example">
Astra inclinant, sed non obligant.
star.ACC.PL incline.PRS.PTCP but NEG bind.3P.PRS.ACT.IND
"The stars incline us, they do not bind us."</pre>
<p>Any additional lines must go above the gloss line. Any of these additional lines may be marked with the "Non alignable lines" setting. For example, if we had the following input and wanted to keep the first two lines unaligned just like the last line:</p>
太陽が東の空に昇る<br>
taiyō ga higashi no sora ni noboru
/taijoː ŋa çiŋaɕi no soɾa nʲi noboɾɯᵝ/
sun SUBJECT east POSSESSIVE sky LOCATIVE rise
"The sun rises in the eastern sky."
<p>Then "Non alignable lines" should have "1, 2". If all goes well you should have something that looks like this:</p>
<pre class="example">太陽が東の空に昇る
taiyō ga higashi no sora ni noboru
/taijoː ŋa çiŋaɕi no soɾa nʲi noboɾɯᵝ/
sun SUBJECT east POSSESSIVE sky LOCATIVE rise
"The sun rises in the eastern sky."</pre>
<p>You can then set up your own custom abbreviations and seperators. As many abbreviations for grammatical elements already have conflicts with each other, your new definitions will overwride any in-built definitions.</p>
<p> It should be noted that this tool saves the data of the input to the "local storage" of your browser for the next time you visit this page.</p>
<h3>Plain Text</h3>
<p>To align the plain text output properly you need to use a fixed-width font. You can do this by using a <code class='example'><pre></code> element. Be careful when using the small caps option, as the characters may not display correctly on all devices, especially F, S, X, and Q. My advice is to not use the small caps option using plain text, but the option is there.</p>
<h3>HTML Table</h3>
<p>When using the HTML markup method, use the following CSS on your website to get the desired output:</p>
<pre class="example">.abbrv {
cursor: help;
}
.sc {
font-variant: small-caps;
font-variant-numeric: oldstyle-nums;
text-transform: lowercase;
}
table {
overflow: auto;
}
table tr {
white-space: nowrap;
}
table tr td {
padding-right: 3px;
}</pre>
<p>If you wish to style the table element, such as with italics or bold, use css classes on an individual word. If you wish to style an entire line, the best way is to add a class to <code class='example'><tr></code> and add styles with CSS.</p>
<h3>HTML Interlinear Div</h3>
<p>When using the 'HTML Interlinear Div' method, use the following CSS on your website to get the desired output:</p>
<pre class="example">.abbrv {
cursor: help;
}
.sc {
font-variant: small-caps;
font-variant-numeric: oldstyle-nums;
text-transform: lowercase;
}
div .gll {
display: inline-table;
padding-right: 10px;
}</pre>
<p>'Single column lines' does not work with this method. Even if you were to edit the output, a div without the <code class='example'>.gll</code> class will only work at the end or the beggining of a block of <code class='example'>.gll</code> divs.</p>
<h3>Latex</h3>
<p>Using Latex's gb4e package, this method normally takes only three lines, therefore this generator only configures three lines.</p>
<p>Make sure to put <code class='example'>\usepackage{gb4e}</code> in your preamble. And if you are using small caps, the font you are using has to support small caps.</p>
<h3>ZBB</h3>
<p>This method generates markup that can be used on vBullitin boards such as The ZBB or CBB. If you provide more than two lines, the third last line must not be empty.</p>
<h3>Wiki Table</h3>
<p>If your wiki does not have the abbr template, you will need to create a page called <code class='example'>template:abbr</code>, with the following code:</p>
<pre class="example"><abbr title="{{{2}}}">{{{1|[?]}}}</abbr><noinclude>{{documentation}}</noinclude>
</pre>
<p>And after saving, if your wiki asks for documentation, paste this link: <code class='example'>https://en.wikipedia.org/wiki/Template:Abbr</code></p>
<h3>Reddit Table</h3>
<p>This outputs to reddit.com "headerless" table format. What fun. Make sure to switch from the "Fancy Pants Editor" to "Markdown Mode" before you paste the output into that website. This method was working as of 24 December 2024 but perhaps something will change that will break this again.</p>
</section>
</div>
<footer>
<ol class="breadcrumbs">
<li>
<a href="#myNav">Return to top</a>
</li>
</ol>
</footer>
</body>
</html>