Styles for desc and multi-field languages

Author: untunt

src/routes/+page.svelte

@@ -18,13 +18,14 @@
 
 <style>
 .page {
+	font-size: 16px;
 	text-align: center;
 }
 
 input {
 	background-color: inherit;
 	color: inherit;
-
+    font-size: 1em;
 }
 
 input[type="text"] {
@@ -46,10 +47,6 @@ form {
 form > * {
 	vertical-align: middle;
 }
-
-footer {
-	font-size: 90%;
-}
 </style>
 
 <div class="page">
@@ -63,6 +60,6 @@ footer {
 	<DataTable results={results}/>
 
 	<footer>
-		<p>網站作者：<a href="https://github.com/nk2028/hdqt">nk2028</a> - 資料來源：漢字音典（眾專家）</p>
+		<p>網站作者：<a href="https://github.com/nk2028/hdqt">nk2028</a> - 資料來源：<a href="https://github.com/osfans/MCPDict">漢字音典（眾專家）</a></p>
 	</footer>
 </div>

src/routes/DataTable.svelte

@@ -1,37 +1,54 @@
 <script lang="ts">
 	export let results: string[][];
+	const headers: { [key: string]: string[] } = {
+		'廣韻': [
+			'切拼i', '白一平i', '古韻i', '有女i',
+			'髙本漢', '王力{1957}', '王力{1985}', '李榮', '邵榮芬', '蒲立本', '鄭張尙芳', '潘悟雲{2000}', '潘悟雲{2013}', '潘悟雲{2023}', 'unt{2020}', 'unt{2022}', 'unt{通俗}', 'msoeg',
+			'切韻音系描述', 'null', '方音字彙描述',
+			'廣韻韻目原貌', '折合平水韻目',
+			'反切',
+		],
+		'中原音韻': ['楊耐思', '寧繼福', '薛鳳生{音位形式}', 'unt{音位形式}', 'unt'],
+		'普通話': ['i'],
+		'東干語': ['西里爾字母i', '音標'],
+		'香港': ['i'],
+		'臺灣': ['i'],
+		'越南': ['i'],
+		'朝鮮': ['i'],
+		'日語吳音': ['i'],
+		'日語漢音': ['i'],
+	};
 </script>
 
 <style>
 table {
 	border-collapse: collapse;
 	margin: 0 auto;
 	overflow-x: auto;
+	line-height: 1.5;
 }
 
 th, td {
-	border: 1px solid;
-	padding: 4px 6px;
+	padding: 0.25em;
+	width: 12em;
+	text-align: start;
+	vertical-align: top;
 }
 
-td:first-child {
-	white-space: nowrap;
-}
-
-td:not(:first-child) {
-	width: 6em;
-	word-break: break-all;
+th:first-child, td:first-child {
+	width: auto;
+	text-align: end;
 }
 
 .name-tag {
-	border-radius: 10px;
+	border-radius: 0.5em;
 	color: white;
-	font-size: 0.8em;
-	padding: 3px 5px;
+	padding: 0.15em 0.2em;
+	white-space: nowrap;
 }
 
-.text {
-	font-size: 90%;
+.desc {
+	font-size: 0.75em;
 }
 </style>
 
@@ -49,7 +66,30 @@ td:not(:first-child) {
 				<tr>
 					<td><span class="name-tag" style="background-color: {顏色};" title="{分區}">{簡稱}</span></td>
 					{#each 字音們 as 字音}
-						<td lang="zh-x-fonipa" class="text">{字音}</td>
+						{(字音 = 字音.replace(/\{.*?\}/g, s => s.replace(/ /g, '')))}
+						{#if headers[簡稱]}
+							{(字音 = 字音
+								.split(' ')
+								.map(s => s
+									.split('/')
+									.map((s, i) => {
+										let header = headers[簡稱][i];
+										if (header === 'null') return '';
+										if (header && header.endsWith('i')) {
+											header = header.slice(0, -1);
+											s = `<em>${s}</em>`;
+										}
+										return header ? header + '：' + s : s;
+									})
+									.join('<br>')
+									.replace(/(<br>)+/g, '<br>'))
+								.join(headers[簡稱].length > 1 ? '<br><br>' : ' '))}
+						{/if}
+						{(字音 = 字音
+							.replace(/\*(.*?)\*/g, '<strong>$1</strong>')
+							.replace(/\|(.*?)\|/g, '<span style="opacity: 0.5;">$1</span>')
+							.replace(/\{(.*?)\}/g, '<span class="desc">$1</span>'))}
+						<td lang="zh-x-fonipa" class="text">{@html 字音}</td>
 					{/each}
 				</tr>
 			{/each}