Fix: example graph missing in PDF (iframe doesn't render in print)

The "Try it live" section embeds viz-example.html via an <iframe>, which renders
blank in the PDF (and on mdBook's print page the relative src resolves wrong too).

- Mark the iframe .okf-screen-only and add a .okf-print-only fallback box that shows
  the full online URL of the interactive graph (absolute, so it works from the PDF).
- @media print toggles them (hide iframe, show fallback) in both TH and EN.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

Author: supachai-j

book-en/css/custom.css

@@ -78,3 +78,15 @@
 
 /* language switch button injected into the top menu bar */
 #okf-lang { font-weight: 700; }
+
+/* ── Print vs screen: iframes don't render in PDF, show a link fallback ── */
+.okf-print-only { display: none; }
+@media print {
+  .okf-screen-only { display: none !important; }
+  .okf-print-only { display: block !important; }
+}
+.okf-embed-fallback {
+  border: 1px dashed #8b5cf6; border-radius: 12px; padding: 1rem 1.2rem; margin: 0.6rem 0;
+  background: rgba(139, 92, 246, 0.07); line-height: 1.7;
+}
+.okf-embed-fallback .okf-url { font-family: ui-monospace, monospace; word-break: break-all; }

book-en/src/part4/validate-viz.md

@@ -51,7 +51,12 @@ directly inside, **fetching nothing from the network when opened**. Suitable for
 
 Below is the `viz.html` of the example wiki included in this project (click a node to see its details; try searching and filtering by type):
 
-<iframe src="../viz-example.html" title="OKF graph example" loading="lazy" style="width:100%;height:520px;border:1px solid var(--table-border-color,#ddd);border-radius:12px;margin:0.5rem 0;"></iframe>
+<iframe class="okf-screen-only" src="../viz-example.html" title="OKF graph example" loading="lazy" style="width:100%;height:520px;border:1px solid var(--table-border-color,#ddd);border-radius:12px;margin:0.5rem 0;"></iframe>
+
+<div class="okf-print-only okf-embed-fallback">
+🕸 <strong>Interactive graph</strong> — shown on the web only (iframes don't render in the PDF).<br>
+View it online at: <span class="okf-url">https://supachai-j.github.io/open-knowledge-format-starter/en/viz-example.html</span>
+</div>
 
 [Open full-screen →](../viz-example.html)
 

book/css/custom.css

@@ -78,3 +78,15 @@
 
 /* language switch button injected into the top menu bar */
 #okf-lang { font-weight: 700; }
+
+/* ── Print vs screen: iframes don't render in PDF, show a link fallback ── */
+.okf-print-only { display: none; }
+@media print {
+  .okf-screen-only { display: none !important; }
+  .okf-print-only { display: block !important; }
+}
+.okf-embed-fallback {
+  border: 1px dashed #8b5cf6; border-radius: 12px; padding: 1rem 1.2rem; margin: 0.6rem 0;
+  background: rgba(139, 92, 246, 0.07); line-height: 1.7;
+}
+.okf-embed-fallback .okf-url { font-family: ui-monospace, monospace; word-break: break-all; }

book/src/part4/validate-viz.md

@@ -51,7 +51,12 @@ python3 tools/okf-viz.py ./wiki --name "My Wiki"
 
 ด้านล่างคือ `viz.html` ของ wiki ตัวอย่างในโปรเจกต์นี้ (คลิกที่ node เพื่อดูรายละเอียด ลองค้นหา/กรองตาม type ได้):
 
-<iframe src="../viz-example.html" title="OKF graph ตัวอย่าง" loading="lazy" style="width:100%;height:520px;border:1px solid var(--table-border-color,#ddd);border-radius:12px;margin:0.5rem 0;"></iframe>
+<iframe class="okf-screen-only" src="../viz-example.html" title="OKF graph ตัวอย่าง" loading="lazy" style="width:100%;height:520px;border:1px solid var(--table-border-color,#ddd);border-radius:12px;margin:0.5rem 0;"></iframe>
+
+<div class="okf-print-only okf-embed-fallback">
+🕸 <strong>กราฟ interactive</strong> — แสดงเฉพาะบนหน้าเว็บ (iframe ไม่แสดงในไฟล์ PDF)<br>
+เปิดดูออนไลน์ได้ที่: <span class="okf-url">https://supachai-j.github.io/open-knowledge-format-starter/viz-example.html</span>
+</div>
 
 [เปิดแบบเต็มจอ →](../viz-example.html)