/
index.html
602 lines (528 loc) · 21.9 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
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
589
590
591
592
593
594
595
596
597
598
599
600
601
602
<!DOCTYPE html>
<html lang="zh-HK">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width" />
<title>韻段離合指數統計工具</title>
<script src="rhyme-stat.js"></script>
<script src="index.js"></script>
<script src="pinyin.js"></script>
<script src="https://cdn.jsdelivr.net/npm/qieyun"></script>
<style>
body {
margin: 0;
padding: 1em;
min-width: 400px;
}
h1 {
margin: 0.2em 0 0.4em;
}
@media screen and (max-width: 480px) {
body {
padding: 1em 0.5em;
}
h1 {
text-align: center;
}
#main {
column-gap: 0;
}
table {
font-size: 1em;
}
}
p,
ul,
li {
margin: 0.25em 0;
}
.inline-note {
font-size: 75%;
position: relative;
bottom: -0.1em;
}
#main {
display: grid;
grid-auto-flow: dense;
}
#main>div>:first-child,
#main>div>:first-child>:first-child,
#main>div>:first-child>:first-child>:first-child {
margin-top: 0;
}
#main>div>:last-child,
#main>div>:last-child>:last-child,
#main>div>:last-child>:last-child>:last-child,
.chi2>:last-child {
margin-bottom: 0;
}
.flex-container {
display: flex;
flex-wrap: wrap;
}
#main,
.flex-container {
gap: 1em 2em;
}
#main+*,
.flex-container+* {
margin-top: 1em;
}
#input {
height: fit-content;
}
#input>* {
margin-bottom: 0.4em;
}
#input>*:nth-last-child(n+3) {
line-height: 0;
}
#input>*:nth-last-child(n+3) p {
line-height: initial;
}
textarea,
button {
font-size: 1em;
}
textarea {
width: calc(100% - 12px);
font-family: auto;
padding: 2px 5px;
border-width: 1px;
resize: vertical;
height: 4.5em;
}
.rime-count-only textarea#material {
height: 13.5em;
}
.rime-count-only textarea:not(#material) {
height: 0em;
}
#buttons button:not(:first-of-type) {
margin-left: 0.5em;
}
#options div:not(:last-child) {
margin-bottom: 0.2em;
}
#copy-buttons {
margin-bottom: 1.5em;
white-space: nowrap;
}
#copy-buttons>:not(:last-child) {
margin-right: 0.5em;
}
table,
th,
td {
border: 0 solid;
}
table {
margin-top: 0.33333em;
border-spacing: 0;
border-width: 1px 0;
line-height: 1;
font-size: 1.125em;
}
.narrow1 table {
font-size: 1em;
}
table caption {
font-size: 1.33333em;
margin-bottom: 0.375em;
}
th,
td {
text-align: left;
font-weight: normal;
width: 2.5em;
padding: 9px;
padding-right: 7px;
}
.narrow2 th,
.narrow2 td {
width: 2.2em;
}
.narrow2 th>:first-child,
.narrow2 td>:first-child {
margin-left: -0.15em;
}
.narrow2 th:nth-of-type(2),
.narrow2 td:nth-of-type(2) {
padding-left: 0px;
padding-right: 7px;
}
th {
padding-right: 0;
}
th:first-of-type,
td:first-of-type {
width: auto;
}
th:nth-of-type(2),
td:nth-of-type(2) {
padding-left: 2px;
padding-right: 9px;
width: auto;
}
th:nth-of-type(3),
td:nth-of-type(3) {
padding-left: 10px;
}
th .rime-name {
display: inline-block;
margin-right: -5px;
}
td .value {
margin-right: 0.05em;
}
td sup,
td sub {
display: inline-block;
width: 2em;
margin-right: -2em;
font-size: 0.667em;
vertical-align: baseline;
position: relative;
bottom: 0.667em;
}
td sub {
bottom: -0.333em;
}
th:nth-of-type(3),
td:nth-of-type(3),
#main:not(.combine) td.cell-diag+td,
th.dummy.add-border+th,
td.dummy.add-border+td {
border-left-width: 1px;
padding-left: 8px;
}
th.dummy.double-border+th,
td.dummy.double-border+td {
border-left-width: 3px;
border-left-style: double;
}
tr:nth-of-type(2) td,
#main:not(.combine) :not(.dummy)+td.cell-diag,
tr.dummy.add-border+tr td {
border-top-width: 1px;
padding-top: 8px;
}
tr.dummy.double-border+tr td {
border-top-width: 3px;
border-top-style: double;
}
th.dummy.gray-border+th,
td:not(.cell-diag)+td.dummy.gray-border+td {
border-left-color: #ccc;
}
tr.dummy.gray-border+tr td:not(.cell-diag) {
border-top-color: #ccc;
}
.cell-t,
#main.combine:not(.hide-all-bkgd) .cell-diag,
#main:not(.hide-half-bkgd):not(.hide-all-bkgd) .cell-diag {
background: #eff;
}
.cell-f,
.cell-nan {
background: #fde9e9;
}
.cell-f-star {
background: #fcecfc;
}
.cell-t-star {
background: #eef;
}
#main.hide-all-bkgd td {
background: none;
}
h4 {
margin: 0 0 0.75em;
}
.legend:not(.bkgd) .title,
.legend .icon {
display: inline-block;
white-space: nowrap;
}
.legend .icon+* {
line-height: 1;
}
.legend.value .title {
width: 6.25em;
}
.legend.chi2 .title {
width: 4.25em;
}
.legends .legend .title {
font-weight: bold;
}
.legend.bkgd .icon {
width: 1em;
height: 1em;
line-height: 1;
vertical-align: bottom;
padding: 0.1em;
margin-left: 2em;
margin-right: 0.5em;
text-align: center;
}
.legend.bkgd .icon span {
font-size: 0.75em;
position: relative;
top: -0.125em;
}
.legend.chi2 {
padding: 0.5em;
border: solid 1px #ddd;
}
#instruction p {
margin-top: 0.5em;
}
#instruction .indent {
margin-left: 3em;
text-indent: -2em;
}
#main.phono-desc .hide-if-phono-desc,
#main:not(.phono-desc) .show-if-phono-desc,
#main.pinyin .hide-if-pinyin,
#main:not(.pinyin) .show-if-pinyin,
#main.rime-name-only .hide-if-rime-name-only,
#main:not(.rime-name-only) .show-if-rime-name-only,
#main.rime-count-only .hide-if-rime-count-only,
#main:not(.rime-count-only) .show-if-rime-count-only,
#main.rhyme-group .hide-if-rhyme-group,
#main:not(.rhyme-group) .show-if-rhyme-group,
#main.combine .hide-if-combine,
#main:not(.combine) .show-if-combine,
#main.show-tf .hide-if-tf,
#main:not(.show-tf) .show-if-tf,
#main:not(.hide-zero):not(.combine) .show-if-hide-zero-or-combine,
#main.hide-all-bkgd .hide-if-hide-all-bkgd,
#main:not(.has-unannotated) .show-if-has-unannotated,
#main:not(.table-valid) .show-if-table-valid,
#main.input-invalid .hide-if-input-invalid {
display: none;
}
#main.rime-name-only .empty-if-rime-name-only,
#main.rime-count-only .empty-if-rime-count-only {
visibility: hidden;
}
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
-webkit-appearance: none !important;
}
input[type="number"] {
-moz-appearance: textfield;
}
input#rhyme-check:checked~.count-total-line,
input#rhyme-group-check:checked~.show-tf-check-line,
.dummy {
display: none;
}
code,
#deriver-code {
font-size: 1em;
font-family: Courier New, monospace;
}
code {
background: #eee;
padding: 0.15em;
line-height: 1;
}
</style>
<script>window.onresize = arrangeOutput;</script>
</head>
<body>
<h1>韻段離合指數統計工具</h1>
<div id="main" class="grid-container" style="grid-template-columns: 400px;">
<div id="input">
<div style="display: flex; justify-content: space-between;">
<p style="text-wrap: nowrap; margin: 0.05em -5em 0 0;">表格標題：</p>
<input type="text" id="caption-input" placeholder="輸入表格標題……"
style="width: calc(100% - 12px - 5em); height: 1.1em; font-size: 1em;">
</div>
<div>
<p>① <span class="hide-if-rime-count-only">各韻段的韻腳<span class="hide-if-rime-name-only">（字後可括注<span
class="show-if-phono-desc">音韻地位</span><span class="show-if-pinyin">漢語拼音</span>或韻類）</span><span
class="show-if-rime-name-only">所屬韻類</span></span><span
class="show-if-rime-count-only">韻次表（前兩列標注韻類、字次）</span>：
</p>
<textarea id="material"></textarea>
</div>
<div class="empty-if-rime-count-only">
<p>② <span class="hide-if-rime-name-only">韻腳</span><span
class="show-if-rime-name-only">韻類</span>中要跳過的字符（視作和換行等同）：</p>
<textarea id="delimiters" style="height: 1.5em;"></textarea>
</div>
<div class="empty-if-rime-name-only empty-if-rime-count-only">
<p>③ 各韻腳所屬<span class="show-if-phono-desc">音韻地位（描述或編碼）</span><span class="show-if-pinyin">漢語拼音</span>或韻類</span>：
</p>
<textarea id="dictionary"></textarea>
</div>
<div class="empty-if-rime-name-only empty-if-rime-count-only">
<p>④ 由<span class="show-if-phono-desc">音韻地位</span><span class="show-if-pinyin">漢語拼音</span>推導韻類的代碼（留空則導出<span
class="show-if-phono-desc">韻名</span><span class="show-if-pinyin">韻母</span>）：</p>
<textarea id="deriver-code"></textarea>
</div>
<div>
<p>⑤ 要在結果中顯示的韻類（留空則顯示所有韻類）：</p>
<textarea id="rime-names" style="height: 1.5em;" placeholder="輸入要在結果中顯示的韻類……"
onblur="this.value=this.value.replace(/[\t\n ]+/g, ' ').replace(/ \|\\ /g, ' | \\ ').trim()"></textarea>
</div>
<div>
<p>⑥ 韻類名中要縮小字號的字符：</p>
<textarea id="rime-names-mini" style="height: 3.5em;" placeholder="輸入韻類名中要縮小字號的字符……"></textarea>
</div>
<div id="buttons" style="white-space: nowrap; margin: 0.7em 0 0.6em;">
<button type="button" onclick="gen(true, true);">生成離合指數表</button><button type="button"
onclick="if (writeSampleData()) gen(true);">加載示例</button><button type="button"
class="hide-if-rime-name-only hide-if-rime-count-only"
onclick="if (writeSampleData(false, true)) gen(true);">加載示例（不用③④）</button><button type="button"
class="show-if-rime-count-only" onclick="gen(true, true, true);">修正字次並生成</button>
</div>
<div id="options">
<div style="margin-bottom: 0.3em; text-wrap: nowrap;">輸入：<input type="radio" name="annotation-type"
id="phono-desc-check" checked="checked" style="margin-left: 1px;" onclick="gen(true, true);"><label
for="phono-desc-check">音韻地位</label>
<input type="radio" name="annotation-type" id="pinyin-check" onclick="gen(true, true);"><label
for="pinyin-check">漢語拼音</label>
<input type="radio" name="annotation-type" id="rime-name-only-check" onclick="gen(true, true);"><label
for="rime-name-only-check">韻類名</label>
<input type="radio" name="annotation-type" id="rime-count-only-check" onclick="gen(true, true);"><label
for="rime-count-only-check">韻次表</label>
</div>
<div style="margin-bottom: 0.3em;">算法：<input type="radio" name="idx-type" id="rhyme-check" checked="checked"
style="margin-left: 1px;" onclick="gen();"><label for="rhyme-check">韻離合指數</label> <input type="radio"
name="idx-type" id="rhyme-group-check" onclick="gen();"><label for="rhyme-group-check">轍離合指數</label>
</div>
<div class="show-if-rhyme-group">所有韻類總字次：<input type="number" id="countTotal"
style="width: 4em; margin: -1em 0;" oninput="gen();" onchange="gen(false, true);">
</div>
<div class="hide-if-rhyme-group"><input type="checkbox" id="show-tf-check" onclick="gen();"><label
for="show-tf-check">韻離合指數後添加「T、F」（兩韻通、兩韻分）</label>
</div>
<!--
<div><input type="checkbox" id="combine-check" onclick="gen();"><label for="combine-check">合併押韻次數和離合指數</label>
</div>
<div><input type="checkbox" id="hide-half-bkgd-check" onclick="gen();"><label for="hide-half-bkgd-check"><span
class="show-if-combine">不合併時，</span>隱藏對角線左下的背景顏色</label>
</div>
-->
<div><input type="checkbox" id="hide-zero-check" onclick="gen();" checked><label for="hide-zero-check"><span
class="show-if-combine">不合併時，</span>押韻次數爲 0 則省略</label>
</div>
<div><input type="checkbox" id="hide-all-bkgd-check" onclick="gen();"><label
for="hide-all-bkgd-check">隱藏<!--所有-->背景顏色</label>
</div>
<div><input type="checkbox" id="simplified-check" onclick="gen();"><label
for="simplified-check">表格使用簡體字體</label>
</div>
</div>
</div>
<div id="output" style="display: none;">
<div>
<div class="flex-container">
<div style="width: max-content;">
<div id="copy-buttons" class="hide-if-input-invalid">
<button type="button" class="show-if-has-unannotated" onclick="copy(true);">複製無標注的字</button><button
type="button" class="show-if-table-valid" onclick="copy();">複製韻譜<span
class="inline-note">韻腳+韻類</span></button><button type="button" class="show-if-table-valid"
onclick="copy(false, true);">複製韻譜<span class="inline-note">僅韻類</span></button>
</div>
<table id="table"></table>
</div>
<div class="legend chi2 show-if-table-valid hide-if-rhyme-group" style="align-self: flex-end;">
<h4><i>χ</i>² 臨界值簡表</h4>
<p><span class="title"><i>p</i> 值</span><i>χ</i>² 臨界值</p>
<p><span class="title">0.1</span>4.605</p>
<p><span class="title">0.05</span>5.991</p>
<p><span class="title">0.025</span>7.378</p>
<p><span class="title">0.01</span>9.21</p>
<p><span class="title">0.005</span>10.597</p>
<p>（<i>p</i> 越小，標準越嚴）</p>
</div>
</div>
<div class="legends show-if-table-valid">
<h4>表格說明</h4>
<div class="legend value">
<p><span class="title">最左側：</span>該<span class="hide-if-rhyme-group">韻</span><span
class="show-if-rhyme-group">轍</span>韻腳字次</p>
<p class="show-if-combine"><span class="title">表格內部：</span><span class="hide-if-rhyme-group">韻</span><span
class="show-if-rhyme-group">轍</span>離合指數 <i>I</i></p>
<p class="hide-if-combine"><span class="title">對角線：</span>該<span class="hide-if-rhyme-group">韻</span><span
class="show-if-rhyme-group">轍</span>自押次數<span class="show-if-hide-zero-or-combine">（爲 0 則省略）</span></p>
<p><span class="hide-if-combine title">對角線左下：</span><span class="show-if-combine title">上標數字：</span>兩<span
class="hide-if-rhyme-group">韻</span><span class="show-if-rhyme-group">轍</span>互押次數<span
class="show-if-hide-zero-or-combine">（爲 0
則省略）</span>
</p>
<p class="hide-if-combine"><span class="title">對角線右上：</span><span class="hide-if-rhyme-group">韻</span><span
class="show-if-rhyme-group">轍</span>離合指數 <i>I</i></p>
<p class="hide-if-rhyme-group"><span class="title">下標數字：</span><i>χ</i>² 值</p>
</div>
<div class="legend bkgd hide-if-hide-all-bkgd">
<p class="title"><span class="show-if-tf hide-if-rhyme-group">下標字母、</span>單元格背景<span
class="hide-if-rhyme-group">、星號</span>：</p>
<p><span class="cell-t icon"><span class="show-if-tf hide-if-rhyme-group">T</span></span><span>兩<span
class="hide-if-rhyme-group">韻通（<i>I</i> ≥ 90 或 <i>I</i> ≥ 50 且 <i>χ</i>² < 4.605）</span><span
class="show-if-rhyme-group">轍合（<i>I</i> ≥ 2）</span></span></p>
<p><span class="cell-t-star icon"><span class="show-if-tf hide-if-rhyme-group">T</span><span
class="hide-if-rhyme-group">*</span></span><span>兩<span
class="hide-if-rhyme-group">韻通，但如果標準定得更嚴則不通</span><span class="show-if-rhyme-group">轍近（<i>I</i>
1.5~2）</span></span></p>
<p><span class="cell-f-star icon"><span class="show-if-tf hide-if-rhyme-group">F</span><span
class="hide-if-rhyme-group">*</span></span><span>兩<span
class="hide-if-rhyme-group">韻分，但如果標準定得更寬則通</span><span class="show-if-rhyme-group">轍近（<i>I</i>
1~1.5）</span></span></p>
<p><span class="cell-f icon"><span class="show-if-tf hide-if-rhyme-group">F</span></span><span>兩<span
class="hide-if-rhyme-group">韻分（<i>I</i> < 50 或 <i>I</i> < 90 且 <i>χ</i>² >
10.597）</span><span class="show-if-rhyme-group">轍遠（<i>I</i> < 1）</span></span></p>
</div>
</div>
</div>
</div>
<div id="instruction" style="align-self: flex-end; max-width: 800px;">
<h4>使用說明</h4>
<p>文本框輸入格式：</p>
<p class="indent">①：<span class="hide-if-rime-count-only">每行是一個韻段<span
class="hide-if-rime-name-only">。括注用全半角括號均可</span><span
class="show-if-rime-name-only">，僅輸入韻類而不輸入韻腳。韻類之間可以用空格、製表符或全半角逗號分隔，韻類名皆爲單字時也可以不分隔</span></span><span
class="show-if-rime-count-only">韻次表（韻次即押韻次數）可以複製自本工具生成的或其他著作中的離合指數表，格式如下：第一行爲各列的韻類名，之後的每行，前兩個值爲該行的韻類及其字次，之後爲韻次值。字次可以是
<code>/</code>（用於例外押入的韻類），韻次爲 0
時可以省略。第一行可以省略，對角線右上的值也可以省略，它們在生成時均會被忽略。值之間可以用空格、製表符或全半角逗號分隔，韻類名和字次之間也可以不分隔</span>
</p>
<p class="indent hide-if-rime-name-only hide-if-rime-count-only">③：每行是一個韻腳。韻腳字和標注（<span
class="show-if-phono-desc">音韻地位</span><span
class="show-if-pinyin">漢語拼音</span>或韻類）之間可以用空格、製表符或全半角逗號分隔，也可以不分隔，還可以是韻腳字後括注<span
class="show-if-phono-desc">音韻地位</span><span class="show-if-pinyin">漢語拼音</span>或韻類（<span
class="show-if-pinyin">如</span>同<a href="https://nk2028.shn.hk/qieyun-autoderiver/">切韻音系自動推導器</a>匯出的格式）</p>
<p class="indent hide-if-rime-name-only hide-if-rime-count-only">④：<span class="show-if-phono-desc">同<a
href="https://nk2028.shn.hk/qieyun-autoderiver/">切韻音系自動推導器</a>所用的推導方案代碼格式</span><span
class="show-if-pinyin">外部傳入的參數爲 <code>漢語拼音</code>，內含 3
個屬性：<code>聲母</code>、<code>韻母</code>、<code>聲調</code></span>，代碼返回韻類名</p>
<p class="indent">⑤：韻類之間用空格分隔（輸入製表符會自動替換爲空格），也可在韻類之間插入下列符號（兩側需有空格）以添加框線：<code>|</code> 黑色單線、<code>|_</code>
灰色單線、<code>||</code> 黑色雙線，或插入 <code>\</code> 以省略右側列（當右側爲例外押入的韻類時可以使用）
</p>
<p class="hide-if-rime-name-only hide-if-rime-count-only">若標注已經是韻類名，則會自動跳過④的推導，如此可以直接指定一些字的韻類。<span
class="show-if-phono-desc">標注音韻地位（描述或編碼）的格式應與 <a
href="https://nk2028.shn.hk/qieyun-js/classes/____.html">qieyun-js</a> 相同。</span><span
class="show-if-pinyin">標注漢語拼音時，聲調可以用符號附加在字母上，也可以用數字寫在音節末尾。</span></p>
<p class="hide-if-rime-name-only hide-if-rime-count-only">①中的標注優先於③中的標注。若有韻腳字①、③中都無標注，則在生成離合指數表時會報錯並輸出。<span
class="show-if-phono-desc">將輸出的字在<a href="https://nk2028.shn.hk/qieyun-autoderiver/">推導器</a>中用
<code>return 音韻地位.描述;</code>
推導，匯出的結果可直接加入③中。</span></p>
<p class="hide-if-rime-name-only hide-if-rime-count-only">
實際上大多數字只需在③中標注，但對於韻母有多讀的多音字，應在①中指定讀音。當然，也可在①中爲所有字標注而不使用③④，此時③④可以留空。</p>
<p class="show-if-rime-count-only">「修正字次並生成」按鈕用于根据表中的韻次數據驗算行首的字次。</p>
<p>本頁面不使用緩存，各文本框中輸入的資料請在本地妥善保存！</p>
<p>本頁面原始碼公開於 <a href="https://github.com/nk2028/rhyme-stat">GitHub</a></p>
</div>
</div>
<script>
new ResizeObserver(arrangeOutput).observe(document.getElementById('input'));
loadInputs();
writeSampleData(true);
gen();
</script>
</body>
</html>