Feature Demo

This page demonstrates the two main features: annotated text with side footnotes and connection diagrams.

---

1. Annotated Text with Side Footnotes

Use the annotated text component to display text with footnotes in a side column. Each footnote can have a different color.

古之學者必有師。師者，所以傳道受業解惑也。人非生而知之者，孰能無惑？惑而不從師，其為惑也，終不解矣。

---

2. Connection Diagrams

Use connection diagrams to show word-by-word relationships between two sentences. Lines connect words from the top sentence to words in the bottom sentence.

Example: Classical Chinese to Modern Chinese

學

而

時

習

學習

而且

時常

溫習

Example: Cross-connections

The

cat

sits

here

貓

這裡

那

坐

---

How to Use These Features

Annotated Text (Simple Syntax with Auto-Numbering)

Footnotes are now automatically numbered by label type. Just specify the label (like “注”, “解讀”, “脂批”) and the system adds the number for you.

Usage: In your content, use the fn.html include with a label parameter:

{% capture main_text %}
<p>
  Your text{% include fn.html label="注" color="#e74c3c" text="First note explanation" %} here.
  More text{% include fn.html label="解讀" color="#3498db" text="First interpretation" %} continues.
  Another note{% include fn.html label="注" color="#e74c3c" text="Second note explanation" %} follows.
</p>
{% endcapture %}

{% include annotated_text.html content=main_text %}

This will display as: 注1, 解讀1, 注2 - each label type gets its own counter!

Connection Diagrams

To create a connection diagram, use this structure:

<div class="connection-diagram" data-pairs='[[0,1],[1,0],[2,2]]'>
  <div class="connection-row connection-row-top">
    <div class="word-box word-top" data-index="0">Word1</div>
    <div class="word-box word-top" data-index="1">Word2</div>
  </div>
  <svg class="connection-lines"></svg>
  <div class="connection-row connection-row-bottom">
    <div class="word-box word-bottom" data-index="0">Translation1</div>
    <div class="word-box word-bottom" data-index="1">Translation2</div>
  </div>
</div>

The data-pairs attribute defines which words connect:

• [0,1] means word at index 0 (top) connects to word at index 1 (bottom)
• Each connection gets a different color automatically