From e2b017b302abb1e0ceab75fcf050d1ebe6b98810 Mon Sep 17 00:00:00 2001
From: Kurogoma <gogottt2009-hp@yahoo.co.jp>
Date: Mon, 8 Jan 2024 16:30:27 +0900
Subject: [PATCH] Specify svg max size by CSS

---
 interactive/index.html                        | 2 +-
 interactive/src/components/Preview.module.css | 5 +++++
 interactive/src/components/Preview.tsx        | 4 ----
 3 files changed, 6 insertions(+), 5 deletions(-)

diff --git a/interactive/index.html b/interactive/index.html
index bde963e..f29d5f1 100644
--- a/interactive/index.html
+++ b/interactive/index.html
@@ -139,7 +139,7 @@ <h3>使い方</h3>
 <li>左側の一覧からデザインを選ぶと右側の数値が変わります。</li>
 <li>すべての値は相対値です（単位はありません）。自動的に拡大・縮小されます。</li>
 <li>デザイン上の都合により、いくつかの値は他の値によって範囲が制限されます（「垂直ステムの間隔」は常に「垂直ステムの太さ」より大きい、など）。</li>
-<li>表示部の高さはウィンドウの幅によって変化します。画面が横長の場合はウィンドウの幅を狭めて「反映」ボタンをクリックするといいかもしれません。</li>
+<li>表示部の高さはウィンドウの幅によって変化します。画面が横長の場合はウィンドウの幅を狭めるといいかもしれません。</li>
 <li>デフォルトではテキスト・値の変更は即座に反映されます。重すぎる場合は「自動プレビュー」のチェックを外してみるといいかもしれません（反映するには「反映」ボタンを押します）。</li>
 </ul>
 </div>
diff --git a/interactive/src/components/Preview.module.css b/interactive/src/components/Preview.module.css
index 831a8ff..bf56482 100644
--- a/interactive/src/components/Preview.module.css
+++ b/interactive/src/components/Preview.module.css
@@ -2,3 +2,8 @@
   background-color: #fff;
   color: #000;
 }
+
+.chararea > svg {
+  width: 100%;
+  aspect-ratio: 4 / 1;
+}
diff --git a/interactive/src/components/Preview.tsx b/interactive/src/components/Preview.tsx
index 14a724d..73a6f14 100644
--- a/interactive/src/components/Preview.tsx
+++ b/interactive/src/components/Preview.tsx
@@ -15,15 +15,11 @@ export const Preview: FC<PreviewProps> = ({
   width,
   height,
 }: PreviewProps) => {
-  const maxWidth = document.body.clientWidth - 100;
-  const maxHeight = maxWidth * 0.25;
   return (
     <div className={style.chararea}>
       <svg
         viewBox={`0 0 ${width} ${height}`}
         preserveAspectRatio="xMinYMid meet"
-        width={maxWidth}
-        height={maxHeight}
       >
         {glyphs.map(({ dList, offsetX }, i) => (
           <g key={i} transform={`translate(${offsetX},0)`}>