Improve styling of specification

src/content.config.ts

@@ -22,12 +22,24 @@ function sha256Digest(source: string): string {
 function toPlainMarkdown(body: string): string {
 	return body
 		.replace(/^<pre>\n([\s\S]*?)\n<\/pre>$/gm, '```\n$1\n```')
-		.replace(/^<\/?dl>\s*$/gm, '')
-		.replace(/^<dt>(.*?)<\/dt>\s*$/gm, '### $1')
-		.replace(/^<\/?dd>\s*$/gm, '')
 		.replace(/\n{3,}/g, '\n\n');
 }
 
+// Inject inline HTML into the spec source before rendering so that the FAQ
+// comparison table shows accessible support indicators in HTML, while the
+// plain Markdown body keeps its prose for curl/llms.txt consumers.
+function preprocessForRendering(source: string): string {
+	return source
+		.replace(
+			/\| Supported \|/g,
+			'| <mark data-supported="true" title="Supported" aria-label="Supported">✓</mark> |',
+		)
+		.replace(
+			/\| Not supported \|/g,
+			'| <mark data-supported="false" title="Not supported" aria-label="Not supported">✗</mark> |',
+		);
+}
+
 const specification = defineCollection({
 	loader: {
 		name: 'sembr-specification',
@@ -46,7 +58,7 @@ const specification = defineCollection({
 			const id = 'sembr';
 			const data = await parseData({ id, data: {} });
 			const digest = generateDigest(source);
-			const rendered = await renderMarkdown(source);
+			const rendered = await renderMarkdown(preprocessForRendering(source));
 			const body = toPlainMarkdown(source);
 
 			store.set({ id, data, body, digest, rendered });

src/styles/global.css

@@ -307,17 +307,19 @@
 	code {
 		font-size: 0.9em;
 		line-height: var(--space-s);
+		white-space: nowrap;
 	}
 
 	pre {
 		display: block;
-		overflow-x: scroll;
+		overflow-x: auto;
 		width: 100%;
 		padding: var(--space-s);
 		font-size: calc((min(100vw, 900px) - 5rem) / 50);
 
 		& code {
 			font-size: inherit;
+			white-space: inherit;
 		}
 
 		&.sembr {
@@ -328,13 +330,82 @@
 	::-webkit-scrollbar {
 		-webkit-appearance: none;
 		width: 3px;
+		height: 3px;
 	}
 
 	::-webkit-scrollbar-thumb {
 		border-radius: 2px;
 		background-color: var(--color-rule);
 	}
 
+	/* Tables */
+
+	table {
+		width: 100%;
+		border-collapse: collapse;
+		font-size: 0.9em;
+		font-feature-settings: "kern", "lnum", "tnum";
+	}
+
+	caption {
+		margin-block-end: var(--space-s);
+		color: var(--color-heading);
+		font-family: var(--font-sans);
+		font-weight: 700;
+		text-align: start;
+	}
+
+	th,
+	td {
+		padding: 0.5em 0.75em;
+		text-align: start;
+		vertical-align: baseline;
+		overflow-wrap: break-word;
+	}
+
+	th:first-child,
+	td:first-child {
+		padding-inline-start: 0;
+	}
+
+	th:last-child,
+	td:last-child {
+		padding-inline-end: 0;
+		text-align: end;
+	}
+
+	th {
+		color: var(--color-heading);
+		font-family: var(--font-sans);
+		font-weight: 700;
+	}
+
+	thead {
+		border-block-end: var(--rule) solid var(--color-rule);
+	}
+
+	tbody tr+tr {
+		border-block-start: 1px solid var(--color-rule);
+	}
+
+	tbody tr>td:first-child {
+		font-weight: 700;
+	}
+
+	mark[data-supported="true"] {
+		color: var(--color-heading);
+	}
+
+	mark[data-supported="false"] {
+		color: var(--color-rule);
+	}
+
+	/* Footnotes */
+
+	.footnotes {
+		font-size: 0.85em;
+	}
+
 	/* Separator */
 
 	hr {