diff --git a/web/src/app/globals.css b/web/src/app/globals.css index 318349bc3..f98f8e9bb 100644 --- a/web/src/app/globals.css +++ b/web/src/app/globals.css @@ -1884,6 +1884,13 @@ .journal-article-header > p { font-size: 18px; } + /* A cover's caption breaks between words, as the post under it does. + At 360 the Korean caption under "패턴플로우란 무엇인가" broke inside + its last word and left 지 alone on a second line. */ + .journal-hero-cover figcaption { + word-break: keep-all; + overflow-wrap: break-word; + } /* 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 e5d744b1b..88a821213 100644 --- a/web/src/components/journal/journalCss.test.ts +++ b/web/src/components/journal/journalCss.test.ts @@ -504,3 +504,31 @@ describe("journal lists on a phone", () => { expect(parseFloat(value)).toBeLessThanOrEqual(1.5); }); }); + +// Below 721px a cover's caption broke Korean wherever its line ran out. The +// captions in a post keep .journal-reading's keep-all, and the cover's sits +// above it. On 28 October, at 360, the one Korean cover caption, under "패턴플로우란 +// 무엇인가", needed 24.5em in a 24em line and left 지 alone on a second line. + +describe("journal cover 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); + }; + const caption = ".journal-hero-cover figcaption"; + + it("breaks a Korean caption only between words", () => { + expect(last(caption, "word-break")).toBe("keep-all"); + }); + + it("still breaks a word too long for the line", () => { + expect(last(caption, "overflow-wrap")).toMatch(/^(break-word|anywhere)$/); + }); +});