diff --git a/tests/ui/app.spec.js b/tests/ui/app.spec.js index 2830898..f1fc10f 100644 --- a/tests/ui/app.spec.js +++ b/tests/ui/app.spec.js @@ -189,6 +189,14 @@ 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 70 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(70.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); await page.locator('#srfont').selectOption('same'); await page.locator('#sfont').selectOption('theme'); diff --git a/web/CHANGELOG.md b/web/CHANGELOG.md index e99914e..a5ad8ee 100644 --- a/web/CHANGELOG.md +++ b/web/CHANGELOG.md @@ -11,6 +11,10 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0 ## [Unreleased] +### Changed + +- An item's title and text keep to about 70 characters a line, however wide the window, so the eye finds the start of the next line (#360). + ### Added - Fonts of your choosing in Settings, beside the theme, kept by each browser as the theme is: one for the interface and one for reading an item's title and text, which is the interface's until chosen, with a little more room between the lines in a serif. Inter, your system's, the reading fonts Atkinson Hyperlegible, Lexend, Literata, Source Serif and OpenDyslexic, your device's serif, or monospace. The default keeps each theme's face as it was (#359). diff --git a/web/app.css b/web/app.css index 4dcc534..68d897c 100644 --- a/web/app.css +++ b/web/app.css @@ -889,6 +889,9 @@ 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 70 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:70ch} .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}