-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
332 lines (319 loc) · 15.2 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
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
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
<!doctype html>
<html>
<head>
<!-- Copyright 2017-2022 by zrajm. Released under GPLv3 license. -->
<meta charset="UTF-8">
<title>Teckentranskription</title>
<link rel=stylesheet href="intro.css">
<link rel="shortcut icon" type="image/x-icon" href="favicon.ico">
<style>
html {
line-height: 1.5em;
max-width: 44em;
margin: 0 auto;
background: #888;
}
body {
background: #fff;
padding: .25em 1em;
}
blockquote, dl, img, ol, pre, ul { margin: 1em; }
header, table { margin: 1em 0; }
h1, h2, h3, h4, h5, h6, h7 { margin: 1em 0 .5em 0; }
p + p { text-indent: 1em; }
p + hr { display: none; }
hr + p { margin-top: 1em; }
/* tables */
table { border-collapse: collapse; }
table[border="1"] th, table[border="1"] td {
padding: .2em .4em;
border: 1px solid #000;
}
/* don't underline links, unless hovering */
[href] { text-decoration: none; }
[href]:hover { text-decoration: underline; }
/* other */
.x15 { font-size: 1.5em; }
.x2 { font-size: 2em; }
.x4 { font-size: 4em; }
/* special for this page */
.share {
position: relative;
text-align: right;
}
.share button {
margin-bottom: 4px;
padding: .125em .25em;
margin-left: auto;
margin-right: 0;
}
.share div.bubble {
box-sizing: border-box;
text-align: center;
width: 30em;
max-width: 100%;
display: none;
margin: 6px 10px;
border-radius: 4px;
border: 1px solid #1b1f2326;
background: #fff;
padding: 5px;
z-index: 100;
position: absolute;
right: 0;
}
.share div.bubble:before, .share div.bubble:after {
border: 8px solid transparent;
border-bottom-color: #1b1f2326;
content: "";
display: block;
position: absolute;
right: 9px;
top: -16px;
}
.share div.bubble:after {
border: 7px solid transparent;
border-bottom-color: #fff;
right: 10px;
top: -14px;
}
.url {
padding: .125em .25em;
font-family: monospace;
word-wrap: break-word;
text-align: left;
border: 1px solid #d1d5da;
border-radius: 3px;
box-shadow: #1b1f2313 0px 1px 2px 0px inset;
line-height: 1.5em;
padding: 3px 8px;
max-height: 7.5em;
overflow-y: scroll;
}
button { font-size: 1.25em; }
textarea {
padding: 0 .5em;
box-sizing: border-box;
width: 100%;
height: 10em;
line-height: 1.5em;
}
.relation button { background-color: #c77bc7; }
.attityd button { background-color: #fcaa5d; }
.lage button { background-color: #7b7bc7; }
.handform button { background-color: #7bc77b; }
.forflyttning button { background-color: #c77b7b; }
.rorelse button { background-color: #c77bc7; }
.annat button { background-color: #fcaa5d; }
.framtida button { background-color: #7b7bc7; }
</style>
</head>
<body>
<noscript class=required>Javascript required.</noscript>
<aside class=share>
<button><img src="pic/gui/share.svg" style="height:.8em;margin:0;margin-bottom:-2px;opacity:.75"> Share…</button>
<div class=bubble>
<div class=url></div>
<div class=msg></div>
</div>
</aside>
<main>
<textarea autofocus class="x15" placeholder="Skriv här…
(Använd knapparna nedan för att skriva transkriptions­symboler, och tangentbordet för att skriva vanlig text.)"></textarea>
<br>
<span class=relation><!--
--><button title="brevid">◌</button><!--
--><button title="framför">◌</button><!--
--><button title="bakom">◌</button><!--
--><button title="ovanför">◌</button><!--
--><button title="nedanför">◌</button></span>
<span class=attityd><!--
--><button title="svagriktad"></button><!--
--><button title="starkriktad"></button><!--
--><button title="framåtriktad"></button><!--
--><button title="bakåtriktad"></button><!--
--><button title="uppåtriktad"></button><!--
--><button title="nedåtriktad"></button><!--
--><button title="svagvriden"> </button><!--
--><button title="starkvriden"> </button><!--
--><button title="framåtvriden"> </button><!--
--><button title="bakåtvriden"> </button><!--
--><button title="uppåtvriden"> </button><!--
--><button title="nedåtvriden"> </button></span>
<span class=lage><!--
--><button title="ansiktet"></button><!--
--><button title="övre ansiktet"></button><!--
--><button title="undre ansiktet"></button><!--
--><button title="hjässan"></button><!--
--><button title="pannan"></button><!--
--><button title="ögonen"></button><!--
--><button title="ögat"></button><!--
--><button title="öronen"></button><!--
--><button title="svaga örat"></button><!--
--><button title="starka örat"></button><!--
--><button title="kinderna"></button><!--
--><button title="svaga kinden"></button><!--
--><button title="starka kinden"></button><!--
--><button title="näsan"></button><!--
--><button title="munnen"></button><!--
--><button title="hakan"></button><!--
--><button title="nacken"></button><!--
--><button title="halsen"></button><!--
--><button title="axlarna"></button><!--
--><button title="svaga axeln"></button><!--
--><button title="starka axeln"></button><!--
--><button title="armen"></button><!--
--><button title="överarmen"></button><!--
--><button title="armvecket"></button><!--
--><button title="underarmen"></button><!--
--><button title="bröstet"></button><!--
--><button title="svaga bröstet"></button><!--
--><button title="starka bröstet"></button><!--
--><button title="magen"></button><!--
--><button title="höfterna"></button><!--
--><button title="svaga höften"></button><!--
--><button title="starka höften"></button><!--
--><button title="benet"></button></span>
<span class=handform><!--
--><button title="a-handen" data-src="a-handen-1"></button><!--
--><button title="tumvinkelhanden" data-src="tumvinkelhanden-1"></button><!--
--><button title="vinkelhanden" data-src="vinkelhanden-1 vinkelhanden-2"></button><!--
--><button title="tumhanden" data-src="tumhanden-1 tumhanden-2"></button><!--
--><button title="måtthanden" data-src="matthanden-1 matthanden-2 matthanden-3"></button><!--
--><button title="raka måtthanden" data-src="raka-matthanden-1"></button><!--
--><button title="d-handen" data-src="d-handen-1"></button><!--
--><button title="nyphanden" data-src="nyphanden-1 nyphanden-2"></button><!--
--><button title="lilla o-handen" data-src="lilla-o-handen-1 lilla-o-handen-2"></button><!--
--><button title="e-handen" data-src="e-handen-1"></button><!--
--><button title="f-handen" data-src="stora-nyphanden-5"></button><!--
--><button title="knutna handen" data-src="knutna-handen-1 knutna-handen-2"></button><!--
--><button title="stora nyphanden" data-src="stora-nyphanden-1 stora-nyphanden-2 stora-nyphanden-3 stora-nyphanden-4 stora-nyphanden-5"></button><!--
--><button title="lillfingret" data-src="lillfingret-1 lillfingret-2"></button><!--
--><button title="flyghanden" data-src="flyghanden-1 flyghanden-2 flyghanden-3"></button><!--
--><button title="flata handen" data-src="flata-handen-1 flata-handen-2"></button><!--
--><button title="flata tumhanden" data-src="flata-tumhanden-1"></button><!--
--><button title="krokfinget" data-src="krokfingret-1"></button><!--
--><button title="k-handen" data-src="k-handen-1"></button><!--
--><button title="pekfingret" data-src="pekfingret-1 vinklade-pekfingret"></button><!--
--><button title="l-handen" data-src="l-handen-1"></button><!--
--><button title="m-handen" data-src="m-handen-1"></button><!--
--><button title="n-handen" data-src="n-handen-1 vinklade-n-handen-1 vinklade-n-handen-2"></button><!--
--><button title="o-handen" data-src="o-handen-1"></button><!--
--><button title="hållhanden" data-src="hallhanden-1"></button><!--
--><button title="q-handen" data-src="q-handen-1"></button><!--
--><button title="långfingret" data-src="langfingret-1"></button><!--
--><button title="s-handen" data-src="s-handen-1 s-handen-2"></button><!--
--><button title="klohanden" data-src="klohanden-1 klohanden-2 bojda-sprethanden-1 klohanden-3"></button><!--
--><button title="t-handen" data-src="t-handen-1 t-handen-2"></button><!--
--><button title="dubbelkroken" data-src="dubbelkroken-1"></button><!--
--><button title="böjda tupphanden" data-src="bojda-tupphanden-1"></button><!--
--><button title="v-handen" data-src="v-handen-1"></button><!--
--><button title="tupphanden" data-src="tupphanden-1 vinklade-tupphanden-1"></button><!--
--><button title="w-handen" data-src="w-handen-1"></button><!--
--><button title="x-handen" data-src="x-handen-1"></button><!--
--><button title="sprethanden" data-src="sprethanden-1 4-handen-1 sprethanden-3"></button><!--
--><button title="stora långfingret" data-src="stora-langfingret-1 stora-langfingret-2 stora-langfingret-3"></button><!--
--><button title="runda långfingret" data-src="runda-langfingret-1 runda-langfingret-2"></button><!--
--><button title="4-handen" data-src="4-handen-1"></button></span>
<span class=forflyttning><!--
--><button title="medial kontakt (modifierande)"> </button><!--
--><button title="kontakt"></button><!--
--><button title="hålls stilla"></button><!--
--><button title="förs åt svaga hållet"></button><!--
--><button title="förs åt starka hållet"></button><!--
--><button title="förs i sidled"></button><!--
--><button title="förs framåt"></button><!--
--><button title="förs bakåt"></button><!--
--><button title="förs i djupled"></button><!--
--><button title="förs uppåt"></button><!--
--><button title="förs nedåt"></button><!--
--><button title="förs i höjdled"></button><!--
--><button title="förs kort åt svaga hållet"></button><!--
--><button title="förs kort åt starka hållet"></button><!--
--><button title="förs kort framåt"></button><!--
--><button title="förs kort bakåt"></button><!--
--><button title="förs kort uppåt"></button><!--
--><button title="förs kort nedåt"></button> <!--
--><button title="divergerar"></button><!--
--><button title="konvergerar"></button><!--
--><button title="kors"></button><!--
--><button title="hakning"></button><!--
--><button title="byte"></button><!--
--><button title="entré"></button><!--
--><button title="vinkel"></button> <!--
--><button title="spelar"></button><!--
--><button title="strör"></button><!--
--><button title="böjs (ny)"></button><!--
--><button title="vinkar"></button><!--
--><button title="förändras"></button><!--
--><button title="växelvis"></button> <!--
--></span>
<span class=rorelse><!--
--><button title="båge"></button><!--
--><button title="cirkel"></button><!--
--><button title="slås"></button><!--
--><button title="vrids"></button><!--
--><button title="svagled"> </button><!--
--><button title="starkled"> </button><!--
--><button title="sidled"> </button><!--
--><button title="framåt"> </button><!--
--><button title="bakåt"> </button><!--
--><button title="djupled"> </button><!--
--><button title="uppåt"> </button><!--
--><button title="nedåt"> </button><!--
--><button title="höjdled"> </button><!--
--><button title="mot varandra"> </button></span>
<span class=annat><!--
--><button title="upprepning"></button><!--
--><button title="separator artikulationssekvens"></button><!--
--><button title="separator sammansatt tecken"></button><!--
--><button title="separator mellan händer"></button></span>
<br><span class=framtida><!--
--><div style="display:inline-block;font-size:.6em;line-height:120%;font-weight:bold">Följande symboler är nya
<br>och används inte i lexikon än:</div>
<button title="lamahanden"></button><!--
--><button title="neutrala läget"></button><!--
--><button title="medial kontakt (oberoende)"></button><!--
--><button title="flätas"></button><!--
--><button title="cirkel i frontalplan"></button><!--
--><button title="cirkel i horisontalplan"></button><!--
--><button title="cirkel i sagittalplan"></button><!--
--><button title="studs"></button><!--
--><button title="från varandra"> </button></span>
<p style="margin-top:1em">Använd fältet/knapparna ovan för att transkribera
teckenspråk. För att se resultatet i ett annat program, installera
typsnittet <a href="freesans-swl.ttf"><tt>FreeSans-SWL.ttf</tt></a> på din
dator och klipp-och-klistra det du skrivit ovan. (Om du
vill <a href="freesans-swl.html#css">använda typsnittet på en webbsida</a>,
ladda hem och använd det
kompaktare <a href="freesans-swl.woff2">WOFF2-formatet</a> istället.)
<p>Ladda om sidan för att tömma transkriptionsfältet och börja från början.
</main>
<footer>
<a href="intro.html" title="Description of the transcription system."
>Introduction</a> |
<a href="lexicon.html" title="Swedish sign language lexicon."
>Lexicon</a> |
<a href="https://github.com/zrajm/teckentranskription/blob/master/README.md"
title="What is this page for? Described here!"
>About</a> |
<a href="https://github.com/zrajm/teckentranskription/issues"
title="Is something missing or broken on this page? Report it here!"
>Report issue</a> |
<a href="https://github.com/zrajm/teckentranskription"
title="The GitHub repository of this page."
>GitHub</a> |
<a href="freesans-swl.html"
title="A typeface for sign language transcription."
>Unicode Font</a> |
<a href="LICENSE.txt" rel=license
title="Released under the GNU General Public License, Version 3 (GPLv3)."
>License</a>
<br>© 2017–2022 zrajm, Uppsala.
</footer>
<div id=hover style="display:none;position:fixed;top:0;right:0;border:4px solid black;padding:.5em 1em;background:#fff;opacity:.8;z-index:2147483647"></div>
<script src="jquery-3.6.0.slim.min.js"></script>
<script src="index.js"></script>
<script src="dom-to-image.min.js"></script>
</body>
</html>