注音標註文字
文字上方標註注音或拼音的 ruby 排版，hover 高亮、可切換模式
以語意化 <ruby> / <rt> / <rp> 標記在漢字上方標註注音符號（聲調依橫排慣例簡化為右側標調）或漢語拼音，模式切換時標註逐字淡入過渡，滑過單字時該字與標註一起高亮微放大，適合語文教學、兒童讀物與識字類介面。
載入預覽⋯
Playground
即時調整 props、程式碼片段同步更新——直接試出你要的樣子再複製。
<ZhuyinRubyText />
安裝
npx shadcn@latest add https://webberui.com/r/zhuyin-ruby-text.json或在 components.json 設定 registries 後，改用 @webberui/zhuyin-ruby-text 安裝。
安裝依賴後，從 registry JSON（/r/zhuyin-ruby-text.json 的 files[0].content）複製 zhuyin-ruby-text.tsx 原始碼到你的 components/ui/ 目錄：
npm install motion clsx tailwind-merge使用
import { ZhuyinRubyText } from "@/components/ui/zhuyin-ruby-text";
<ZhuyinRubyText
items={[
{ char: "注", zhuyin: "ㄓㄨˋ", pinyin: "zhù" },
{ char: "音", zhuyin: "ㄧㄣ", pinyin: "yīn" },
{ char: "！" },
]}
mode="zhuyin"
size="md"
/>組件另外輸出 zhuyinRubySampleLines（童謠〈小星星〉前兩句的示範資料，約 30 字）方便快速預覽；它只是示範用小型資料集，實務上請由編輯內容或注音拼音轉換服務產生同結構的 items 陣列傳入。標點符號只要不給 zhuyin 與 pinyin 即會以純文字呈現且不參與 hover 高亮。
Props
| Prop | 型別 | 預設值 | 說明 |
|---|---|---|---|
items | ZhuyinRubyItem[] | — | 逐字標註資料，每項為 { char, zhuyin?, pinyin? } |
mode | "zhuyin" | "pinyin" | "none" | "zhuyin" | 標註模式；none 仍保留標註列高度，切換不跳動 |
size | "sm" | "md" | "lg" | "md" | 字級尺寸（漢字與標註同步縮放） |
className | string | — | 透傳到最外層容器 |
可及性
- 使用語意化
<ruby>/<rt>/<rp>標記，不支援 ruby 排版的環境會以括號 fallback 呈現標註 - 標註內容對螢幕閱讀器隱藏（
aria-hidden），避免注音符號、調號被逐一朗讀干擾語意 - 使用者系統開啟「減少動態效果」時，模式切換不播放淡入動畫，hover 也不縮放（僅保留變色）
- 最外層容器標記
lang="zh-TW"，協助輔助科技選用正確語音