per ORIGINAL sentence, flat — pagination/ids/highlight untouched):
original Urdu translation — a quoted original inside it is a ruby whose base is that original (BilingualPairs.java checks it exists in the sentence)
bi-start = first sentence of a printed paragraph. Reader modes (js/interlinear.js puts one class on the content; NO DOM restructuring, so snapshot cards, footnote refs and ?highlight= keep working): (none) فارسی + اردو — each sentence with its Urdu directly under it .bi-mode-fa صرف فارسی — the original flows as paragraphs; a tapped sentence opens its Urdu .bi-mode-ur صرف اردو — the Urdu flows as paragraphs; quoted originals stay visible with their Urdu ON TOP (ruby), long ones on their own line (.bi-q-long) Loaded by article.html AND article-preview.html (mirror rule, ARCH §12). Persian/Arabic face: Noto Naskh Arabic (user choice 05.10.2026 — wider than Lateef, leaves room for the Urdu). ========================================================================== */ /* ---------- فارسی + اردو (default, also what the snapshot card shows) ---------- */ .article-content p.bi-pair { margin: 0 -10px 12px; padding: 2px 10px 4px; border-inline-start: 2px solid transparent; border-radius: 3px; text-align: justify; transition: background-color .15s, border-color .15s; } .article-content p.bi-pair.bi-start { margin-top: 20px; } /* a printed paragraph begins */ .article-content p.bi-pair > span.bi-src { display: block; font-family: 'Noto Naskh Arabic', serif; font-size: 0.98em; line-height: 1.95; color: inherit; /* skins (incl. the dark one) own the ink */ } .article-content p.bi-pair > span.bi-src span.lang-ar { /* Arabic inside a Persian sentence */ font-family: 'Noto Naskh Arabic', serif; font-size: 1em; line-height: inherit; } .article-content p.bi-pair > span.bi-tr { display: block; font-family: 'Jameel Noori Nastaleeq', 'Noto Nastaliq Urdu', serif; font-size: 0.86em; line-height: 1.85; color: #5f6b66; /* fallback */ color: color-mix(in srgb, currentColor 68%, transparent); /* softer ink of any skin */ margin-top: -0.45em; } @media (hover: hover) { .article-content:not(.bi-mode-fa):not(.bi-mode-ur) p.bi-pair:hover { background: rgba(30, 111, 92, 0.06); border-inline-start-color: #1e6f5c; } } /* Quoted originals inside the Urdu (ruby): outside صرف اردو the original is already on the line above → hide the base and read the rt as ordinary running Urdu. */ .article-content:not(.bi-mode-ur) p.bi-pair .bi-tr ruby { display: inline; ruby-position: over; } .article-content:not(.bi-mode-ur) p.bi-pair .bi-tr ruby > span { display: none; } .article-content:not(.bi-mode-ur) p.bi-pair .bi-tr ruby rt { display: inline; font-size: 1em; color: inherit; font-weight: inherit; font-family: inherit; } .article-content:not(.bi-mode-ur) p.bi-pair .bi-tr ruby:hover { background: none; padding: 0; margin: 0; } /* Verse in a bilingual text: the same Naskh face as the prose originals */ .article-content.bi-doc .poetic-table.lang-fa tr.couplet-row p { font-family: 'Noto Naskh Arabic', serif; font-size: 1em; } /* ---------- صرف فارسی / صرف اردو: pairs flow inline as paragraphs ---------- */ .article-content.bi-mode-fa, .article-content.bi-mode-ur { text-align: justify; } .article-content.bi-mode-fa p.bi-pair, .article-content.bi-mode-ur p.bi-pair { display: inline; margin: 0; padding: 0; border: none; background: none; } .article-content.bi-mode-fa p.bi-pair::after, .article-content.bi-mode-ur p.bi-pair::after { content: " "; } /* a printed paragraph starts on a fresh line, with the paragraph gap */ .article-content.bi-mode-fa p.bi-pair.bi-start::before, .article-content.bi-mode-ur p.bi-pair.bi-start::before { content: ""; display: block; height: 14px; } .article-content.bi-mode-fa p.bi-pair { font-family: 'Noto Naskh Arabic', serif; cursor: pointer; } .article-content.bi-mode-fa p.bi-pair > span.bi-src { display: inline; } .article-content.bi-mode-fa p.bi-pair > span.bi-tr { display: none; } .article-content.bi-mode-fa p.bi-pair.bi-open > span.bi-src { background: rgba(30, 111, 92, 0.08); border-radius: 3px; } .article-content.bi-mode-fa p.bi-pair.bi-open > span.bi-tr { display: block; margin: 2px 0 8px; padding: 2px 12px 4px; border-inline-start: 2px solid #1e6f5c; background: rgba(30, 111, 92, 0.06); border-radius: 3px; cursor: default; } .article-content.bi-mode-ur p.bi-pair > span.bi-src { display: none; } .article-content.bi-mode-ur p.bi-pair > span.bi-tr { display: inline; font-size: 1em; color: inherit; margin: 0; line-height: inherit; } /* صرف اردو: quoted original visible, its Urdu on top (normal ruby) … */ .article-content.bi-mode-ur p.bi-pair .bi-tr ruby > span.lang-fa, .article-content.bi-mode-ur p.bi-pair .bi-tr ruby > span.lang-ar { font-family: 'Noto Naskh Arabic', serif; font-size: 0.9em; } /* … unless the Urdu is much longer than the original (rule b): then the original gets its own centred line with its Urdu right under it — a ruby would stretch the original apart. */ /* grid, not block: the §5.4 ZWNJ text node between base and rt would otherwise become a whole empty line box — as the anonymous middle grid item it gets a 0px row */ .article-content.bi-mode-ur p.bi-pair .bi-tr ruby.bi-q-long { display: grid; grid-template-rows: auto 0 auto; justify-items: center; text-align: center; margin: 6px 0 8px; } .article-content.bi-mode-ur p.bi-pair .bi-tr ruby.bi-q-long > span { display: block; line-height: 1.9; text-align: center; } .article-content.bi-mode-ur p.bi-pair .bi-tr ruby.bi-q-long > rt { display: block; font-size: 0.82em; color: color-mix(in srgb, currentColor 68%, transparent); font-weight: normal; line-height: 1.8; text-align: center; } .article-content.bi-mode-ur p.bi-pair .bi-tr ruby.bi-q-long:hover { background: none; padding: 0; margin: 6px 0 8px; } /* ---------- bilingual heading (design C, user 05.10.2026: rules + ornament) ----------