@berlysia/vertical-writing-slide-system 0.1.2 → 0.2.0

package/README.md

@@ -139,7 +139,26 @@ Visual regression tests ensure consistent rendering across browsers, with specia
 
 ### Print Mode
 
-Print behavior may be unstable across different browsers and scenarios. Users should test print output in their target browser before final use.
+Print mode works reliably only in **Chromium-based browsers** (Chrome, Edge, etc.). Firefox and Safari have fundamental limitations with CSS print specifications.
+
+#### Firefox
+
+- `@page size` is not fully supported
+  - [Bug 851937](https://bugzilla.mozilla.org/show_bug.cgi?id=851937) - Implementing `@page { size }` (marked as RESOLVED FIXED, but may not be available in all versions)
+  - [Bug 851441](https://bugzilla.mozilla.org/show_bug.cgi?id=851441) - Implementing `@page` size attribute
+
+#### Safari / WebKit
+
+- `@page size` is ignored
+- `@page margin` does not work correctly
+- `page-break-after` / `break-after` do not work reliably
+- `page-break-inside: avoid` / `break-inside: avoid` are not respected
+  - [WebKit Bug 5097](https://bugs.webkit.org/show_bug.cgi?id=5097) - `page-break-after` does not work
+  - [MDN Browser Compat Issue #23178](https://github.com/mdn/browser-compat-data/issues/23178) - Safari does not handle print page margins correctly
+
+#### Recommendation
+
+For PDF export or printing, use a Chromium-based browser (Chrome, Edge, Arc, etc.).
 
 ### Browser-Specific Issues
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@berlysia/vertical-writing-slide-system",
-  "version": "0.1.2",
+  "version": "0.2.0",
   "type": "module",
   "bin": {
     "vertical-slides": "./cli.js"

package/src/App.tsx

@@ -1,23 +1,52 @@
 import { useState, useRef, useEffect, useCallback } from "react";
 import slidesContent, { slideScripts } from "virtual:slides.js";
 import { globalScriptManager } from "./script-manager";
+import { WritingModeHint } from "./WritingModeHint";
+
+type DisplayMode = "single" | "dual";
+
+// 動作確認用のテストスライドHTML
+const testSlideContent = `<div class="wrapper" style="display: grid; place-items: center;">
+
+<svg style="position: absolute; top: 0; left: 0; width: 8cqh; height: 8cqh;" viewBox="0 0 24 24" fill="currentColor">
+  <path d="M7 7L17 7L17 9L10.41 9L17 15.59L15.59 17L9 10.41L9 17L7 17Z"/>
+</svg>
+<svg style="position: absolute; top: 0; right: 0; width: 8cqh; height: 8cqh;" viewBox="0 0 24 24" fill="currentColor">
+  <path d="M17 7L7 7L7 9L13.59 9L7 15.59L8.41 17L15 10.41L15 17L17 17Z"/>
+</svg>
+<svg style="position: absolute; bottom: 0; left: 0; width: 8cqh; height: 8cqh;" viewBox="0 0 24 24" fill="currentColor">
+  <path d="M7 17L17 17L17 15L10.41 15L17 8.41L15.59 7L9 13.59L9 7L7 7Z"/>
+</svg>
+<svg style="position: absolute; bottom: 0; right: 0; width: 8cqh; height: 8cqh;" viewBox="0 0 24 24" fill="currentColor">
+  <path d="M17 17L7 17L7 15L13.59 15L7 8.41L8.41 7L15 13.59L15 7L17 7Z"/>
+</svg>
+<div class="wm-horizontal">動作確認</div>
+
+</div>`;
 
 function App() {
   const [writingMode, setWritingMode] = useState(() => {
     const saved = sessionStorage.getItem("slide-writing-mode");
     return saved ?? "vertical-rl";
   });
+  const [displayMode, setDisplayMode] = useState<DisplayMode>(() => {
+    const saved = sessionStorage.getItem("slide-display-mode");
+    return (saved as DisplayMode) ?? "single";
+  });
+  const [showTestSlide, setShowTestSlide] = useState(false);
+  const [controlsHidden, setControlsHidden] = useState(false);
   const isVertical = writingMode !== "horizontal-tb";
+  const isDualMode = displayMode === "dual";
   const slidesRef = useRef<HTMLDivElement>(null);
+  const slidesRefHorizontal = useRef<HTMLDivElement>(null);
 
-  const [fontSize, setFontSize] = useState(() => {
-    const saved = sessionStorage.getItem("slide-font-size");
-    return saved ? Number(saved) : 42;
-  });
-  const [withAbsoluteFontSize, setWithAbsoluteFontSize] = useState(() => {
-    const saved = sessionStorage.getItem("slide-with-absolute-font-size");
-    return saved === "true";
-  });
+  // 3秒後にコントロールを非表示
+  useEffect(() => {
+    const timer = setTimeout(() => {
+      setControlsHidden(true);
+    }, 3000);
+    return () => clearTimeout(timer);
+  }, []);
 
   // 状態変更時にsessionStorageに保存
   useEffect(() => {
@@ -25,15 +54,8 @@ function App() {
   }, [writingMode]);
 
   useEffect(() => {
-    sessionStorage.setItem("slide-font-size", fontSize.toString());
-  }, [fontSize]);
-
-  useEffect(() => {
-    sessionStorage.setItem(
-      "slide-with-absolute-font-size",
-      withAbsoluteFontSize.toString(),
-    );
-  }, [withAbsoluteFontSize]);
+    sessionStorage.setItem("slide-display-mode", displayMode);
+  }, [displayMode]);
 
   // スクリプトの読み込み
   useEffect(() => {
@@ -54,12 +76,23 @@ function App() {
   useEffect(() => {
     const hash = location.hash;
     if (hash) {
-      const target = document.querySelector(hash);
-      if (target) {
-        target.scrollIntoView();
+      // ハッシュからページ番号を抽出（#page-2 -> 2）
+      const match = hash.match(/^#page-(\d+)/);
+      if (match) {
+        const pageIndex = match[1];
+        if (isDualMode) {
+          // デュアルモードでは両方のスライドをスクロール
+          const verticalTarget = document.getElementById(`page-${pageIndex}-v`);
+          const horizontalTarget = document.getElementById(`page-${pageIndex}-h`);
+          verticalTarget?.scrollIntoView();
+          horizontalTarget?.scrollIntoView();
+        } else {
+          const target = document.getElementById(`page-${pageIndex}`);
+          target?.scrollIntoView();
+        }
       }
     }
-  }, [writingMode]);
+  }, [writingMode, isDualMode]);
 
   // IntersectionObserverでスクロール位置に応じてページ番号を変更
   useEffect(() => {
@@ -68,7 +101,7 @@ function App() {
         entries.forEach((entry) => {
           if (entry.isIntersecting) {
             const id = entry.target.id;
-            const index = parseInt(id.replace("page-", ""));
+            const index = parseInt(id.replace("page-", "").replace("-v", "").replace("-h", ""));
             history.replaceState(null, "", `#page-${index}`);
           }
         });
@@ -85,15 +118,82 @@ function App() {
     };
   }, []);
 
+  // デュアルモード時の同期スクロール
+  useEffect(() => {
+    if (!isDualMode) return;
+
+    const verticalSlides = slidesRef.current;
+    const horizontalSlides = slidesRefHorizontal.current;
+    if (!verticalSlides || !horizontalSlides) return;
+
+    let isSyncing = false;
+
+    const syncScroll = (source: HTMLElement, target: HTMLElement) => {
+      if (isSyncing) return;
+      isSyncing = true;
+
+      // 現在表示中のスライドを特定
+      const sourceSlides = source.querySelectorAll(".slide");
+      let visibleIndex = 0;
+      sourceSlides.forEach((slide, index) => {
+        const rect = slide.getBoundingClientRect();
+        const sourceRect = source.getBoundingClientRect();
+        // スライドの中心がコンテナ内にあるかチェック
+        const slideCenterX = rect.left + rect.width / 2;
+        const slideCenterY = rect.top + rect.height / 2;
+        if (
+          slideCenterX >= sourceRect.left &&
+          slideCenterX <= sourceRect.right &&
+          slideCenterY >= sourceRect.top &&
+          slideCenterY <= sourceRect.bottom
+        ) {
+          visibleIndex = index;
+        }
+      });
+
+      // ターゲット側の同じインデックスのスライドにスクロール
+      const targetSlide = target.querySelector(`[id$="-${visibleIndex === 0 ? "0" : visibleIndex}"]`) ||
+        target.querySelectorAll(".slide")[visibleIndex];
+      if (targetSlide) {
+        targetSlide.scrollIntoView({ behavior: "instant", block: "center", inline: "center" });
+      }
+
+      requestAnimationFrame(() => {
+        isSyncing = false;
+      });
+    };
+
+    const handleVerticalScroll = () => syncScroll(verticalSlides, horizontalSlides);
+    const handleHorizontalScroll = () => syncScroll(horizontalSlides, verticalSlides);
+
+    verticalSlides.addEventListener("scroll", handleVerticalScroll);
+    horizontalSlides.addEventListener("scroll", handleHorizontalScroll);
+
+    return () => {
+      verticalSlides.removeEventListener("scroll", handleVerticalScroll);
+      horizontalSlides.removeEventListener("scroll", handleHorizontalScroll);
+    };
+  }, [isDualMode]);
+
   const gotoNextSlide = useCallback((forward = true) => {
     const currentHash = location.hash;
-    const currentIndex = parseInt(currentHash.replace("#page-", ""));
+    const currentIndex = parseInt(currentHash.replace("#page-", "").replace("-v", "").replace("-h", "")) || 0;
     const nextIndex = forward ? currentIndex + 1 : currentIndex - 1;
     if (nextIndex < 0 || nextIndex >= slidesContent.length) {
       return;
     }
-    location.hash = `#page-${nextIndex}`;
-  }, []);
+
+    if (isDualMode) {
+      // デュアルモードでは両方のスライドをスクロール
+      const verticalSlide = document.getElementById(`page-${nextIndex}-v`);
+      const horizontalSlide = document.getElementById(`page-${nextIndex}-h`);
+      verticalSlide?.scrollIntoView({ behavior: "instant", block: "center", inline: "center" });
+      horizontalSlide?.scrollIntoView({ behavior: "instant", block: "center", inline: "center" });
+      history.replaceState(null, "", `#page-${nextIndex}`);
+    } else {
+      location.hash = `#page-${nextIndex}`;
+    }
+  }, [isDualMode]);
 
   // keydownイベントでページ送り
   useEffect(() => {
@@ -123,93 +223,118 @@ function App() {
     };
   }, [gotoNextSlide]);
 
+  const renderSlide = (content: (typeof slidesContent)[number], index: number, suffix: string = "") => {
+    if (typeof content === "string") {
+      return (
+        <div className="slide" id={`page-${index}${suffix}`} key={`${index}${suffix}`}>
+          <div
+            className="slide-content"
+            dangerouslySetInnerHTML={{
+              __html: content,
+            }}
+          />
+        </div>
+      );
+    } else {
+      const SlideComponent = content;
+      return (
+        <div className="slide" id={`page-${index}${suffix}`} key={`${index}${suffix}`}>
+          <div className="slide-content">
+            <SlideComponent />
+          </div>
+        </div>
+      );
+    }
+  };
+
   return (
     <div
-      className="slides-container"
+      className={`slides-container ${isDualMode ? "dual-mode" : ""}`}
       style={{ "--slide-writing-mode": writingMode }}
     >
-      <div className="slides" ref={slidesRef}>
-        {slidesContent.map((content, index) => {
-          if (typeof content === "string") {
-            return (
-              <div className="slide" id={`page-${index}`} key={index}>
-                <div
-                  className="slide-content"
-                  style={
-                    withAbsoluteFontSize ? { fontSize: `${fontSize}px` } : {}
-                  }
-                  dangerouslySetInnerHTML={{
-                    __html: content,
-                  }}
-                />
-              </div>
-            );
-          } else {
-            const SlideComponent = content;
-            return (
-              <div className="slide" id={`page-${index}`} key={index}>
-                <div
-                  className="slide-content"
-                  style={
-                    withAbsoluteFontSize ? { fontSize: `${fontSize}px` } : {}
-                  }
-                >
-                  <SlideComponent />
-                </div>
-              </div>
-            );
-          }
-        })}
-      </div>
-      <div className="controls">
-        <div>
+      {isDualMode ? (
+        <div className="dual-slides-wrapper">
+          <div className="dual-pane">
+            <div className="slides" ref={slidesRef} style={{ "--slide-writing-mode": "vertical-rl" } as React.CSSProperties}>
+              {slidesContent.map((content, index) => renderSlide(content, index, "-v"))}
+            </div>
+          </div>
+          <div className="dual-pane">
+            <div className="slides" ref={slidesRefHorizontal} style={{ "--slide-writing-mode": "horizontal-tb" } as React.CSSProperties}>
+              {slidesContent.map((content, index) => renderSlide(content, index, "-h"))}
+            </div>
+          </div>
+        </div>
+      ) : (
+        <div className="slides" ref={slidesRef}>
+          {slidesContent.map((content, index) => renderSlide(content, index))}
+        </div>
+      )}
+      <div className={`controls ${controlsHidden ? "hidden" : ""}`}>
+        <div className="controls-group">
+          <button
+            type="button"
+            onClick={() =>
+              (location.hash = `#page-${slidesContent.length - 1}`)
+            }
+          >
+            末尾
+          </button>
           <button type="button" onClick={() => gotoNextSlide()}>
             次
           </button>
+          <button type="button" onClick={() => gotoNextSlide(false)}>
+            前
+          </button>
+          <button type="button" onClick={() => (location.hash = "#page-0")}>
+            先頭
+          </button>
+        </div>
+        <div className="controls-group">
+          <button
+            type="button"
+            onClick={() =>
+              setDisplayMode(isDualMode ? "single" : "dual")
+            }
+          >
+            {isDualMode ? "単一" : "並列"}
+          </button>
           <button
             type="button"
             onClick={() =>
               setWritingMode(isVertical ? "horizontal-tb" : "vertical-rl")
             }
+            disabled={isDualMode}
           >
-            {isVertical ? "横書きにする" : "縦書きにする"}
+            {isVertical ? "横書き" : "縦書き"}
           </button>
-          <button type="button" onClick={() => gotoNextSlide(false)}>
-            前
+          <button type="button" onClick={() => setShowTestSlide(true)}>
+            確認
           </button>
         </div>
-        <div>
-          <label>
-            フォントサイズを指定する
-            <input
-              type="checkbox"
-              checked={withAbsoluteFontSize}
-              onChange={(e) => setWithAbsoluteFontSize(e.target.checked)}
-            />
-          </label>
-          <label>
-            <input
-              type="number"
-              min="10"
-              step="1"
-              value={fontSize}
-              onChange={(e) => {
-                const t = Number(e.target.value);
-                setFontSize(Number.isNaN(t) || t < 4 ? 4 : t);
-              }}
-              onKeyDown={(e) => {
-                if (e.key === "ArrowUp" || e.key === "ArrowDown") {
-                  e.stopPropagation();
-                }
-              }}
-              style={{
-                inlineSize: `${fontSize.toString(10).length / 2 + 2}em`,
-              }}
-            />
-            px
-          </label>
-        </div>
       </div>
+      <WritingModeHint
+        onSwitchToHorizontal={() => setWritingMode("horizontal-tb")}
+        isHorizontal={!isVertical}
+      />
+      {showTestSlide && (
+        <div
+          className="test-slide-overlay"
+          onClick={() => setShowTestSlide(false)}
+        >
+          <div
+            className="test-slide-modal"
+            style={{ "--slide-writing-mode": writingMode } as React.CSSProperties}
+          >
+            <div className="slide">
+              <div
+                className="slide-content"
+                dangerouslySetInnerHTML={{ __html: testSlideContent }}
+              />
+            </div>
+          </div>
+        </div>
+      )}
     </div>
   );
 }

package/src/WritingModeHint.tsx

@@ -0,0 +1,89 @@
+import { useState, useEffect, useCallback } from "react";
+import { isUserInCJKLocale } from "./language-utils";
+
+interface WritingModeHintProps {
+  onSwitchToHorizontal?: () => void;
+  isHorizontal: boolean;
+}
+
+/**
+ * 自動翻訳検出とCJK圏外ユーザー向けの横書きモードヒント
+ */
+export function WritingModeHint({
+  onSwitchToHorizontal,
+  isHorizontal,
+}: WritingModeHintProps) {
+  const [visible, setVisible] = useState(false);
+
+  const dismiss = useCallback(() => {
+    setVisible(false);
+  }, []);
+
+  const handleSwitchClick = useCallback(() => {
+    onSwitchToHorizontal?.();
+    dismiss();
+  }, [onSwitchToHorizontal, dismiss]);
+
+  useEffect(() => {
+    const STORAGE_KEY = "writingModeHintShown";
+
+    // 初回チェック: CJK圏外ユーザーかつセッション内で未表示なら表示
+    if (!isUserInCJKLocale() && !sessionStorage.getItem(STORAGE_KEY)) {
+      setVisible(true);
+      sessionStorage.setItem(STORAGE_KEY, "true");
+      return;
+    }
+
+    // 自動翻訳検出: Google翻訳等はhtml要素のclass/langを変更する
+    // 翻訳時は毎回表示（sessionStorageは使わない）
+    const checkTranslation = () => {
+      const html = document.documentElement;
+
+      // Google翻訳の検出
+      const hasTranslatedClass =
+        html.classList.contains("translated-ltr") ||
+        html.classList.contains("translated-rtl");
+
+      // lang属性の変更検出（元が'ja'から変わった場合）
+      const langChanged = html.lang !== "" && html.lang !== "ja";
+
+      if (hasTranslatedClass || langChanged) {
+        setVisible(true);
+      }
+    };
+
+    const observer = new MutationObserver(checkTranslation);
+
+    observer.observe(document.documentElement, {
+      attributes: true,
+      attributeFilter: ["class", "lang"],
+    });
+
+    return () => {
+      observer.disconnect();
+    };
+  }, []);
+
+  // 横書きの場合は表示しない
+  if (!visible || isHorizontal) return null;
+
+  return (
+    <div className="writing-mode-hint">
+      <div className="writing-mode-hint-content">
+        <p>
+          💡 This presentation uses vertical writing.
+          <br />
+          For translated content, horizontal mode may be easier to read.
+        </p>
+        <div className="writing-mode-hint-actions">
+          <button type="button" onClick={handleSwitchClick} translate="no">
+            Switch to Horizontal
+          </button>
+          <button type="button" onClick={dismiss} translate="no">
+            Keep Vertical
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+}

package/src/index.css

@@ -1,7 +1,9 @@
 @import "screen.css" screen;
 @import "print.css" print;
 
-* {
+*,
+::before,
+::after {
   box-sizing: border-box;
 }
 
@@ -11,6 +13,7 @@ html {
     sans-serif;
   font-weight: 600;
   font-style: normal;
+  text-spacing-trim: trim-start;
 
   /* Prevent text size adjustments */
   -webkit-text-size-adjust: 100%;
@@ -19,6 +22,12 @@ html {
   text-rendering: geometricPrecision;
 }
 
+body {
+  overflow-wrap: anywhere;
+  word-break: normal;
+  line-break: strict;
+}
+
 code {
   font-family: "Noto Sans Mono", monospace;
   font-optical-sizing: auto;
@@ -32,6 +41,24 @@ code {
 }
 
 .slide-content {
+  /* セマンティックフォントサイズ (cqhベース) */
+  --fs-caption: 4cqh;
+  --fs-small: 4cqh;
+  --fs-body: 5cqh;
+  --fs-heading-3: 5cqh;
+  --fs-heading-2: 6cqh;
+  --fs-heading-1: 7cqh;
+  --fs-display: 8cqh;
+
+  /* セマンティックスペーシング */
+  --space-heading-gap: 1cqh;
+  --space-paragraph-gap: 3cqh;
+  --space-section-gap: 4cqh;
+  --space-list-gap: 5cqh;
+  --space-wrapper: 4cqh;
+
+  font-size: var(--fs-body);
+
   width: 100%;
   height: 100%;
 
@@ -40,7 +67,7 @@ code {
   .wrapper {
     width: 100%;
     height: 100%;
-    padding: 2rem;
+    padding: var(--space-wrapper);
 
     position: relative;
 
@@ -51,6 +78,7 @@ code {
       align-items: center;
     }
   }
+
   .header-and-content {
     display: block flex;
     flex-direction: column;
@@ -70,35 +98,40 @@ code {
   }
 
   h1 {
-    font-size: 1.4em;
+    font-size: var(--fs-heading-1);
     font-weight: bold;
     margin: 0;
-    margin-block-end: 0.2em;
+    margin-block-end: var(--space-heading-gap);
   }
 
   h2 {
-    font-size: 1.2em;
+    font-size: var(--fs-heading-2);
     font-weight: bold;
     margin: 0;
-    margin-block-end: 0.2em;
+    margin-block-end: var(--space-heading-gap);
   }
 
   h3 {
-    font-size: 1em;
+    font-size: var(--fs-heading-3);
     font-weight: bold;
     margin: 0;
-    margin-block-end: 0.2em;
+    margin-block-end: var(--space-heading-gap);
+  }
+
+  h1, h2, h3, h4, h5, h6 {
+    text-wrap: pretty;
   }
 
   ul,
   ol {
     list-style-position: outside;
     margin: 0;
-    margin-block-end: 1em;
+    margin-block-end: var(--space-section-gap);
+    padding-inline-start: var(--space-list-gap);
   }
   ul ul,
   ol ol {
-    margin-block-end: 1em;
+    margin-block-end: var(--space-section-gap);
   }
   ul ul ul,
   ol ol ol {
@@ -106,7 +139,25 @@ code {
   }
   p {
     margin: 0;
-    margin-block-end: 0.5em;
+    margin-block-end: var(--space-paragraph-gap);
+  }
+
+  figure {
+    writing-mode: horizontal-tb;
+    margin: auto;
+    padding: var(--space-section-gap);
+  }
+
+  figcaption {
+    text-align: center;
+    font-size: var(--fs-caption);
+    color: #888;
+  }
+
+  a:any-link {
+    text-decoration: underline;
+    text-underline-position: left;
+    color: #22c;
   }
 
   .wm-toggle {

package/src/language-utils.ts

@@ -0,0 +1,26 @@
+/**
+ * CJK（中国語・日本語・韓国語）言語圏の判定ユーティリティ
+ */
+
+const CJK_LANGUAGE_CODES = [
+  "ja", // 日本語
+  "zh", // 中国語
+  "ko", // 韓国語
+  "yue", // 広東語
+];
+
+/**
+ * 言語コードがCJK言語かどうかを判定
+ */
+export function isCJKLanguage(lang: string): boolean {
+  const primaryCode = lang.split("-")[0].toLowerCase();
+  return CJK_LANGUAGE_CODES.includes(primaryCode);
+}
+
+/**
+ * ユーザーの優先言語がCJK圏かどうかを判定
+ */
+export function isUserInCJKLocale(): boolean {
+  return isCJKLanguage(navigator.language);
+}
+

package/src/print.css

@@ -15,7 +15,7 @@
   --print-page-height: 1080px;
   --print-slide-width: calc(var(--print-page-width) - 0px);
   --print-slide-height: calc(var(--print-page-height) - 0px);
-  --print-slide-font-size: calc(var(--print-slide-height) / 20);
+  --print-slide-font-size: 5cqh; /* 既存との互換性 */
 }
 
 @page {
@@ -49,12 +49,24 @@ body {
   display: none !important;
 }
 
+/* Container definitions for cqh units */
+.slides-container {
+  container-name: slide-container;
+  container-type: size;
+  width: var(--print-slide-width);
+  height: var(--print-slide-height);
+}
+
 /* Slides wrapper adjustments */
 .slides {
   position: relative;
 }
 
 .slide {
+  /* Container for cqh units */
+  container-name: slide-container;
+  container-type: size;
+
   /* Size and position */
   width: 100%;
   height: 100%;
@@ -82,6 +94,7 @@ body {
   writing-mode: inherit !important;
 }
 
+
 .debug {
   background-color: orange;
 

package/src/remark-slide-images.ts

@@ -4,12 +4,30 @@ import type { Root, Image } from "mdast";
 
 interface RemarkSlideImagesOptions {
   base: string;
+  collection?: string; // フルURL時のみ使用（複数スライドホスティング対応）
+}
+
+/**
+ * baseとcollectionから画像パスのプレフィックスを生成
+ * - フルURL（http/https）の場合: collection名を含める
+ * - 相対パスの場合: collection名なし（ローカル開発用）
+ */
+function buildImagePathPrefix(base: string, collection?: string): string {
+  if (
+    collection &&
+    (base.startsWith("http://") || base.startsWith("https://"))
+  ) {
+    const normalizedBase = base.endsWith("/") ? base : `${base}/`;
+    return `${normalizedBase}${collection}/slide-assets/images/`;
+  }
+  return `${base}slide-assets/images/`;
 }
 
 const remarkSlideImages: Plugin<[RemarkSlideImagesOptions], Root> = (
   options,
 ) => {
-  const { base } = options;
+  const { base, collection } = options;
+  const imagePathPrefix = buildImagePathPrefix(base, collection);
 
   return (tree) => {
     visit(tree, (node) => {
@@ -17,7 +35,7 @@ const remarkSlideImages: Plugin<[RemarkSlideImagesOptions], Root> = (
       if (node.type === "image") {
         const imageNode = node as Image;
         if (imageNode.url.startsWith("@slide/")) {
-          imageNode.url = `${base}slide-assets/images/${imageNode.url.slice(7)}`;
+          imageNode.url = `${imagePathPrefix}${imageNode.url.slice(7)}`;
         }
       }
 
@@ -35,7 +53,7 @@ const remarkSlideImages: Plugin<[RemarkSlideImagesOptions], Root> = (
           typeof src.value === "string" &&
           src.value.startsWith("@slide/")
         ) {
-          src.value = `${base}slide-assets/images/${src.value.slice(7)}`;
+          src.value = `${imagePathPrefix}${src.value.slice(7)}`;
         }
       }
 
@@ -50,7 +68,7 @@ const remarkSlideImages: Plugin<[RemarkSlideImagesOptions], Root> = (
             (_, attributes, src) => {
               return `<img ${attributes.replace(
                 src,
-                `${base}slide-assets/images/${src.slice(7)}`,
+                `${imagePathPrefix}${src.slice(7)}`,
               )}>`;
             },
           );

package/src/screen.css

@@ -25,7 +25,7 @@ body,
   align-items: center;
 
   border: 1px solid #ccc;
-  background-color: #eee;
+  background-color: #666;
 }
 
 .slides {
@@ -80,15 +80,68 @@ body,
   display: none;
 }
 
+/* デュアルモード（縦書き・横書き並列表示） */
+.slides-container.dual-mode {
+  display: flex;
+  flex-direction: column;
+}
+
+.dual-slides-wrapper {
+  display: flex;
+  width: 100%;
+  height: 100%;
+  gap: 4px;
+  background-color: #666;
+}
+
+/* 横長画面: 左右に並べる */
+@container slide-container (aspect-ratio > 1) {
+  .dual-slides-wrapper {
+    flex-direction: row;
+  }
+}
+
+/* 縦長画面: 上下に並べる */
+@container slide-container (aspect-ratio <= 1) {
+  .dual-slides-wrapper {
+    flex-direction: column;
+  }
+}
+
+/* デュアルモード時の各ペイン */
+.dual-pane {
+  /* flexアイテムとして半分のスペースを取る */
+  flex: 1;
+  min-width: 0;
+  min-height: 0;
+  /* container queryの基準にする */
+  container-type: size;
+  container-name: slide-container;
+  /* 中の.slidesを中央配置 */
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  /* 背景色で区別 */
+  background-color: #666;
+}
+
+/* デュアルモード時の.slidesは元のスタイルをそのまま使う（cqw/cqhが.dual-paneを参照） */
+
 .controls {
   position: fixed;
   left: 16px;
   bottom: 16px;
   background-color: rgba(255, 255, 255, 0.9);
+  padding: 12px;
+  border-radius: 12px;
+  transition: opacity 0.3s ease-out;
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.controls.hidden {
   opacity: 0;
-  padding: 16px;
-  border-radius: 8px;
-  transition: opacity 0.2s ease-out;
 }
 
 .controls:hover,
@@ -96,6 +149,124 @@ body,
   opacity: 1;
 }
 
-.slide-content {
-  font-size: 5cqh;
+.controls-group {
+  display: flex;
+  gap: 6px;
+}
+
+.controls button {
+  padding: 12px 16px;
+  font-size: 14px;
+  font-weight: 600;
+  border: none;
+  border-radius: 8px;
+  background-color: #e8e8e8;
+  cursor: pointer;
+  transition: background-color 0.15s;
+  min-width: 48px;
+}
+
+.controls button:hover {
+  background-color: #d0d0d0;
+}
+
+.controls button:active {
+  background-color: #c0c0c0;
+}
+
+.controls button:disabled {
+  opacity: 0.4;
+  cursor: not-allowed;
+}
+
+/* 動作確認モーダル */
+.test-slide-overlay {
+  position: fixed;
+  inset: 0;
+  background-color: rgba(0, 0, 0, 0.7);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  z-index: 1000;
+  /* container queryの基準にする */
+  container-type: size;
+}
+
+.test-slide-modal {
+  /* .slidesと同じ寸法計算 */
+  width: 100cqw;
+  height: 100cqh;
+  max-width: calc(100cqh * 16 / 9 - 0.01px);
+  max-height: calc(100cqw * 9 / 16 - 0.01px);
+  /* container queryの基準にする */
+  container-type: size;
+  container-name: slide-container;
+}
+
+/* 横書きモードヒント（翻訳ユーザー向け） */
+.writing-mode-hint {
+  position: fixed;
+  bottom: 80px;
+  left: 16px;
+  max-width: 360px;
+  background-color: rgba(255, 255, 255, 0.95);
+  border-radius: 8px;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+  z-index: 100;
+  animation: hint-slide-in 0.3s ease-out;
+}
+
+@keyframes hint-slide-in {
+  from {
+    opacity: 0;
+    transform: translateY(20px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+.writing-mode-hint-content {
+  padding: 16px;
+}
+
+.writing-mode-hint-content p {
+  margin: 0 0 12px 0;
+  font-size: 14px;
+  line-height: 1.5;
+  color: #333;
+}
+
+.writing-mode-hint-actions {
+  display: flex;
+  gap: 8px;
+}
+
+.writing-mode-hint-actions button {
+  flex: 1;
+  padding: 8px 12px;
+  border: none;
+  border-radius: 4px;
+  font-size: 13px;
+  cursor: pointer;
+  transition: background-color 0.15s;
+}
+
+.writing-mode-hint-actions button:first-child {
+  background-color: #0066cc;
+  color: white;
+}
+
+.writing-mode-hint-actions button:first-child:hover {
+  background-color: #0055aa;
+}
+
+.writing-mode-hint-actions button:last-child {
+  background-color: #e0e0e0;
+  color: #333;
+}
+
+.writing-mode-hint-actions button:last-child:hover {
+  background-color: #d0d0d0;
 }

package/src/vite-plugin-slides.ts

@@ -54,6 +54,7 @@ function rehypeExtractStyles(extractedStyles: string[]) {
 async function processMarkdown(
   markdown: string,
   base: string,
+  collection: string,
   extractedStyles: string[],
   extractedScripts: ParsedScript,
 ) {
@@ -65,7 +66,7 @@ async function processMarkdown(
 
   return await unified()
     .use(remarkParse)
-    .use(remarkSlideImages, { base })
+    .use(remarkSlideImages, { base, collection })
     .use(remarkRehype, { allowDangerousHtml: true })
     .use(rehypeExtractStyles(extractedStyles))
     .use(rehypeStringify, { allowDangerousHtml: true })
@@ -388,7 +389,13 @@ export default async function slidesPlugin(
           const extractedScripts: ParsedScript = { external: [], inline: [] };
           const processedSlides = await Promise.all(
             slides.map((slide) =>
-              processMarkdown(slide, base, extractedStyles, extractedScripts),
+              processMarkdown(
+                slide,
+                base,
+                config.collection,
+                extractedStyles,
+                extractedScripts,
+              ),
             ),
           );
 
@@ -457,7 +464,9 @@ export default async function slidesPlugin(
               development: false,
               jsxImportSource: "react",
               jsxRuntime: "automatic",
-              remarkPlugins: [[remarkSlideImages, { base }]],
+              remarkPlugins: [
+                [remarkSlideImages, { base, collection: config.collection }],
+              ],
             });
             return result.value as string;
           }),