feat: improve texts

Author: dani-polani

bitext/src/lib/components/editor/GlossInputRow.svelte

@@ -1,9 +1,15 @@
 <script lang="ts">
 	import { Label } from 'flowbite-svelte';
 	import type { Token } from '$lib/domain/tokens.js';
+	import { settingsStore } from '$lib/state/settings.svelte.js';
+	import { resolveVisualizationFontCss } from '$lib/fonts/visualization-font.js';
+	import { defaultGlossFontSizePx } from '$lib/serialization/schema.js';
 
 	const inputClass =
-		'block w-full rounded-none border border-gray-300 bg-gray-50 p-2 text-xs text-gray-900 placeholder-gray-500 focus:border-primary-500 focus:ring-primary-500 dark:border-gray-600 dark:bg-gray-700 dark:text-white dark:focus:border-primary-500 dark:focus:ring-primary-500';
+		'block w-full rounded-none border border-gray-300 bg-gray-50 p-2 text-gray-900 placeholder-gray-500 focus:border-primary-500 focus:ring-primary-500 dark:border-gray-600 dark:bg-gray-700 dark:text-white dark:focus:border-primary-500 dark:focus:ring-primary-500';
+
+	const glossFont = $derived(resolveVisualizationFontCss(settingsStore.settings, 'gloss'));
+	const glossSizePx = $derived(defaultGlossFontSizePx(settingsStore.settings));
 
 	let {
 		tokens,
@@ -26,6 +32,8 @@
 				class={inputClass}
 				placeholder=" "
 				value={t.gloss ?? ''}
+				style:font-family={glossFont}
+				style:font-size="{glossSizePx}px"
 				oninput={(e) => onGloss(t.id, (e.currentTarget as HTMLInputElement).value)}
 			/>
 		</div>

bitext/src/lib/components/preview/AlignmentPreview.svelte

@@ -15,6 +15,7 @@
 	const bg = $derived(settingsStore.settings.background);
 	const fontSource = $derived(resolveVisualizationFontCss(settingsStore.settings, 'source'));
 	const fontTarget = $derived(resolveVisualizationFontCss(settingsStore.settings, 'target'));
+	const fontGloss = $derived(resolveVisualizationFontCss(settingsStore.settings, 'gloss'));
 	/** Explicit subscription — plain `projectStore.links` in children may not invalidate UI. */
 	const links = $derived(projectStore.links);
 
@@ -47,7 +48,7 @@
 			<div
 				data-gloss-row="source"
 				class="preview-gloss-wrap"
-				style:font-family={fontSource}
+				style:font-family={fontGloss}
 				style:margin-bottom="{glossGap}px"
 			>
 				<GlossRow tokens={projectStore.sourceTokens} side="source" />
@@ -78,7 +79,7 @@
 			/>
 		</div>
 		{#if showTargetGloss}
-			<div data-gloss-row="target" class="preview-gloss-wrap" style:font-family={fontTarget}>
+			<div data-gloss-row="target" class="preview-gloss-wrap" style:font-family={fontGloss}>
 				<GlossRow tokens={projectStore.targetTokens} side="target" />
 			</div>
 		{/if}

bitext/src/lib/components/preview/AlignmentSvg.svelte

@@ -99,6 +99,10 @@
 		}
 		void settingsStore.settings.lineStyle;
 		void settingsStore.settings.glossLineGapPx;
+		void settingsStore.settings.sourceTextSizePx;
+		void settingsStore.settings.targetTextSizePx;
+		void settingsStore.settings.glossFontFamily;
+		void settingsStore.settings.glossFontSource;
 		void projectStore.sourceTokens;
 		void projectStore.targetTokens;
 		/** Two rAFs: wait for style/layout flush after font or DOM updates. */

bitext/src/lib/components/preview/GlossRow.svelte

@@ -2,12 +2,13 @@
 	import type { Token } from '$lib/domain/tokens.js';
 	import { primaryLinkForToken } from '$lib/domain/alignment.js';
 	import { settingsStore } from '$lib/state/settings.svelte.js';
+	import { defaultGlossFontSizePx } from '$lib/serialization/schema.js';
 	import { projectStore } from '$lib/state/project.svelte.js';
 
 	let { tokens, side }: { tokens: Token[]; side: 'source' | 'target' } = $props();
 
 	const gap = $derived(settingsStore.settings.gapWordPx);
-	const sz = $derived(Math.max(12, settingsStore.settings.textSizePx * 0.75));
+	const sz = $derived(defaultGlossFontSizePx(settingsStore.settings));
 	const links = $derived(projectStore.links);
 	const colorByLink = $derived(settingsStore.settings.colorTokensByLink);
 

bitext/src/lib/components/preview/PreviewFontLoader.svelte

@@ -8,30 +8,39 @@
 
 	const googleUrls = $derived(visualizationGoogleFontUrls(s));
 
-	let loadedCustom = $state<{ source?: string; target?: string }>({});
+	let loadedCustom = $state<{ source?: string; target?: string; gloss?: string }>({});
 
 	$effect(() => {
 		if (!browser) return;
 		void s.sourceCustomFontName;
 		void s.targetCustomFontName;
+		void s.glossCustomFontName;
 		void s.sourceFontSource;
 		void s.targetFontSource;
+		void s.glossFontSource;
 
-		async function ensure(side: 'source' | 'target', name: string | undefined) {
+		async function ensure(side: 'source' | 'target' | 'gloss', name: string | undefined) {
 			if (!name) return;
-			const key = side === 'source' ? loadedCustom.source : loadedCustom.target;
+			const key =
+				side === 'source'
+					? loadedCustom.source
+					: side === 'target'
+						? loadedCustom.target
+						: loadedCustom.gloss;
 			if (key === name) return;
 			const blob = await loadCustomFontBlob(name);
 			if (!blob) return;
 			const ff = new FontFace(name, await blob.arrayBuffer());
 			await ff.load();
 			document.fonts.add(ff);
 			if (side === 'source') loadedCustom = { ...loadedCustom, source: name };
-			else loadedCustom = { ...loadedCustom, target: name };
+			else if (side === 'target') loadedCustom = { ...loadedCustom, target: name };
+			else loadedCustom = { ...loadedCustom, gloss: name };
 		}
 
 		if (s.sourceFontSource === 'custom') void ensure('source', s.sourceCustomFontName);
 		if (s.targetFontSource === 'custom') void ensure('target', s.targetCustomFontName);
+		if (s.glossFontSource === 'custom') void ensure('gloss', s.glossCustomFontName);
 	});
 </script>
 

bitext/src/lib/components/preview/TokenView.svelte

@@ -27,7 +27,11 @@
 
 	let hovering = $state(false);
 
-	const sz = $derived(settingsStore.settings.textSizePx);
+	const sz = $derived(
+		side === 'source'
+			? settingsStore.settings.sourceTextSizePx
+			: settingsStore.settings.targetTextSizePx
+	);
 	const palette = $derived(settingsStore.settings.palette);
 
 	const links = $derived(projectStore.links);

bitext/src/lib/components/seo/JsonLd.svelte

@@ -1,40 +1,62 @@
 <script lang="ts">
-	import { DEFAULT_DESCRIPTION, SITE_NAME } from '$lib/seo/metadata.js';
-
-	let { origin }: { origin: string } = $props();
-
-	const software = $derived({
-		'@context': 'https://schema.org',
-		'@type': 'SoftwareApplication',
-		name: SITE_NAME,
-		applicationCategory: 'EducationalApplication',
-		offers: { '@type': 'Offer', price: '0', priceCurrency: 'USD' },
-		description: DEFAULT_DESCRIPTION,
-		url: origin + '/'
-	});
-
-	const faq = $derived({
+	/**
+	 * FAQPage JSON-LD for the visible FAQ block in `SeoSections.svelte`.
+	 *
+	 * The `SoftwareApplication` schema used to live here too, but Google's docs require a real
+	 * `aggregateRating` or `review` on that type — with no legitimate review data we were shipping
+	 * invalid markup that Google ignores. We will add it back when there is something to rate.
+	 *
+	 * FAQ rich results are effectively restricted to well-known health/government sites since 2023
+	 * (https://developers.google.com/search/blog/2023/08/howto-faq-changes) so this markup is kept
+	 * mainly for semantic coverage and ordinary snippet quality. The answer text here mirrors the
+	 * visible FAQ copy on the page, which Google requires for any FAQPage markup.
+	 */
+	const faq = {
 		'@context': 'https://schema.org',
 		'@type': 'FAQPage',
 		mainEntity: [
 			{
 				'@type': 'Question',
-				name: 'Is this a machine aligner?',
+				name: 'What is this kind of tool called?',
+				acceptedAnswer: {
+					'@type': 'Answer',
+					text: 'The formal name is a word alignment visualizer. In everyday language people also call it a word-by-word translation tool, an interlinear-style visualizer, or simply a way to see which words match in a translation.'
+				}
+			},
+			{
+				'@type': 'Question',
+				name: 'Does it handle reordered translations?',
+				acceptedAnswer: {
+					'@type': 'Answer',
+					text: 'Yes. Curved connectors can cross each other freely, so sentences where the target language puts the verb, subject, or modifier in a different position still look clean. That is one of the main reasons this visualization is useful for language learning.'
+				}
+			},
+			{
+				'@type': 'Question',
+				name: 'Can I align phrases, not just single words?',
+				acceptedAnswer: {
+					'@type': 'Answer',
+					text: 'Yes. Select several words on one side before clicking the matching word or phrase on the other. The tool supports one-to-one, one-to-many, and many-to-many links, which often reflects real translations better than a strict one-word mapping.'
+				}
+			},
+			{
+				'@type': 'Question',
+				name: 'Is this a full machine translator?',
 				acceptedAnswer: {
 					'@type': 'Answer',
-					text: 'No — you align manually by clicking for full control.'
+					text: 'No. You provide both sentences — the tool does not translate them for you. The value is in the visualization and the manual control over which words count as matches.'
 				}
 			},
 			{
 				'@type': 'Question',
-				name: 'Can I export for print or slides?',
+				name: 'Can I export the alignment as an image?',
 				acceptedAnswer: {
 					'@type': 'Answer',
-					text: 'Yes — PNG, SVG, PDF, and HTML exports are supported.'
+					text: 'Yes. PNG, SVG, PDF, and a self-contained HTML file are all supported, along with a shareable link that encodes both sentences, every connector, and your visual settings.'
 				}
 			}
 		]
-	});
+	};
 
 	function safeJsonLd(obj: object): string {
 		return (
@@ -49,6 +71,5 @@
 <!-- JSON-LD is trusted (serialized from app constants); @html avoids nested script parsing issues -->
 <!-- eslint-disable svelte/no-at-html-tags -->
 <svelte:head>
-	{@html safeJsonLd(software)}
 	{@html safeJsonLd(faq)}
 </svelte:head>

bitext/src/lib/components/seo/SeoIntro.svelte

@@ -6,15 +6,10 @@
 		What this tool does
 	</h2>
 	<p>
-		This <strong class="font-medium text-gray-900 dark:text-white"
-			>word-by-word translation visualizer</strong
-		>
-		helps you build clean, shareable graphics that show how a
-		<strong class="font-medium text-gray-900 dark:text-white">bilingual sentence alignment</strong>
-		works between a source line and a target line. It is useful for language learners, conlangers, and
-		linguists who need a fast
-		<strong class="font-medium text-gray-900 dark:text-white"
-			>translation alignment visualizer</strong
-		> for lessons, articles, or social posts.
+		This page is a free word-by-word translation visualizer: a small utility for showing which words
+		in a sentence correspond to which words in its translation. Type the source on one line and the
+		translation on the other, click a word in the preview, then click its match on the other side,
+		and a connector is drawn between them. Linguists call this a word alignment. Most people just
+		want to see which words match without learning the term.
 	</p>
 </section>

bitext/src/lib/components/seo/SeoSections.svelte

@@ -3,36 +3,104 @@
 	aria-labelledby="seo-sections"
 >
 	<h2 id="seo-sections" class="sr-only font-heading">Guides</h2>
+
 	<h3 class="font-heading mt-6 text-xl font-semibold text-gray-900 dark:text-white">
-		What is word-by-word translation?
+		Why a visual beats plain text
 	</h3>
 	<p>
-		Word-by-word translation lines up each source word with the part of the translation that
-		corresponds to it. Unlike a free translation, this view makes morphemes and multi-word units
-		visible — especially when you add an <strong class="font-medium text-gray-900 dark:text-white"
-			>interlinear gloss</strong
-		> row.
+		A plain word-by-word translation under each line breaks down the moment the translation changes
+		word order, uses one word where the source uses three, or collapses several source words into a
+		single morpheme. Curved connectors solve all three cases: lines can cross, fan out from one word
+		to several, or converge from several words onto one. That is why a bilingual sentence alignment
+		is easier to read than an interlinear row when you care about structure, not only meaning.
 	</p>
+
 	<h3 class="font-heading mt-6 text-xl font-semibold text-gray-900 dark:text-white">
-		How to align words between languages
+		Great for language learners and teachers
 	</h3>
 	<p>
-		Type your <strong class="font-medium text-gray-900 dark:text-white">source sentence</strong> and
-		<strong class="font-medium text-gray-900 dark:text-white">target sentence</strong>, click a word
-		in the preview, then click the matching word on the other line — a connector is drawn right
-		away. You can link a word to multiple words on the other side. Click any connector to remove it.
-		A
-		<strong class="font-medium text-gray-900 dark:text-white"
-			>bilingual sentence alignment tool</strong
-		> like this keeps textbook examples legible at a glance.
+		Learners see at a glance why a translation says what it does — which source word became which
+		target word, which words are dropped, and where the target language moves things around.
+		Teachers can build handouts, slides, or flashcards by exporting PNG or SVG and embed the
+		finished diagram into a lesson without retyping anything.
 	</p>
+
 	<h3 class="font-heading mt-6 text-xl font-semibold text-gray-900 dark:text-white">
-		Interlinear gloss explanation
+		Great for conlangs, glosses, and linguistics posts
 	</h3>
 	<p>
-		A gloss is a short label (often grammatical or lexical) aligned with each word. With gloss
-		enabled in settings, source glosses appear above the source line and target glosses below the
-		target line whenever that side has at least one gloss filled — ideal for an
-		<strong class="font-medium text-gray-900 dark:text-white">interlinear gloss tool</strong> workflow.
+		For conlangers, the visualizer is a lightweight way to show how a constructed language maps onto
+		English in a specific example. Turn on the
+		<strong class="font-medium text-gray-900 dark:text-white">interlinear gloss</strong> rows to label
+		morphemes above and below the sentences, use the alternative token separators to split agglutinating
+		forms into their parts, and export the result for a blog post, a forum thread, or a conlang community
+		share.
+	</p>
+
+	<h3 class="font-heading mt-6 text-xl font-semibold text-gray-900 dark:text-white">
+		Word alignment vs interlinear translation
+	</h3>
+	<p>
+		Interlinear translators place a translation directly under each source word. That display is
+		compact and great for reading, but it hides reordering — if the translation swaps word order,
+		the row underneath lies about which word corresponds to which. Word alignment keeps both
+		sentences on their own line and draws connectors between them, so reorderings, splits, and
+		merges are obvious.
+	</p>
+
+	<h3 class="font-heading mt-6 text-xl font-semibold text-gray-900 dark:text-white">
+		Word alignment vs parallel text
+	</h3>
+	<p>
+		Parallel text usually means side-by-side bilingual reading — two columns, or a source paragraph
+		next to a translated paragraph, meant for studying in long form. This tool is a different job:
+		one sentence pair at a time, with explicit connectors showing which tokens correspond.
+	</p>
+
+	<h3 id="faq" class="font-heading mt-6 text-xl font-semibold text-gray-900 dark:text-white">
+		Questions people ask
+	</h3>
+
+	<h4 class="font-heading mt-4 text-base font-semibold text-gray-900 dark:text-white">
+		What is this kind of tool called?
+	</h4>
+	<p>
+		The formal name is a word alignment visualizer. In everyday language people also call it a
+		word-by-word translation tool, an interlinear-style visualizer, or simply a way to see which
+		words match in a translation.
+	</p>
+
+	<h4 class="font-heading mt-4 text-base font-semibold text-gray-900 dark:text-white">
+		Does it handle reordered translations?
+	</h4>
+	<p>
+		Yes. Curved connectors can cross each other freely, so sentences where the target language puts
+		the verb, subject, or modifier in a different position still look clean. That is one of the main
+		reasons this visualization is useful for language learning.
+	</p>
+
+	<h4 class="font-heading mt-4 text-base font-semibold text-gray-900 dark:text-white">
+		Can I align phrases, not just single words?
+	</h4>
+	<p>
+		Yes. Select several words on one side before clicking the matching word or phrase on the other.
+		The tool supports one-to-one, one-to-many, and many-to-many links, which often reflects real
+		translations better than a strict one-word mapping.
+	</p>
+
+	<h4 class="font-heading mt-4 text-base font-semibold text-gray-900 dark:text-white">
+		Is this a full machine translator?
+	</h4>
+	<p>
+		No. You provide both sentences — the tool does not translate them for you. The value is in the
+		visualization and the manual control over which words count as matches.
+	</p>
+
+	<h4 class="font-heading mt-4 text-base font-semibold text-gray-900 dark:text-white">
+		Can I export the alignment as an image?
+	</h4>
+	<p>
+		Yes. PNG, SVG, PDF, and a self-contained HTML file are all supported, along with a shareable
+		link that encodes both sentences, every connector, and your visual settings.
 	</p>
 </section>