/* Ruby view for the word-by-word translation output ------------------------------------------------------------------ Restyles the server-generated .ggc word tables to read like the PinyinAnnotator: pinyin small on top, hanzi large in the middle, English small underneath. Pure CSS — the DOM (table ids, checkboxes, hideTransTable) is untouched, so "Use this translation" selection works identically in both views. Applied by adding .ruby-view to the results container (see translation-view-toggle.js). */ .ruby-view table.ggc { float: none; display: inline-table; vertical-align: top; margin: .2rem .15rem; } .ruby-view td.cgc { border: none; text-align: center; padding: .1em .2em; border-radius: 6px; /* the server writes an inline font-size (user-selected); the ruby view sets its own type scale per line, so neutralize the inline value */ font-size: 1rem !important; line-height: 1.3; } .ruby-view td.cgc:hover { background: color-mix(in srgb, var(--bs-primary, #0d6efd) 8%, transparent); } /* The wrapping each cell's lines becomes a centered column. Flexbox `order` normalizes the visual stacking (pinyin/hanzi/english) even though each page type emits the spans in a different DOM order. */ .ruby-view td.cgc nobr { display: inline-flex; flex-direction: column; align-items: center; } /* Line separators are meaningless in the flex column. */ .ruby-view td.cgc br { display: none; } .ruby-view td.cgc .input-line { order: 0; font-size: .72rem; opacity: .8; } .ruby-view td.cgc .pinyin-line { order: 1; font-size: .8rem; font-weight: 500; letter-spacing: .01em; } .ruby-view td.cgc .chinese-line { order: 2; font-size: 1.7rem; line-height: 1.35; } .ruby-view td.cgc .english-line { order: 3; font-size: .78rem; max-width: 12em; /* wrap long meanings instead of truncating with an ellipsis */ white-space: normal; overflow-wrap: break-word; text-align: center; } /* Re-expand plus icon, then the "Use this translation" checkbox + label stay at the bottom of the block. */ .ruby-view td.cgc a { order: 4; } .ruby-view td.cgc input[type="checkbox"] { order: 5; margin-top: .15rem; } .ruby-view td.cgc span[id^="span"] { order: 6; font-size: .68rem; opacity: .85; } /* Print: keep the ruby layout but drop the hover affordance. */ @media print { .ruby-view td.cgc:hover { background: transparent; } } /* Annotator-style handout: the Print button adds .ruby-print to while in Ruby view (translation-view-toggle.js), then calls window.print(). Only the ruby-laid-out results print — no nav, ads, or card chrome — mirroring the PinyinAnnotator's clean print. Deselected (display:none) tables stay hidden because visibility can't override display. */ @media print { body.ruby-print * { visibility: hidden; } body.ruby-print .ruby-view, body.ruby-print .ruby-view * { visibility: visible; } /* Bootstrap's .card is position:relative, which would anchor the absolute results to the card's mid-page position — release it so the handout starts at the page's top-left corner. */ body.ruby-print .card { position: static !important; } body.ruby-print .ruby-view { position: absolute; left: 0; top: 0; width: 100%; padding: 0 !important; margin: 0 !important; } /* Modern browsers (:has): remove everything that is neither the results nor an ancestor of them, so the hidden page content leaves no blank pages behind; ancestors keep only their box, stripped of chrome. */ body.ruby-print *:not(.ruby-view):not(.ruby-view *):not(:has(.ruby-view)) { display: none !important; } body.ruby-print :has(.ruby-view) { padding: 0 !important; margin: 0 !important; border: none !important; box-shadow: none !important; background: transparent !important; } /* Interactive chrome is meaningless on paper. */ body.ruby-print .ruby-view a[id^="href"], body.ruby-print .ruby-view input[type="checkbox"], body.ruby-print .ruby-view span[id^="span"] { display: none !important; } /* Black-on-white like the annotator handout (hanzi black, pinyin and English in soft grays). */ body.ruby-print .ruby-view td.cgc, body.ruby-print .ruby-view .chinese-line { color: #000 !important; background: transparent !important; } body.ruby-print .ruby-view .pinyin-line { color: #444 !important; } body.ruby-print .ruby-view .english-line { color: #333 !important; } body.ruby-print .ruby-view .input-line { color: #555 !important; } }