diff --git a/web/src/app/globals.css b/web/src/app/globals.css index e09dbff37..3244e29c6 100644 --- a/web/src/app/globals.css +++ b/web/src/app/globals.css @@ -1898,6 +1898,14 @@ word-break: keep-all; overflow-wrap: break-word; } + /* A caption sits centred under its picture, so its lines share the + words, as a title's do. Filled line by line, 8 of the 41 English + captions on two lines or more at 360 ended on one word ("A PDM mic + wired onto the ESP32. It / works."). No caption gains a line. */ + .journal-hero-cover figcaption, + .journal-md-figure figcaption { + text-wrap: balance; + } /* Korean breaks between words, as English does. At 390, 2,640 of the 4,458 line breaks in the 37 Korean posts fell inside a word. A word longer than the line still breaks rather than running off it. diff --git a/web/src/components/journal/journalCss.test.ts b/web/src/components/journal/journalCss.test.ts index ef8c31dd8..958508a5d 100644 --- a/web/src/components/journal/journalCss.test.ts +++ b/web/src/components/journal/journalCss.test.ts @@ -590,3 +590,26 @@ describe("journal headings in a post on a phone", () => { expect(value).toBeLessThanOrEqual(1.4); }); }); + +// Below 721px a figure's caption, centred under its picture, filled each line +// and left what was over on the last one. On 28 October, of the multi-line +// English captions in the 74 posts, 8 of 41 at 360, 6 of 40 at 390 and 7 of +// 37 at 430 ended on one word ("A PDM mic wired onto the ESP32. It / works."). + +describe("journal captions on a phone", () => { + const desktop = rules(withoutMedia(css)); + const phone = mediaBlocks(css, "(max-width: 720px)").flatMap(rules); + const last = (selector: string, property: string) => { + const from = (list: ReturnType) => + list + .filter((r) => r.selectors.includes(selector)) + .map((r) => declaration(r.body, property)) + .filter(Boolean) + .at(-1); + return from(phone) ?? from(desktop); + }; + + it.each([".journal-md-figure figcaption", ".journal-hero-cover figcaption"])("balances the lines of %s", (caption) => { + expect(last(caption, "text-wrap")).toBe("balance"); + }); +});