Styles for desc and multi-field languages

nk2028 · Nov 25, 2024 · c01630e · c01630e
1 parent f6a8162
commit c01630e
Show file tree

Hide file tree

Showing 3 changed files with 86 additions and 27 deletions.
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
@@ -24,7 +24,7 @@
 input {
 	background-color: inherit;
 	color: inherit;
-
+	font-size: 1em;
 }
 
 input[type="text"] {
@@ -46,10 +46,6 @@ form {
 form > * {
 	vertical-align: middle;
 }
-
-footer {
-	font-size: 90%;
-}
 </style>
 
 <div class="page">
@@ -63,6 +59,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>
diff --git a/src/routes/DataTable.svelte b/src/routes/DataTable.svelte
@@ -1,37 +1,94 @@
 <script lang="ts">
 	export let results: string[][];
+	const headers: { [key: string]: string[] } = {
+		廣韻: [
+			'l切拼', 'l白一平', 'l古韻', 'l有女',
+			'i髙本漢', 'i王力{1957}', 'i王力{1985}', 'i李榮', 'i邵榮芬', 'i蒲立本', 'i鄭張尙芳', 'i潘悟雲{2000}', 'i潘悟雲{2013}', 'i潘悟雲{2023}', 'iunt{2020}', 'iunt{2022}', 'iunt{通俗}', 'imsoeg',
+			'h描述{切韻音系}', '#攝', 'h描述{方音字彙}',
+			'h廣韻{韻目原貌}', 'h平水{折合韻目}',
+			'h反切',
+		],
+		中原音韻: ['i楊耐思', 'i寧繼福', 'i薛鳳生{音位形式}', 'iunt{音位形式}', 'iunt'],
+		東干語: ['c拼寫', 'i音標'],
+	};
+	const romanizationDialects = ['普通話', '香港', '臺灣', '越南', '朝鮮', '日語吳音', '日語漢音'];
+	function wrapIPA(字音: string) {
+		return `<span lang="zh-Latn-fonipa">${字音}</span>`;
+	}
+	function wrapRomanization(字音: string, script: string = 'Latn') {
+		return `<span lang="zh-${script}">${字音}</span>`;
+	}
+	function process字音s(字音: string, 簡稱: string) {
+		return 字音
+			.split('\t')
+			.map(s => {
+				let [音標, 解釋] = s.replace('}', '').split('{');
+				if (headers[簡稱]) {
+					let isBold = false;
+					if (音標.includes('*')) {
+						isBold = true;
+						音標 = 音標.replace(/^\*/g, '');
+					}
+					音標 = 音標
+						.split('/')
+						.map((s, i) => {
+							let header = headers[簡稱][i];
+							if (!s || !header || header[0] === '#') return '';
+							switch (header[0]) {
+								case 'i': s = wrapIPA(s); break;
+								case 'l': s = wrapRomanization(s); break;
+								case 'c': s = wrapRomanization(s, 'Cyrl'); break;
+							}
+							header = header.slice(1);
+							if (isBold) s = `*${s}*`;
+							return header ? header + '：' + s : s;
+						})
+						.filter(Boolean)
+						.join('<br>');
+				} else if (romanizationDialects.includes(簡稱)) {
+					音標 = wrapRomanization(音標);
+				} else {
+					音標 = wrapIPA(音標);
+				}
+				解釋 = 解釋?.replace(/ /g, '');
+				if (解釋) {
+					if (headers[簡稱]) 音標 += '<br>';
+					音標 += `{${解釋}}`;
+				}
+				return 音標;
+			})
+			.join(headers[簡稱] ? '<br><br>' : ' ')
+			.replace(/\*(.*?)\*/g, '<strong>$1</strong>')
+			.replace(/\|(.*?)\|/g, '<span style="opacity: 0.5;">$1</span>')
+			.replace(/\{(.*?)\}/g, '<span class="desc">$1</span>');
+	}
 </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;
-}
-
-.text {
-	font-size: 90%;
+	padding: 0.15em 0.2em;
+	white-space: nowrap;
 }
 </style>
 
@@ -49,7 +106,7 @@ 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>
+						<td class="text">{@html process字音s(字音, 簡稱)}</td>
 					{/each}
 				</tr>
 			{/each}

diff --git a/src/routes/styles.css b/src/routes/styles.css
@@ -1,6 +1,7 @@
 @import url(CharisSIL.css);
 
 body {
+	font-size: 16px;
 	background-color: #111;
 	color: #ccc;
 	margin: 0 auto;
@@ -11,15 +12,20 @@ body {
 	font-family: Roboto, 'Source Han Sans C', 'Source Han Sans K', 'Noto Sans CJK KR', sans-serif;
 }
 
-:lang(zh-x-fonipa) {
-	font-family: 'Charis SIL', 'Source Han Sans C', 'Source Han Sans K', 'Noto Sans CJK KR', serif;
+:lang(zh-Latn), :lang(zh-Cyrl) {
+	font-style: italic;
 }
 
-h1 {
-	font-family: Roboto, 'Source Han Serif C', 'Source Han Serif K', 'Noto Serif CJK KR', sans-serif;
+:lang(zh-Latn-fonipa) {
+	font-style: normal;
+	font-family: 'Charis SIL', serif;
 }
 
 a {
 	color: deepskyblue;
 	text-decoration: none;
 }
+
+.desc {
+	font-size: 0.67em;
+}