From 2c7e23c346187e1d39e43d079d6f56ab48f399d6 Mon Sep 17 00:00:00 2001 From: rays Date: Sun, 25 Oct 2026 01:49:44 +0000 Subject: [PATCH] An item's text takes four fifths of the reading pane, not 80 characters (#360) Asked for as a share of the window. The pane is the window less the feed list, so a share of the window would never bind; a share of the pane does. On a phone the pane is the screen, and keeps all of it. Co-Authored-By: Claude Opus 5.5 --- tests/ui/app.spec.js | 13 +++++-------- web/CHANGELOG.md | 2 +- web/app.css | 9 ++++++--- 3 files changed, 12 insertions(+), 12 deletions(-) diff --git a/tests/ui/app.spec.js b/tests/ui/app.spec.js index ac0f070..a2aefe0 100644 --- a/tests/ui/app.spec.js +++ b/tests/ui/app.spec.js @@ -189,14 +189,11 @@ test('the reading font is an item\'s title and text, and the interface keeps its // A serif gets more room between its lines (1.75 of the text's size, against 1.65). const lh = await page.locator('#detail .dbody').evaluate(el => { const c = getComputedStyle(el); return parseFloat(c.lineHeight) / parseFloat(c.fontSize); }); expect(lh).toBeCloseTo(1.75, 2); - // About 80 characters a line, however wide the pane (#360). - const measure = await page.locator('#detail .dbody').evaluate(el => { - const ch = document.createElement('span'); ch.textContent = '0'; el.append(ch); - const n = el.getBoundingClientRect().width / ch.getBoundingClientRect().width; ch.remove(); return n; }); - expect(measure).toBeLessThanOrEqual(80.5); - const [pane, text] = await page.locator('#detail .dbody').evaluate(el => - [el.parentElement.clientWidth, el.getBoundingClientRect().width]); - expect(text, 'the pane is wider, so the measure is what holds it').toBeLessThan(pane - 100); + // Four fifths of the pane, whatever the font (#360). + const share = await page.locator('#detail .dbody').evaluate(el => { + const p = el.parentElement, c = getComputedStyle(p); + return el.getBoundingClientRect().width / (p.clientWidth - parseFloat(c.paddingLeft) - parseFloat(c.paddingRight)); }); + expect(share).toBeCloseTo(0.8, 2); await page.locator('#srfont').selectOption('same'); await page.locator('#sfont').selectOption('theme'); diff --git a/web/CHANGELOG.md b/web/CHANGELOG.md index aaffd3e..910877b 100644 --- a/web/CHANGELOG.md +++ b/web/CHANGELOG.md @@ -13,7 +13,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0 ### Changed -- An item's title and text keep to about 80 characters a line, however wide the window, so the eye finds the start of the next line (#360). +- An item's title and text take four fifths of the reading pane's width, no longer running to its far edge (#360). ### Added diff --git a/web/app.css b/web/app.css index e0053c3..c27640c 100644 --- a/web/app.css +++ b/web/app.css @@ -889,9 +889,12 @@ body.scan-this .fhead [data-a=scan] .i,body.scan-any .fhead [data-a=scanall] .i, .dmeta .tview{width:auto;padding:3px 6px;font-size:12px} #detail .encbox{margin:0 0 10px} .dbody{font-size:14.5px;line-height:1.65;overflow-wrap:anywhere;color:var(--fg)} -/* About 80 characters a line, where the eye finds the next line's start without hunting: across a - wide window a line ran past a hundred (#360). In ch, so the measure follows the reading font. */ -#detail :is(.dt,.dbody){max-width:80ch} +/* Four fifths of the pane, so a line stops short of its far edge: across the whole of a wide + window it ran past a hundred characters (#360). A share of the pane, not a count of characters, + as asked: a wider window still makes a longer line. */ +#detail :is(.dt,.dbody){max-width:80%} +/* Not on a phone, where the pane is the screen and a fifth of it would be an empty strip. */ +@media (max-width:820px){#detail :is(.dt,.dbody){max-width:none}} .dbody img{max-width:100%;height:auto;border-radius:6px} .dbody a{color:var(--accent)} .dbody pre{overflow-x:auto;background:var(--panel2);padding:10px;border-radius:8px}