diff --git a/web/src/app/globals.css b/web/src/app/globals.css index f98f8e9bb..f2588ce9b 100644 --- a/web/src/app/globals.css +++ b/web/src/app/globals.css @@ -1861,8 +1861,15 @@ .journal-section-label { font-size: 25px; } + /* The archive's first post is always the newest, so its title changes + with each post. With each of the 74 titles put there, three of the + four Korean ones on two lines at 360 broke inside a word, and the + letters of three English ones on two lines were 2.2px apart. */ .journal-featured h1 { font-size: 36px; + line-height: 1.2; + word-break: keep-all; + overflow-wrap: break-word; } .journal-featured { grid-template-columns: 1fr; diff --git a/web/src/components/journal/journalCss.test.ts b/web/src/components/journal/journalCss.test.ts index 88a821213..124bd76ca 100644 --- a/web/src/components/journal/journalCss.test.ts +++ b/web/src/components/journal/journalCss.test.ts @@ -532,3 +532,36 @@ describe("journal cover captions on a phone", () => { expect(last(caption, "overflow-wrap")).toMatch(/^(break-word|anywhere)$/); }); }); + +// Below 721px the archive's first post set its 36px title 1.06 apart and broke +// Korean wherever the line ran out. No post sets `featured`, so the first post +// is always the newest one. On 28 October, with each of the 74 titles put in +// its place, three of the four Korean titles on two lines at 360 broke inside +// a word ("성공과 실 / 패: 다음 단계"), and three English titles on two lines +// had 2.2px between the letters of one line and the next. + +describe("journal first post 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 title = ".journal-featured h1"; + + it("breaks a Korean title only between words", () => { + expect(last(title, "word-break")).toBe("keep-all"); + expect(last(title, "overflow-wrap")).toMatch(/^(break-word|anywhere)$/); + }); + + it("keeps a title's lines 1.2 to 1.4 apart", () => { + const value = Number(last(title, "line-height")); + expect(value).toBeGreaterThanOrEqual(1.2); + expect(value).toBeLessThanOrEqual(1.4); + }); +});