initial commitHEADmain

1 files changed, 63 insertions, 0 deletions

diff --git a/3-ruby-tags/remarks.markdown b/3-ruby-tags/remarks.markdown
new file mode 100644
index 0000000..2621a32
--- /dev/null
+++ b/3-ruby-tags/remarks.markdown
@@ -0,0 +1,63 @@
+# Ruby Tags
+
+
+
+## Remarks
+
+This program utilizes `ruby.wasm`. To run it, first launch an HTTP server:
+
+```
+$ bundle install
+$ bundle exec ruby -run -e httpd
+```
+
+Then access <http://127.0.0.1:8080/>.
+
+NOTE: gems are used only for the server.
+
+It has been tested under the following environment:
+
+```
+$ ruby --version
+ruby 3.4.1 (2024-12-25 revision 48d4efcb85) +PRISM [x86_64-linux]
+```
+
+`ruby.wasm` version:
+
+```
+<script src="https://cdn.jsdelivr.net/npm/@ruby/3.4-wasm-wasi@2.7.1/dist/browser.script.iife.js"></script>
+```
+
+
+
+## Description
+
+This is a quine-like program that renders its own source code as HTML elements in browser.
+In addition, it highlights the source code and adds "ruby" annotations for each token.
+
+Example for `<ruby>` tag: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/ruby
+
+> ```
+> <ruby> 明日 <rp>(</rp><rt>Ashita</rt><rp>)</rp> </ruby>
+> ```
+
+The pronounciation table is compressed and hard-coded to `entry.rb`.
+
+
+
+## Internals
+
+### Syntax Highlighting
+
+Syntax highlighting is powered by Prism, a recently introduced parser/lexer ecosystem. The program calls `Prism.lex()` and iterates over the resulting token stream to apply highlighting.
+
+### Ruby Annotations
+
+Initially, I tried adding ruby annotations to *every* token. However, the pronounciation data for all tokens was too large to fit within the size limit. Although I implemented a simple compression algorithm (see `kana()` function), I finally had to reduce the table size.
+
+### Compression Algorithm for the Pronounciation Table
+
+The compression algorithm is fairly simple: each Katakana letter is encoded as a two-digit integer, offset by U+30A0.
+There are certainly more sophisticated approaches.
+
+Because the `index.html` has no strict size limit according to the regulation, the table data could be embedded there instead. However, that approach was not very elegant.