fix: Thai/Pali typography — center-aligned, proper paragraph structure

webapp/tipitaka-web/src/components/layout/ReaderPanel.tsx

@@ -18,13 +18,30 @@ const SHELL_STYLES: Record<string, string> = {
 };
 
 // ── Render main text content ───────────────────────────────────────
-const renderContent = (text: string, fontSize: number) => (
-  <div
-    style={{ fontSize: `${fontSize}px`, lineHeight: 2.1 }}
-    className="text-justify leading-loose space-y-4 break-words"
-    dangerouslySetInnerHTML={{ __html: text.replace(/\n/g, '<br/>') }}
-  />
-);
+// CleanText returns paragraphs separated by \n\n. Lines within a paragraph
+// use \n (single). We split properly to preserve paragraph rhythm.
+const renderContent = (text: string, fontSize: number) => {
+  // Split into paragraphs by double newline
+  const paragraphs = text.split(/\n\n+/).filter(Boolean);
+  return (
+    <div
+      style={{ fontSize: `${fontSize}px`, lineHeight: '2.1' }}
+      className="reader-content text-center space-y-6"
+    >
+      {paragraphs.map((para, idx) => {
+        // Within a paragraph, preserve single line-breaks as <br/>
+        const html = para.replace(/\n/g, '<br/>');
+        return (
+          <p
+            key={idx}
+            className="leading-[2.1]"
+            dangerouslySetInnerHTML={{ __html: html }}
+          />
+        );
+      })}
+    </div>
+  );
+};
 
 const ReaderPanel: React.FC = () => {
   const {

webapp/tipitaka-web/src/index.css

@@ -6,7 +6,7 @@
   --color-parchment: #F9F4E8;
   --color-pali-text: #2C1810;
   
-  --font-sarabun: "Sarabun", sans-serif;
+  --font-sarabun: "Sarabun", "Noto Serif Thai", "Noto Sans Thai Looped", sans-serif;
 }
 
 :root {
@@ -34,6 +34,30 @@ body {
   width: 100%;
 }
 
+/* ── Thai/Pali Typography ──────────────────────────────────────── */
+
+/* Font-kerning and Thai OpenType features for the body reading text */
+.reader-content p {
+  /* Justification: inter-character adjusts spacing between Thai characters,
+     producing cleaner rag than inter-word (which needs spaces Thai doesn't have) */
+  text-justify: inter-character;
+  /* Prevent inappropriate line breaks in Thai (no spaces between words) */
+  word-break: keep-all;
+  overflow-wrap: break-word;
+  /* Enable font kerning */
+  font-kerning: normal;
+  /* OpenType features for Thai script rendering */
+  font-feature-settings: "kern" 1, "liga" 1, "clig" 1;
+  /* Balanced orphans/widows for paragraphs */
+  orphans: 2;
+  widows: 2;
+}
+
+/* Remove gap when <br/> is at the start of a <p> (edge case) */
+.reader-content p:first-child {
+  margin-top: 0;
+}
+
 /* Custom Utilities */
 .text-pali {
   font-family: var(--font-sarabun);