Add index.html

1 year ago · 7131fa9824
parent 14a2276c48
commit 7131fa9824
1 changed files with 79 additions and 0 deletions
--- a/index.html
+++ b/index.html
@ -0,0 +1,79 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Markdown Furigana to HTML</title>
+    <link rel="stylesheet" href="https://unpkg.com/missing.css@1.0.9/dist/missing.min.css">
+    <style>:root { cursor: inherit } button { cursor: pointer }</style>
+</head>
+<body>
+    <main>
+        <h1>Markdown Furigana to HTML</h1>
+        <p>
+            Welcome to Elnu's Markdown <a href="https://en.wikipedia.org/wiki/Furigana" target="_blank">Furigana</a> to HTML converter utility.
+            This converter uses the following syntax, which is a custom and <b>unofficial</b> extension to <a href="https://commonmark.org/" target="_blank">Markdown</a>:
+        </p>
+        <p class="center">
+            <span>
+                <code>[振]{ふ}り[仮]{が}[名]{な}</code>
+                &nbsp;&xrarr;&nbsp;
+                <span lang="ja"><ruby>振<rp>(</rp><rt>ふ</rt><rp>)</rp></ruby>り<ruby>仮<rp>(</rp><rt>が</rt><rp>)</rp></ruby><ruby>名<rp>(</rp><rt>な</rt><rp>)</rp></ruby></span>
+            </span>
+        </p>
+        <details>
+            <summary>How does it work?</summary>
+            <p>This syntax gets rendered to HTML as:</p>
+            <p class="center"><code>
+                &lt;span lang=&quot;ja&quot;&gt;<br>
+                &emsp;&lt;ruby&gt;振&lt;rp&gt;(&lt;/rp&gt;&lt;rt&gt;ふ&lt;/rt&gt;&lt;rp&gt;)&lt;/rp&gt;&lt;/ruby&gt;り<br>
+                &emsp;&lt;ruby&gt;仮&lt;rp&gt;(&lt;/rp&gt;&lt;rt&gt;が&lt;/rt&gt;&lt;rp&gt;)&lt;/rp&gt;&lt;/ruby&gt;<br>
+                &emsp;&lt;ruby&gt;名&lt;rp&gt;(&lt;/rp&gt;&lt;rt&gt;な&lt;/rt&gt;&lt;rp&gt;)&lt;/rp&gt;&lt;/ruby&gt;<br>
+                &lt;/span&gt;
+            </code></p>
+            <ul>
+                <li>
+                    <code>&lt;rp&gt;(&lt;/rp&gt;</code> and <code>&lt;rp&gt;)&lt;/rp&gt;</code>
+                    <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/rp" target="_blank">ruby fallback parentheses tags</a>
+                    are used to wrap furigana text with parentheses on legacy browsers that don't support <code>&lt;ruby&gt;</code>.
+                </li>
+                <li>
+                    Most browsers default to displaying Chinese character variants rather than Japanese.
+                    By wrapping the ruby text in <code>&lt;span lang=&quot;ja&quot;&gt;</code>, we
+                    can ensure that the Japanese variants will always be used, if available.
+                </li>
+            </ul>
+            <p>
+                For more information on this syntax, see
+                <a href="https://blog.elnu.com/2022/01/furigana-in-markdown-using-regular-expressions/" target="_blank">my blog post here</a>
+                on creating a parser regular expression and integrating it into the Hugo static site generator.
+            </p>
+        </details>
+        <div class="box">
+            <input id="input" type="text" class="width:100%" autocomplete="off">
+            <br>
+            <textarea id="output" class="width:100% mono-font" rows="8" style="resize: none" autocomplete="off" readonly>&lt;span lang=&quot;ja&quot;&gt;&lt;/span&gt;</textarea>
+            <p><button id="copy" class="padding float:right">Copy</button></p>
+            <br>
+        </div>
+    </main>
+    <script>
+        const input = document.getElementById("input");
+        const output = document.getElementById("output");
+        const copyButton = document.getElementById("copy");
+        input.addEventListener("keyup", e => {
+            output.value = `<span lang="ja">${input.value.replace(/\[([^\]]*)]{([^\}]*)}/g, "$1<rp>(</rp><rt>$2</rt><rp>)</rp>")}</span>`;
+            copyButton.innerHTML = "Copy";
+        });
+        copyButton.addEventListener("click", e => {
+            navigator.clipboard.writeText(output.value)
+                .then(
+                    () => "Copied!",
+                    () => "Copy failed",
+                )
+                .then(message => copyButton.innerHTML = message);
+            setTimeout(() => copyButton.innerHTML = "Copy", 1000);
+        });
+    </script>
+</body>
+</html>