/* * Bopo annotation styles. * * Mode is chosen by `data-bopo-mode` on : * above — conventional ruby over the character (markup: ruby) * taiwan-native — ruby with `ruby-position: inter-character` (markup: ruby) * taiwan — 國語日報-style vertical column, CSS grid (markup: columns) * * Generated elements are custom elements (bopo-*), so page selectors such as * `p span` never match them. The reset below also outranks universal `*` * rules. All sizes are in em so annotations scale with the page's font; * colours inherit (currentColor) so light/dark mode just work. */ :root { /* Zhuyin size relative to the base character. 國語日報 is ~1/3, which is illegible at typical 16px web text, so we clamp to a readable minimum. */ --bopo-zy-size: max(0.42em, 8px); --bopo-zy-opacity: 0.78; } bopo-t, bopo-w, bopo-g, bopo-c, bopo-z { font-size: inherit; font-family: inherit; line-height: inherit; margin: 0; padding: 0; border: 0; background: none; box-shadow: none; float: none; position: static; width: auto; height: auto; min-width: 0; max-width: none; letter-spacing: inherit; text-indent: 0; } bopo-z, rt[data-bopo] { -webkit-user-select: none; user-select: none; font-style: normal; font-weight: normal; opacity: var(--bopo-zy-opacity); } /* ── Ruby: above ─────────────────────────────────────────────────────────── */ ruby[data-bopo] { ruby-position: over; -webkit-ruby-position: before; ruby-align: center; } ruby[data-bopo] > rt { font-size: max(0.45em, 8px); line-height: 1; letter-spacing: 0; text-transform: none; } /* ── Ruby: native inter-character (reference prototype) ──────────────────── */ :root[data-bopo-mode="taiwan-native"] ruby[data-bopo] { ruby-position: inter-character; -webkit-ruby-position: inter-character; } :root[data-bopo-mode="taiwan-native"] ruby[data-bopo] > rt { font-size: var(--bopo-zy-size); } /* ── Columns: 國語日報-style ────────────────────────────────────────────── * * ┌────┬───┬──┐ * │ │ ㄏ│ │ base character, then a vertical Zhuyin column, then the * │ 行 │ ㄤ│ˊ │ tone mark beside the last symbol. Neutral tone (˙) sits * │ │ │ │ above the column instead. * └────┴───┴──┘ */ bopo-c { /* Centers the Zhuyin on the character's line box; the cell's baseline is the character's. */ display: inline-flex; align-items: center; } bopo-z { display: inline-block; position: relative; /* Vertical writing so fonts apply vertical glyph forms (ㄧ becomes a horizontal stroke, as in printed vertical Zhuyin). */ writing-mode: vertical-lr; text-orientation: upright; font-size: var(--bopo-zy-size); line-height: 1; letter-spacing: 0; margin: 0 0.14em 0 0.06em; text-decoration: none; text-indent: 0; } /* Tone mark beside the upper half of the final symbol. */ bopo-z[data-mark] { padding-right: 0.55em; } bopo-z[data-mark]::after { content: attr(data-mark); position: absolute; right: 0; bottom: 0.45em; width: 0.55em; writing-mode: horizontal-tb; line-height: 1; } bopo-z[data-len="1"][data-mark]::after { top: 0; bottom: auto; } /* Neutral tone: dot centered in its own 1em row above the column. */ bopo-z[data-tone="5"] { padding-right: 0; padding-top: 1em; } bopo-z[data-tone="5"]::after { top: 0; bottom: auto; left: 0; width: auto; text-align: center; } /* ── Tone colors (optional) ─────────────────────────────────────────────── * The content script defines --bopo-tone-N (light) and --bopo-tone-N-dark * on when tone colors are on. Undefined, var() makes `color` * "invalid at computed-value time", i.e. inherited — so no gating selector * is needed, and the rules work inside shadow roots (custom properties * inherit across the shadow boundary; :root selectors do not match there). */ :is(bopo-z, rt[data-bopo])[data-tone="1"] { color: var(--bopo-tone-1); } :is(bopo-z, rt[data-bopo])[data-tone="2"] { color: var(--bopo-tone-2); } :is(bopo-z, rt[data-bopo])[data-tone="3"] { color: var(--bopo-tone-3); } :is(bopo-z, rt[data-bopo])[data-tone="4"] { color: var(--bopo-tone-4); } :is(bopo-z, rt[data-bopo])[data-tone="5"] { color: var(--bopo-tone-5); } @media (prefers-color-scheme: dark) { :is(bopo-z, rt[data-bopo])[data-tone="1"] { color: var(--bopo-tone-1-dark); } :is(bopo-z, rt[data-bopo])[data-tone="2"] { color: var(--bopo-tone-2-dark); } :is(bopo-z, rt[data-bopo])[data-tone="3"] { color: var(--bopo-tone-3-dark); } :is(bopo-z, rt[data-bopo])[data-tone="4"] { color: var(--bopo-tone-4-dark); } :is(bopo-z, rt[data-bopo])[data-tone="5"] { color: var(--bopo-tone-5-dark); } } /* Keeps a character and its adjacent punctuation on the same line (禁則). */ bopo-g { white-space: nowrap; } /* ── Word interaction (tap/click → save card) ──────────────────────────── */ bopo-w { border-radius: 0.15em; transition: background-color 120ms ease; -webkit-tap-highlight-color: transparent; } /* iOS Safari only delivers taps on non-interactive elements that look clickable; scope the pointer cursor to touch devices. */ @media (hover: none) { bopo-w { cursor: pointer; } } /* The word whose save card is open: outlined like a sort in the forme. */ bopo-w[data-bopo-open] { outline: 1.5px solid currentColor; outline-offset: 2px; border-radius: 2px; } @media (hover: hover) { bopo-w:hover { background-color: color-mix(in srgb, currentColor 8%, transparent); } }