Ruby Annotation Demo
See how text is annotated with ruby (pronunciation guides) for different languages. Interactive demonstration of transcription display.
View Mode
Select Language
Transcription System
Current: paiboon
Display Level
Plain Thai text only
Thai Sentence
English Translation:
Hello, pleased to meet you
Level Comparison
Basic Text
Just the original script
Pronunciation
Adds paiboon below
Definition
Short definition below, hover for full
Grammar
Part of speech below
Full Info
Difficulty level included
Technical Implementation - GLOST Format
GLOST Data Structure
- • GLOSTWordNode: Each word is a complete GLOST node with transcriptions, metadata, and extras
- • Multiple Transcription Systems: Each word supports multiple transcription formats
- • Rich Metadata: Meaning, part of speech, usage, difficulty, cultural notes
- • Extensible Design: Easy to add new transcription systems and metadata
- • Language Agnostic: Same structure works for Thai, Japanese, French, and more
- • Progressive Display: Five levels of increasing detail using GLOST data
- • Unified Interface: Consistent API across all languages and scripts
GLOST Benefits
- • Standardized Format: Consistent data structure across all languages
- • Rich Information: Comprehensive linguistic metadata in one place
- • Easy Extension: Simple to add new transcription systems or metadata
- • Type Safety: Full TypeScript support with proper interfaces
- • Reusable Components: Same GLOST data can power multiple display components
- • Scalable Architecture: Easy to add new languages and features
Features & FAQ
Features
- Four Sample Languages: Explore ruby annotation on sample sentences in Thai, Japanese, French and Korean.
- Multiple Transcription Systems: Switch between the transcription or romanization schemes available for the selected language, such as Paiboon for Thai.
- Progressive Display Levels: Move through five levels of detail, from bare script up to pronunciation, definition, grammar and difficulty rating.
- Three View Modes: Compare a step-by-step sentence view, an inline reading passage, and a sidebar layout with word metadata.
- English Translations: See an English translation alongside each sample sentence in every view mode.
Frequently Asked Questions
What does this demo show?
It shows how ruby annotation — small pronunciation guides placed above or below text — can be layered onto Thai, Japanese, French and Korean sentences. Pick a sample sentence, choose a transcription system, and adjust the display level to see progressively more pronunciation, definition and grammar detail appear.
What are the display levels for?
Level 1 shows just the original script. Higher levels add pronunciation, a short definition, part of speech, and finally a difficulty rating — so you can see how much detail ruby annotation can carry without redesigning the layout for every level.
What's the difference between the three view modes?
Progressive Sentence steps through one sample sentence at a time with full controls. Inline Document shows a whole passage as flowing prose with transcriptions woven directly into the text. Sidebar Document keeps the passage clean and puts word-by-word metadata in a side panel instead.
Can I use my own text?
No — this page is a fixed demo using pre-written sample sentences in each language. It's meant to show how the underlying ruby-annotation display behaves across different scripts and transcription systems, not to transcribe or annotate any text you type in yourself.
Why does the transcription system change when I switch languages?
Each language offers its own set of transcription or romanization schemes — for example, Paiboon for Thai. Switching languages automatically selects the first scheme available for that language, and the Transcription System buttons update to show only the systems that language actually supports.