diff --git a/src/BloomBrowserUI/bookEdit/StyleEditor/StyleEditor.ts b/src/BloomBrowserUI/bookEdit/StyleEditor/StyleEditor.ts
index e52de8566019..b5daff34182d 100644
--- a/src/BloomBrowserUI/bookEdit/StyleEditor/StyleEditor.ts
+++ b/src/BloomBrowserUI/bookEdit/StyleEditor/StyleEditor.ts
@@ -1621,11 +1621,25 @@ export default class StyleEditor {
     // Make a new style. Initialize to all current values. Caller should ensure it is a valid new style.
     public createStyle() {
         const typedStyle = $("#style-select-input").val();
-        StyleEditor.SetStyleNameForElement(
-            this.boxBeingEdited,
-            typedStyle + "-style",
-        );
+        // A box's font normally comes from the collection's language settings, not from its style,
+        // so the new style says nothing about the font unless the old style did: only a font the
+        // user set explicitly carries over, per language, for every language in the group (the
+        // whole group moves to the new style). Read them before the style changes.
+        const explicitFonts = this.getExplicitFontsForGroup();
+        const newStyleName = typedStyle + "-style";
+        StyleEditor.SetStyleNameForElement(this.boxBeingEdited, newStyleName);
         this.updateStyle();
+        if (explicitFonts.size > 0) {
+            explicitFonts.forEach((font, languageSelector) => {
+                const rule = this.GetRuleForStyle(
+                    newStyleName,
+                    languageSelector,
+                    true,
+                );
+                rule?.style.setProperty("font-family", font, "important");
+            });
+            this.cleanupAfterStyleChange();
+        }
 
         // Recommended way to insert an item into a select2 control and select it (one of the trues makes it selected)
         // See http://codepen.io/alexweissman/pen/zremOV
@@ -1640,6 +1654,47 @@ export default class StyleEditor {
         $("#style-select-input").val("");
     }
 
+    /**
+     * The fonts the box's style sets explicitly (the rules changeFont writes), for the box being
+     * edited and every other language's box in its translation group: a map from the language
+     * part of the selector ('[lang="fr"]', or "" for a box that uses language-independent rules)
+     * to the font. A language whose font comes from the collection's settings is not in the map.
+     * Reads only; never creates a rule.
+     */
+    private getExplicitFontsForGroup(): Map<string, string> {
+        const fonts = new Map<string, string>();
+        const target = this.boxBeingEdited;
+        const styleName = StyleEditor.GetStyleNameForElement(target);
+        if (!styleName) {
+            return fonts;
+        }
+        const group = target.closest(".bloom-translationGroup");
+        const boxes = group
+            ? Array.from(group.getElementsByClassName("bloom-editable"))
+            : [target];
+        for (const box of boxes) {
+            let languageSelector = "";
+            if (!this.targetUsesLanguageIndependentRules(box as HTMLElement)) {
+                const lang = StyleEditor.GetLangValueOrNull(box as HTMLElement);
+                languageSelector = lang
+                    ? '[lang="' + lang + '"]'
+                    : ":not([lang])";
+            }
+            const rule = this.GetRuleForStyle(
+                styleName,
+                languageSelector,
+                false,
+            );
+            const font = rule?.style.getPropertyValue("font-family");
+            if (font) {
+                fonts.set(languageSelector, font);
+            }
+        }
+        return fonts;
+    }
+
+    // Copy every control's current value into the box's (new) style. The font is deliberately
+    // not among them: see createStyle.
     public updateStyle() {
         this.changeSize();
         this.changeLineheight();
@@ -1874,11 +1929,22 @@ export default class StyleEditor {
         if (this.ignoreControlChanges) {
             return;
         }
-        const rule = this.getStyleRule(false);
+        // Like the other Characters-tab controls (bold, size, spacing...): the color always goes
+        // into the language-specific rule, and when the box being edited is in the collection's
+        // first language it goes into the language-independent rule as well, so that the other
+        // languages of the style pick it up too (BL-16803). Font family is the one deliberate
+        // exception to that pattern, because a font suits a script, not a style.
+        let rule = this.getStyleRule(false);
         if (rule != null) {
             rule.style.setProperty("color", color);
-            this.cleanupAfterStyleChange();
         }
+        if (this.shouldSetDefaultRule()) {
+            rule = this.getStyleRule(true);
+            if (rule != null) {
+                rule.style.setProperty("color", color);
+            }
+        }
+        this.cleanupAfterStyleChange();
         this.setColorButtonColor("colorSelectButton", color);
     }
 
diff --git a/src/BloomBrowserUI/bookEdit/StyleEditor/StyleEditorSpec.ts b/src/BloomBrowserUI/bookEdit/StyleEditor/StyleEditorSpec.ts
index 9b438a8341df..d0f85b9d200e 100644
--- a/src/BloomBrowserUI/bookEdit/StyleEditor/StyleEditorSpec.ts
+++ b/src/BloomBrowserUI/bookEdit/StyleEditor/StyleEditorSpec.ts
@@ -496,6 +496,211 @@ describe("StyleEditor", () => {
         }
     });
 
+    // The Format dialog's Color control follows the same rule as bold, size and spacing: a change
+    // made on a box in the collection's first language is for the style as a whole, so it goes
+    // into the language-independent rule too (BL-16803). Font family is the deliberate exception.
+    it("changeColor on a first-language box writes the color to the language-specific and the language-independent rules", () => {
+        (globalThis as any).GetSettings = () => ({
+            languageForNewTextBoxes: "xyz",
+        });
+        try {
+            $("body").append(
+                "<div id='testTarget' class='foo-style' lang='xyz'></div>" +
+                    "<div id='colorSelectButton'></div>",
+            );
+            const editor = new StyleEditor(
+                "file://" + "C:/dev/Bloom/src/BloomBrowserUI/bookEdit",
+            );
+            editor.boxBeingEdited = $("#testTarget").get(0);
+            vi.spyOn(editor, "cleanupAfterStyleChange").mockImplementation(
+                () => {},
+            );
+            // sanity check: nothing has written a color yet
+            expect(GetRuleMatchingSelector("color:")).toBeNull();
+
+            editor.changeColor("rgb(255, 22, 22)");
+
+            expect(
+                GetRuleMatchingSelector('.foo-style[lang="xyz"]')?.cssText,
+            ).toContain("color: rgb(255, 22, 22)");
+            expect(GetRuleMatchingSelector(".foo-style {")?.cssText).toContain(
+                "color: rgb(255, 22, 22)",
+            );
+            expect(
+                $("#colorSelectButton").attr("style"),
+                "the dialog's color button shows the new color",
+            ).toContain("rgb(255, 22, 22)");
+        } finally {
+            delete (globalThis as any).GetSettings;
+        }
+    });
+
+    it("changeColor on a box in another language writes the color only to that language's rule", () => {
+        (globalThis as any).GetSettings = () => ({
+            languageForNewTextBoxes: "xyz",
+        });
+        try {
+            $("body").append(
+                "<div id='testTarget' class='foo-style' lang='abc'></div>" +
+                    "<div id='colorSelectButton'></div>",
+            );
+            const editor = new StyleEditor(
+                "file://" + "C:/dev/Bloom/src/BloomBrowserUI/bookEdit",
+            );
+            editor.boxBeingEdited = $("#testTarget").get(0);
+            vi.spyOn(editor, "cleanupAfterStyleChange").mockImplementation(
+                () => {},
+            );
+
+            editor.changeColor("rgb(255, 22, 22)");
+
+            expect(
+                GetRuleMatchingSelector('.foo-style[lang="abc"]')?.cssText,
+            ).toContain("color: rgb(255, 22, 22)");
+            expect(
+                GetRuleMatchingSelector(".foo-style {"),
+                "no language-independent rule should be written for a non-L1 box",
+            ).toBeNull();
+        } finally {
+            delete (globalThis as any).GetSettings;
+        }
+    });
+
+    // The controls createStyle copies into the new style. The values do not matter here; they
+    // only have to exist, because updateStyle reads every one of them.
+    const formatDialogControlsHtml =
+        "<select id='size-select'><option selected>12</option></select>" +
+        "<select id='line-height-select'><option selected>1.5</option></select>" +
+        "<select id='word-space-select'><option selected>Normal</option><option>Wide</option><option>Extra Wide</option></select>" +
+        "<select id='para-spacing-select'><option selected>0</option></select>" +
+        "<div id='bold'></div><div id='italic'></div><div id='underline'></div>" +
+        "<div id='indent-none' class='selectedIcon'></div><div id='position-left' class='selectedIcon'></div>" +
+        "<div id='colorSelectButton'></div>" +
+        "<select id='styleSelect'></select>" +
+        "<div id='style-group' class='state-enteringStyle'></div>" +
+        "<input id='style-select-input' value='Bar'>";
+
+    // A box's font normally comes from the collection's language settings, not from its style,
+    // so a new style should say nothing about the font unless the old style set one explicitly.
+    it("createStyle copies a font the old style set explicitly for the box's language", () => {
+        (globalThis as any).GetSettings = () => ({
+            languageForNewTextBoxes: "xyz",
+        });
+        try {
+            $("body").append(
+                "<div id='testTarget' class='foo-style' lang='xyz'></div>" +
+                    formatDialogControlsHtml,
+            );
+            const editor = new StyleEditor(
+                "file://" + "C:/dev/Bloom/src/BloomBrowserUI/bookEdit",
+            );
+            editor.boxBeingEdited = $("#testTarget").get(0);
+            vi.spyOn(editor, "cleanupAfterStyleChange").mockImplementation(
+                () => {},
+            );
+            editor.changeFont("Arial");
+            // sanity check: the old style now names the font for this language
+            expect(
+                GetRuleMatchingSelector('.foo-style[lang="xyz"]')?.cssText,
+            ).toContain("font-family: Arial");
+
+            // runFormatDialog fills the style list when the dialog opens; createStyle adds to it.
+            (editor as any).styles = [];
+            editor.createStyle();
+
+            expect($("#testTarget").attr("class")).toContain("Bar-style");
+            expect(
+                GetRuleMatchingSelector('.Bar-style[lang="xyz"]')?.cssText,
+            ).toContain("font-family: Arial");
+            // The font stays per language: the language-independent rule says nothing about it.
+            expect(
+                GetRuleMatchingSelector(".Bar-style {")?.cssText,
+            ).not.toContain("font-family");
+        } finally {
+            delete (globalThis as any).GetSettings;
+        }
+    });
+
+    it("createStyle leaves the font to the language's default when the old style did", () => {
+        (globalThis as any).GetSettings = () => ({
+            languageForNewTextBoxes: "xyz",
+        });
+        try {
+            $("body").append(
+                "<div id='testTarget' class='foo-style' lang='xyz'></div>" +
+                    formatDialogControlsHtml,
+            );
+            const editor = new StyleEditor(
+                "file://" + "C:/dev/Bloom/src/BloomBrowserUI/bookEdit",
+            );
+            editor.boxBeingEdited = $("#testTarget").get(0);
+            vi.spyOn(editor, "cleanupAfterStyleChange").mockImplementation(
+                () => {},
+            );
+            // sanity check: nothing names a font yet
+            expect(GetRuleMatchingSelector("font-family")).toBeNull();
+
+            // runFormatDialog fills the style list when the dialog opens; createStyle adds to it.
+            (editor as any).styles = [];
+            editor.createStyle();
+
+            expect($("#testTarget").attr("class")).toContain("Bar-style");
+            // The new style got the other settings...
+            expect(
+                GetRuleMatchingSelector('.Bar-style[lang="xyz"]')?.cssText,
+            ).toContain("font-size: 12pt");
+            // ...but no font, in any of its rules.
+            expect(GetRuleMatchingSelector("font-family")).toBeNull();
+        } finally {
+            delete (globalThis as any).GetSettings;
+        }
+    });
+
+    it("createStyle keeps the explicit font of every language in the box's translation group", () => {
+        (globalThis as any).GetSettings = () => ({
+            languageForNewTextBoxes: "xyz",
+        });
+        try {
+            $("body").append(
+                "<div class='bloom-translationGroup foo-style'>" +
+                    "<div id='testTarget' class='bloom-editable foo-style' lang='xyz'></div>" +
+                    "<div id='sibling' class='bloom-editable foo-style' lang='abc'></div>" +
+                    "</div>" +
+                    formatDialogControlsHtml,
+            );
+            const editor = new StyleEditor(
+                "file://" + "C:/dev/Bloom/src/BloomBrowserUI/bookEdit",
+            );
+            vi.spyOn(editor, "cleanupAfterStyleChange").mockImplementation(
+                () => {},
+            );
+            // The user chose a different font for each language.
+            editor.boxBeingEdited = $("#sibling").get(0);
+            editor.changeFont("Verdana");
+            editor.boxBeingEdited = $("#testTarget").get(0);
+            editor.changeFont("Arial");
+            // sanity check
+            expect(
+                GetRuleMatchingSelector('.foo-style[lang="abc"]')?.cssText,
+            ).toContain("font-family: Verdana");
+
+            // runFormatDialog fills the style list when the dialog opens; createStyle adds to it.
+            (editor as any).styles = [];
+            editor.createStyle();
+
+            // Both boxes moved to the new style, and each keeps its own font.
+            expect($("#sibling").attr("class")).toContain("Bar-style");
+            expect(
+                GetRuleMatchingSelector('.Bar-style[lang="xyz"]')?.cssText,
+            ).toContain("font-family: Arial");
+            expect(
+                GetRuleMatchingSelector('.Bar-style[lang="abc"]')?.cssText,
+            ).toContain("font-family: Verdana");
+        } finally {
+            delete (globalThis as any).GetSettings;
+        }
+    });
+
     it("UpdateControlsToReflectAppliedStyle passes the real highlight colors to changeHiliteProps", () => {
         $("body").append(
             "<div id='testTarget' class='foo-style' lang='xyz'></div>",
diff --git a/src/BloomE2E/helpers/bookMaking.ts b/src/BloomE2E/helpers/bookMaking.ts
index 7a2830f9ae2b..cd425c03a2f6 100644
--- a/src/BloomE2E/helpers/bookMaking.ts
+++ b/src/BloomE2E/helpers/bookMaking.ts
@@ -521,7 +521,8 @@ export async function goToPage(page: Page, pageId: string): Promise<void> {
 /**
  * Click in one language's box of one translation group on the page being shown, so that it has the
  * focus, the way a person starts editing it. `groupSelector` picks the group, e.g. ".bookTitle" for
- * the cover title. Waits until the box has the focus, and returns it.
+ * the cover title; when the page has several groups that match, `groupIndex` says which one, in
+ * document order. Waits until the box has the focus, and returns it.
  *
  * Focusing a box is also what makes Bloom show the box's format gear (see helpers/formatDialog.ts).
  */
@@ -529,9 +530,12 @@ export async function clickInGroup(
     page: Page,
     groupSelector: string,
     languageTag: string,
+    groupIndex = 0,
 ): Promise<Locator> {
     const box = editablePageFrame(page)
-        .locator(`${groupSelector} .bloom-editable[lang="${languageTag}"]`)
+        .locator(groupSelector)
+        .nth(groupIndex)
+        .locator(`.bloom-editable[lang="${languageTag}"]`)
         .first();
     await box.waitFor({ state: "visible", timeout: 30000 });
     await box.click();
@@ -544,9 +548,11 @@ export async function clickInGroup(
 
 /**
  * Type text into one language's box of one translation group on the page being shown, the way a
- * person does. `groupSelector` picks the group, e.g. ".bookTitle" for the cover title.
+ * person does. `groupSelector` picks the group, e.g. ".bookTitle" for the cover title; when the
+ * page has several groups that match, `groupIndex` says which one, in document order.
  *
- * Pass an empty string to clear the box; that is how a test makes a translation incomplete.
+ * Pass an empty string to clear the box; that is how a test makes a translation incomplete. A
+ * newline in `text` presses Enter, which starts a new paragraph, as it does for a person.
  * Nothing reaches the file until the book leaves this page — see goToPage.
  */
 export async function typeInGroup(
@@ -554,16 +560,23 @@ export async function typeInGroup(
     groupSelector: string,
     languageTag: string,
     text: string,
+    groupIndex = 0,
 ): Promise<void> {
     // Click in, select what is there, and type over it. A box here is a CKEditor surface, and
     // filling it directly leaves part of the old text behind.
-    const box = await clickInGroup(page, groupSelector, languageTag);
+    const box = await clickInGroup(
+        page,
+        groupSelector,
+        languageTag,
+        groupIndex,
+    );
     await box.press("Control+a");
     await box.press("Delete");
     if (text) await box.pressSequentially(text);
     // Bloom's editor reacts to typing; confirm the box holds what we meant before moving on, so a
-    // later failure cannot be blamed on text that never arrived.
-    await expect(box).toHaveText(text, { timeout: 15000 });
+    // later failure cannot be blamed on text that never arrived. innerText, rather than textContent,
+    // so that a paragraph break reads back as the newline that made it.
+    await expect(box).toHaveText(text, { timeout: 15000, useInnerText: true });
 }
 
 /** One front or back matter page, as the Edit tab showed it. */
diff --git a/src/BloomE2E/helpers/cssValues.ts b/src/BloomE2E/helpers/cssValues.ts
new file mode 100644
index 000000000000..dce56accfa6a
--- /dev/null
+++ b/src/BloomE2E/helpers/cssValues.ts
@@ -0,0 +1,43 @@
+// Turn the values a browser reports for computed styles into the units a person sees in Bloom's UI.
+//
+// A primitive: surface modules use these when they read the page, so that a test compares what it
+// asked for ("#ff1616", 17 points) with what the page shows, in the same terms, and never parses
+// "rgb(255, 22, 22)" or "22.6667px" itself.
+
+/**
+ * A CSS color as the browser reports it ("rgb(255, 22, 22)", "rgba(0, 0, 0, 1)", "#FF1616",
+ * "transparent") as lower-case "#rrggbb", or "transparent" when the color is fully transparent.
+ * Throws for anything else, naming what it was given.
+ */
+export function cssColorToHex(cssColor: string): string {
+    const value = cssColor.trim();
+    if (value === "transparent") return "transparent";
+    const rgb =
+        /^rgba?\(\s*(\d+)\s*,\s*(\d+)\s*,\s*(\d+)\s*(?:,\s*([\d.]+)\s*)?\)$/.exec(
+            value,
+        );
+    if (rgb) {
+        if (rgb[4] !== undefined && Number(rgb[4]) === 0) return "transparent";
+        return (
+            "#" +
+            [rgb[1], rgb[2], rgb[3]]
+                .map((n) => Number(n).toString(16).padStart(2, "0"))
+                .join("")
+        );
+    }
+    const hex = /^#([0-9a-f]{6})([0-9a-f]{2})?$/i.exec(value);
+    if (hex) {
+        if (hex[2] !== undefined && parseInt(hex[2], 16) === 0)
+            return "transparent";
+        return "#" + hex[1].toLowerCase();
+    }
+    throw new Error(`"${cssColor}" is not a color this helper understands.`);
+}
+
+/** Pixels (as computed styles report them, e.g. "22.6667px") to points, rounded to 2 decimals. */
+export function cssPxToPt(cssLength: string): number {
+    const px = parseFloat(cssLength);
+    if (Number.isNaN(px))
+        throw new Error(`"${cssLength}" is not a length in pixels.`);
+    return Math.round(px * 0.75 * 100) / 100;
+}
diff --git a/src/BloomE2E/helpers/formatDialog.ts b/src/BloomE2E/helpers/formatDialog.ts
index bd042094c3d8..74ac5308d521 100644
--- a/src/BloomE2E/helpers/formatDialog.ts
+++ b/src/BloomE2E/helpers/formatDialog.ts
@@ -11,9 +11,24 @@
 // The gear is clicked at a point, not with Playwright's own click, because Playwright scrolls its
 // target into view first, and the case the manual test cares about most is a gear that is only
 // partly in view.
+//
+// The second half of this file drives the dialog's four tabs (Style Name, Characters, Paragraph,
+// Highlighting) and reads what they did to the text boxes on the page. What a control changes:
+//
+//  - Every control writes CSS rules for the box's STYLE ("normal", or one the user created) into
+//    the book's userModifiedStyles sheet, so it changes every box of that style, on every page.
+//  - A Characters-tab change made on a box in the collection's first language goes into the
+//    style's language-independent rule and so reaches the other languages too; made on a box in
+//    another language it goes into that language's own rule only. Font is the deliberate
+//    exception: a font suits a script, so it is always per language.
+//  - Paragraph-tab and Highlighting-tab settings are per style, never per language.
+//
+// The dialog's dropdowns are select2 controls over hidden <select>s (the font list is a MUI
+// select), and its color buttons open Bloom's color picker dialog, which lands in the page frame.
 
-import { expect, type Page } from "@playwright/test";
-import { editablePageFrame } from "./bookMaking";
+import { expect, type Frame, type Locator, type Page } from "@playwright/test";
+import { editablePageFrame, goToPage, type IBookPage } from "./bookMaking";
+import { cssColorToHex, cssPxToPt } from "./cssValues";
 import { realClickAt } from "./realClick";
 import { getZoom, setZoom } from "./workspace";
 
@@ -24,6 +39,11 @@ const DIALOG = "#format-toolbar";
 /** The dialog's title bar, which is what a person drags it by. */
 const DIALOG_TITLE_BAR = `${DIALOG} .bloomDialogTitleBar`;
 
+/** Bloom's color picker dialog, which the dialog's color buttons open. */
+const COLOR_PICKER = '[role="dialog"]';
+/** One swatch in the color picker: the inner div is the part that takes the click. */
+const COLOR_SWATCH = ".color-swatch > div:last-child";
+
 /** A rectangle in the page frame's client coordinates. */
 export interface IRect {
     left: number;
@@ -373,3 +393,668 @@ export async function zoomUntilFormatGearIsOutOfView(
     }
     return zoom;
 }
+
+// ---------------------------------------------------------------------------------------------
+// The dialog's tabs and controls.
+// ---------------------------------------------------------------------------------------------
+
+/** The Format dialog itself, as a locator in the page frame. */
+function formatDialog(page: Page): Locator {
+    return editablePageFrame(page).locator(DIALOG);
+}
+
+/** Close the Format dialog if it is open, the way a person does: with a click outside it. */
+export async function closeFormatDialog(page: Page): Promise<void> {
+    if (await isFormatDialogOpen(page)) await clickOutsideFormatDialog(page);
+}
+
+/** The dialog's tabs, named as the dialog labels them. */
+export type FormatDialogTab =
+    | "Style Name"
+    | "Characters"
+    | "Paragraph"
+    | "Highlighting";
+
+// The tabs are found by their localization keys, not their labels, so the helper works in any UI
+// language.
+const TAB_KEY: Record<FormatDialogTab, string> = {
+    "Style Name": "EditTab.FormatDialog.StyleNameTab",
+    Characters: "EditTab.FormatDialog.CharactersTab",
+    Paragraph: "EditTab.FormatDialog.ParagraphTab",
+    Highlighting: "EditTab.FormatDialog.Highlighting",
+};
+
+/** Click one of the Format dialog's tabs and wait for it to be the selected one. */
+export async function switchFormatDialogTab(
+    page: Page,
+    tab: FormatDialogTab,
+): Promise<void> {
+    const header = formatDialog(page).locator(
+        `h2.tab[data-i18n="${TAB_KEY[tab]}"]`,
+    );
+    await header.click();
+    await expect(
+        header,
+        `The Format dialog's "${tab}" tab did not become the selected tab.`,
+    ).toHaveClass(/selected/, { timeout: 15000 });
+}
+
+/** One entry of a <select> in the dialog. */
+interface ISelectOption {
+    value: string;
+    text: string;
+}
+
+/** The options of one of the dialog's <select>s, in order. */
+async function getSelectOptions(
+    frame: Frame,
+    selectId: string,
+): Promise<ISelectOption[]> {
+    // The dialog fills its lists as it opens, the style list only once the style names have
+    // been localized, so an empty list means "not yet", never "nothing to offer".
+    await expect
+        .poll(() => frame.locator(`#${selectId} option`).count(), {
+            timeout: 15000,
+            message: `The Format dialog's #${selectId} list never got its entries.`,
+        })
+        .toBeGreaterThan(0);
+    return frame.locator(`#${selectId} option`).evaluateAll((options) =>
+        options.map((o) => ({
+            value: (o as HTMLOptionElement).value,
+            text: (o as HTMLOptionElement).text,
+        })),
+    );
+}
+
+/** Open the select2 dropdown that stands in for one of the dialog's <select>s. */
+async function openSelect2(frame: Frame, selectId: string): Promise<void> {
+    // select2 hides the <select> and puts its own control right after it.
+    await frame.locator(`#${selectId} + .select2 .select2-selection`).click();
+    await expect(
+        frame.locator(".select2-container--open .select2-results__options"),
+        `The dropdown for #${selectId} did not open.`,
+    ).toBeVisible({ timeout: 15000 });
+}
+
+/**
+ * Choose, in one of the dialog's select2 dropdowns, the entry that `matches`, by opening the
+ * dropdown and clicking the entry as a person does, then wait until the <select> holds it.
+ * `wanted` describes the entry for the error when there is no such entry.
+ */
+async function chooseSelect2Option(
+    frame: Frame,
+    selectId: string,
+    matches: (option: ISelectOption) => boolean,
+    wanted: string,
+): Promise<void> {
+    const options = await getSelectOptions(frame, selectId);
+    const index = options.findIndex(matches);
+    if (index < 0)
+        throw new Error(
+            `The Format dialog offers no ${wanted}. It offers: ` +
+                options.map((o) => `"${o.text}"`).join(", ") +
+                ".",
+        );
+    await openSelect2(frame, selectId);
+    // The dropdown lists the <select>'s options in the same order.
+    await frame
+        .locator(".select2-container--open .select2-results__option")
+        .nth(index)
+        .click();
+    await expect
+        .poll(() => frame.locator(`#${selectId}`).inputValue(), {
+            timeout: 15000,
+            message: `Choosing ${wanted} did not change the dialog's selection.`,
+        })
+        .toBe(options[index].value);
+}
+
+/**
+ * Choose a font on the Characters tab, by name as the list shows it (e.g. "Arial"), and wait for
+ * the control to show it. Throws, listing the fonts offered, if there is no such font.
+ */
+export async function chooseFont(page: Page, fontName: string): Promise<void> {
+    const frame = editablePageFrame(page);
+    const control = frame.locator('#fontSelectComponent [role="combobox"]');
+    await control.click();
+    const list = frame.locator('[role="listbox"]');
+    await list.waitFor({ state: "visible", timeout: 15000 });
+    const option = list.getByRole("option", { name: fontName, exact: true });
+    if ((await option.count()) === 0) {
+        const offered = await list.getByRole("option").allInnerTexts();
+        throw new Error(
+            `Bloom offers no font called "${fontName}". It offers: ${offered
+                .map((f) => f.trim())
+                .join(", ")}.`,
+        );
+    }
+    await option.click();
+    await expect(
+        control,
+        `The font control did not change to "${fontName}".`,
+    ).toContainText(fontName, { timeout: 15000 });
+}
+
+/**
+ * Set the font size on the Characters tab, in points, by typing it into the size box the way a
+ * person enters a size that is not in the list, then pressing Enter. Works for listed sizes too.
+ */
+export async function chooseFontSize(
+    page: Page,
+    points: number,
+): Promise<void> {
+    const frame = editablePageFrame(page);
+    await openSelect2(frame, "size-select");
+    const search = frame.locator(
+        ".select2-container--open .select2-search__field",
+    );
+    await search.pressSequentially(String(points));
+    await search.press("Enter");
+    await expect
+        .poll(() => frame.locator("#size-select").inputValue(), {
+            timeout: 15000,
+            message: `Typing ${points} into the font size box did not select that size.`,
+        })
+        .toBe(String(points));
+}
+
+/** The sizes the Characters tab's size list offers, in points, in the order it lists them. */
+export async function getFontSizeChoices(page: Page): Promise<number[]> {
+    const options = await getSelectOptions(
+        editablePageFrame(page),
+        "size-select",
+    );
+    return options.map((o) => Number(o.value));
+}
+
+/** The font size the Characters tab's size control shows, in points. */
+export async function getFontSizeShown(page: Page): Promise<number> {
+    return Number(
+        await editablePageFrame(page).locator("#size-select").inputValue(),
+    );
+}
+
+/** The line spacings the Characters tab offers, as multiples of the font size. */
+export type LineSpacing =
+    | "0.7"
+    | "0.8"
+    | "1.0"
+    | "1.1"
+    | "1.2"
+    | "1.3"
+    | "1.4"
+    | "1.5"
+    | "1.6"
+    | "1.8"
+    | "2.0"
+    | "2.5"
+    | "3.0";
+
+/** Choose a line spacing on the Characters tab. */
+export async function chooseLineSpacing(
+    page: Page,
+    spacing: LineSpacing,
+): Promise<void> {
+    await chooseSelect2Option(
+        editablePageFrame(page),
+        "line-height-select",
+        (o) => o.value === spacing,
+        `line spacing of ${spacing}`,
+    );
+}
+
+/** The word spacings the Characters tab offers, as it labels them in English. */
+export type WordSpacing = "Normal" | "Wide" | "Extra Wide";
+// The labels are localized, so the helper chooses by position, which is what changeWordSpace in
+// StyleEditor.ts reads too.
+const WORD_SPACING_INDEX: Record<WordSpacing, number> = {
+    Normal: 0,
+    Wide: 1,
+    "Extra Wide": 2,
+};
+
+/** Choose a word spacing on the Characters tab. */
+export async function chooseWordSpacing(
+    page: Page,
+    spacing: WordSpacing,
+): Promise<void> {
+    const frame = editablePageFrame(page);
+    const options = await getSelectOptions(frame, "word-space-select");
+    const wanted = options[WORD_SPACING_INDEX[spacing]];
+    await chooseSelect2Option(
+        frame,
+        "word-space-select",
+        (o) => !!wanted && o.value === wanted.value,
+        `word spacing "${spacing}"`,
+    );
+}
+
+/** The three emphasis buttons on the Characters tab. */
+export type Emphasis = "bold" | "italic" | "underline";
+
+/** Whether the Characters tab shows this emphasis as on. */
+export async function isEmphasisOn(
+    page: Page,
+    emphasis: Emphasis,
+): Promise<boolean> {
+    return formatDialog(page)
+        .locator(`#${emphasis}`)
+        .evaluate((b) => b.classList.contains("selectedIcon"));
+}
+
+/**
+ * Click one of the emphasis buttons (B, I, U) on the Characters tab, which turns that emphasis on
+ * if it was off and off if it was on, and return the new state.
+ */
+export async function toggleEmphasis(
+    page: Page,
+    emphasis: Emphasis,
+): Promise<boolean> {
+    const wasOn = await isEmphasisOn(page, emphasis);
+    await formatDialog(page).locator(`#${emphasis}`).click();
+    await expect
+        .poll(() => isEmphasisOn(page, emphasis), {
+            timeout: 15000,
+            message: `Clicking the ${emphasis} button did not turn it ${wasOn ? "off" : "on"}.`,
+        })
+        .toBe(!wasOn);
+    return !wasOn;
+}
+
+/** The color an element is painted, as "#rrggbb". */
+async function backgroundColorOf(element: Locator): Promise<string> {
+    return cssColorToHex(
+        await element.evaluate((e) => getComputedStyle(e).backgroundColor),
+    );
+}
+
+/**
+ * In Bloom's color picker dialog, which something has just opened, click the swatch of this color
+ * ("#rrggbb"), then OK, and wait for the dialog to close. Throws, listing the swatches, if no
+ * swatch has that color: the pickers offer a fixed palette, and a test should choose from it.
+ */
+async function pickColor(frame: Frame, color: string): Promise<void> {
+    const dialog = frame.locator(COLOR_PICKER);
+    await dialog.waitFor({ state: "visible", timeout: 15000 });
+    const swatches = dialog.locator(COLOR_SWATCH);
+    await swatches.first().waitFor({ state: "visible", timeout: 15000 });
+    const colors = (
+        await swatches.evaluateAll((elements) =>
+            elements.map((e) => getComputedStyle(e).backgroundColor),
+        )
+    ).map(cssColorToHex);
+    const index = colors.indexOf(color.toLowerCase());
+    if (index < 0)
+        throw new Error(
+            `The color picker has no swatch of ${color}. Its swatches are: ${colors.join(", ")}.`,
+        );
+    await swatches.nth(index).click();
+    await dialog.getByRole("button", { name: "OK" }).click();
+    await expect(dialog, "The color picker did not close after OK.").toBeHidden(
+        { timeout: 15000 },
+    );
+}
+
+/**
+ * Open a color button's picker, pick `color` ("#rrggbb", one of the picker's palette), OK it,
+ * and wait for the button to show the new color.
+ */
+async function chooseColorWithButton(
+    page: Page,
+    button: Locator,
+    color: string,
+    description: string,
+): Promise<void> {
+    await button.click();
+    await pickColor(editablePageFrame(page), color);
+    await expect
+        .poll(() => backgroundColorOf(button), {
+            timeout: 15000,
+            message: `The ${description} button did not change to ${color}.`,
+        })
+        .toBe(color.toLowerCase());
+}
+
+/**
+ * Choose the text color on the Characters tab: open the color picker from the Color button, pick
+ * the swatch of `color` ("#rrggbb", one of the picker's palette), and OK it.
+ */
+export async function chooseTextColor(
+    page: Page,
+    color: string,
+): Promise<void> {
+    await chooseColorWithButton(
+        page,
+        formatDialog(page).locator("#colorSelectButton"),
+        color,
+        "Color",
+    );
+}
+
+/** The indent choices on the Paragraph tab. */
+export type Indent = "none" | "indented";
+/** The alignment choices on the Paragraph tab. */
+export type Alignment = "left" | "center" | "right" | "justify";
+/** The paragraph spacings the Paragraph tab offers, in ems. */
+export type ParagraphSpacing = "0" | "0.5" | "0.75" | "1" | "1.25";
+
+/** Click one of a group of picture buttons in the dialog and wait for it to show as chosen. */
+async function chooseButton(
+    page: Page,
+    buttonId: string,
+    description: string,
+): Promise<void> {
+    const button = formatDialog(page).locator(`#${buttonId}`);
+    await button.click();
+    await expect(
+        button,
+        `Clicking the ${description} button did not select it.`,
+    ).toHaveClass(/selectedIcon/, { timeout: 15000 });
+}
+
+/** Choose an indent on the Paragraph tab. */
+export async function chooseIndent(page: Page, indent: Indent): Promise<void> {
+    await chooseButton(page, `indent-${indent}`, `"${indent}" indent`);
+}
+
+/** Choose an alignment on the Paragraph tab. */
+export async function chooseAlignment(
+    page: Page,
+    alignment: Alignment,
+): Promise<void> {
+    await chooseButton(
+        page,
+        `position-${alignment}`,
+        `"${alignment}" alignment`,
+    );
+}
+
+/** Choose a space between paragraphs on the Paragraph tab. */
+export async function chooseParagraphSpacing(
+    page: Page,
+    spacing: ParagraphSpacing,
+): Promise<void> {
+    await chooseSelect2Option(
+        editablePageFrame(page),
+        "para-spacing-select",
+        (o) => o.value === spacing,
+        `paragraph spacing of ${spacing}`,
+    );
+}
+
+/** The Highlighting tab's color buttons: background first, then text, as the tab lays them out. */
+function highlightColorButton(page: Page, which: 0 | 1): Locator {
+    return formatDialog(page)
+        .locator('#audioHilitePage [data-testid="color-display-button-swatch"]')
+        .nth(which);
+}
+
+/**
+ * On the Highlighting tab, choose the background color the Talking Book tool highlights this
+ * style's text with while its audio plays. `color` is "#rrggbb", one of the picker's palette.
+ */
+export async function chooseHighlightBackgroundColor(
+    page: Page,
+    color: string,
+): Promise<void> {
+    await chooseColorWithButton(
+        page,
+        highlightColorButton(page, 0),
+        color,
+        "highlight background color",
+    );
+}
+
+/**
+ * On the Highlighting tab, turn on "Text Color" if it is off, and choose the color the highlighted
+ * text is drawn in. `color` is "#rrggbb", one of the picker's palette.
+ */
+export async function chooseHighlightTextColor(
+    page: Page,
+    color: string,
+): Promise<void> {
+    // The tab's checkboxes are "Background color" then "Text Color".
+    const checkbox = formatDialog(page)
+        .locator('#audioHilitePage input[type="checkbox"]')
+        .nth(1);
+    if (!(await checkbox.isChecked())) {
+        await checkbox.click();
+        await expect(
+            checkbox,
+            'Clicking "Text Color" on the Highlighting tab did not turn it on.',
+        ).toBeChecked({ timeout: 15000 });
+    }
+    await chooseColorWithButton(
+        page,
+        highlightColorButton(page, 1),
+        color,
+        "highlight text color",
+    );
+}
+
+/** The style names the Style Name tab's menu offers, as it shows them ("Normal", "Heading 1"...). */
+export async function getStyleMenuEntries(page: Page): Promise<string[]> {
+    return (await getSelectOptions(editablePageFrame(page), "styleSelect")).map(
+        (o) => o.text,
+    );
+}
+
+/** The style the Style Name tab's menu shows as the current one, e.g. "Normal". */
+export async function getStyleShown(page: Page): Promise<string> {
+    return editablePageFrame(page)
+        .locator("#styleSelect option:checked")
+        .evaluate((o) => (o as HTMLOptionElement).text);
+}
+
+/**
+ * On the Style Name tab, apply an existing style to the box, by choosing it in the menu by the
+ * name the menu shows ("Heading 1", or a style a test created).
+ */
+export async function applyStyle(page: Page, styleName: string): Promise<void> {
+    await chooseSelect2Option(
+        editablePageFrame(page),
+        "styleSelect",
+        (o) => o.text === styleName,
+        `style called "${styleName}"`,
+    );
+}
+
+/**
+ * On the Style Name tab, create a new style called `styleName` and apply it to the box: click
+ * "Create a new style", type the name, click Create. The new style starts with the box's current
+ * settings. Returns when the menu shows the new style as the current one.
+ */
+export async function createStyle(
+    page: Page,
+    styleName: string,
+): Promise<void> {
+    const dialog = formatDialog(page);
+    await dialog.locator("#show-createStyle").click();
+    const input = dialog.locator("#style-select-input");
+    await input.waitFor({ state: "visible", timeout: 15000 });
+    await input.pressSequentially(styleName);
+    const create = dialog.locator("#create-button");
+    await expect(
+        create,
+        `Typing "${styleName}" did not enable the Create button. Style names are letters only.`,
+    ).toBeEnabled({ timeout: 15000 });
+    await create.click();
+    await expect
+        .poll(() => getStyleShown(page), {
+            timeout: 15000,
+            message: `Creating the style "${styleName}" did not make it the current style.`,
+        })
+        .toBe(styleName);
+}
+
+// ---------------------------------------------------------------------------------------------
+// Reading what the dialog did to the page.
+// ---------------------------------------------------------------------------------------------
+
+/** How one text box on the page is formatted: everything the Format dialog controls, as drawn. */
+export interface ITextBoxFormatting {
+    /** Which translation group on the page the box is in, in document order, from 0. */
+    group: number;
+    /** The box's language tag. */
+    lang: string;
+    /** The box's style, as Bloom names it in the markup: "normal", or a style the user created. */
+    style: string;
+    fontFamily: string;
+    fontSizePt: number;
+    /** Line spacing as a multiple of the font size, to one decimal, as the dialog lists it. */
+    lineSpacing: number;
+    wordSpacingPt: number;
+    bold: boolean;
+    italic: boolean;
+    underline: boolean;
+    /** The text color, as "#rrggbb". */
+    color: string;
+    alignment: Alignment;
+    indent: Indent;
+    /**
+     * Space below a paragraph as a multiple of the font size, as the dialog lists it, measured on
+     * the box's FIRST paragraph: Bloom draws the last paragraph of a box with no space below it,
+     * whatever the style says, so a box needs two paragraphs for this to show.
+     */
+    paragraphSpacingEm: number;
+}
+
+/** What getTextBoxFormatting measures in the page, before the units are converted. */
+interface IRawTextBoxFormatting {
+    group: number;
+    lang: string;
+    style: string;
+    fontFamily: string;
+    fontSize: string;
+    lineHeight: string;
+    wordSpacing: string;
+    fontWeight: string;
+    fontStyle: string;
+    textDecorationLine: string;
+    color: string;
+    textAlign: string;
+    direction: string;
+    textIndent: string;
+    marginBottom: string;
+}
+
+/**
+ * How every visible text box on the page being edited is formatted, in document order, measured
+ * from the boxes themselves (their computed styles), which is what the reader sees.
+ *
+ * Only boxes that are showing count: a group's hidden languages are left out. Front and back
+ * matter pages have boxes too, so a test that wants content boxes asks on a content page.
+ */
+export async function getTextBoxFormatting(
+    page: Page,
+): Promise<ITextBoxFormatting[]> {
+    const raw: IRawTextBoxFormatting[] = await editablePageFrame(page).evaluate(
+        () => {
+            const groups = Array.from(
+                document.querySelectorAll(
+                    ".bloom-page .bloom-translationGroup",
+                ),
+            );
+            const result: IRawTextBoxFormatting[] = [];
+            groups.forEach((group, groupIndex) => {
+                for (const box of Array.from(
+                    group.querySelectorAll(".bloom-editable"),
+                )) {
+                    const boxStyle = getComputedStyle(box);
+                    if (boxStyle.display === "none") continue;
+                    // The paragraph settings live on the paragraphs inside the box.
+                    const paragraph = box.querySelector("p") ?? box;
+                    const paragraphStyle = getComputedStyle(paragraph);
+                    result.push({
+                        group: groupIndex,
+                        lang: box.getAttribute("lang") ?? "",
+                        style:
+                            Array.from(box.classList)
+                                .find((c) => c.endsWith("-style"))
+                                ?.replace(/-style$/, "") ?? "",
+                        fontFamily: boxStyle.fontFamily,
+                        fontSize: boxStyle.fontSize,
+                        lineHeight: boxStyle.lineHeight,
+                        wordSpacing: boxStyle.wordSpacing,
+                        fontWeight: boxStyle.fontWeight,
+                        fontStyle: boxStyle.fontStyle,
+                        textDecorationLine: boxStyle.textDecorationLine,
+                        color: boxStyle.color,
+                        textAlign: paragraphStyle.textAlign,
+                        direction: paragraphStyle.direction,
+                        textIndent: paragraphStyle.textIndent,
+                        marginBottom: paragraphStyle.marginBottom,
+                    });
+                }
+            });
+            return result;
+        },
+    );
+    return raw.map((r) => {
+        const fontSizePx = parseFloat(r.fontSize);
+        return {
+            group: r.group,
+            lang: r.lang,
+            style: r.style,
+            // Computed font families keep the quotes a name with spaces needs; the dialog does not.
+            fontFamily: r.fontFamily.replace(/^["']|["']$/g, ""),
+            fontSizePt: cssPxToPt(r.fontSize),
+            lineSpacing:
+                Math.round((parseFloat(r.lineHeight) / fontSizePx) * 10) / 10,
+            wordSpacingPt:
+                r.wordSpacing === "normal" ? 0 : cssPxToPt(r.wordSpacing),
+            bold: parseInt(r.fontWeight, 10) >= 600,
+            italic: r.fontStyle === "italic",
+            underline: r.textDecorationLine.includes("underline"),
+            color: cssColorToHex(r.color),
+            alignment: alignmentOf(r.textAlign, r.direction === "rtl"),
+            indent: parseFloat(r.textIndent) > 1 ? "indented" : "none",
+            paragraphSpacingEm:
+                Math.round((parseFloat(r.marginBottom) / fontSizePx) * 100) /
+                100,
+        };
+    });
+}
+
+/** The Paragraph tab's name for a computed text-align, which Bloom writes as start/end. */
+function alignmentOf(textAlign: string, rightToLeft: boolean): Alignment {
+    switch (textAlign) {
+        case "center":
+            return "center";
+        case "justify":
+            return "justify";
+        case "right":
+            return "right";
+        case "left":
+            return "left";
+        case "end":
+            return rightToLeft ? "left" : "right";
+        default: // "start"
+            return rightToLeft ? "right" : "left";
+    }
+}
+
+/** The formatting of one text box, and the page it is on. */
+export interface IBookTextBoxFormatting extends ITextBoxFormatting {
+    /** The page list's caption for the page, e.g. "1", or its label for a page with no number. */
+    pageCaption: string;
+}
+
+/**
+ * The formatting of every visible text box on each of these pages, visiting the pages in turn
+ * with goToPage. The Edit tab is left showing the last of them. This is how a test checks that a
+ * style change reached every box of that style in the book, not only the ones on the page it was
+ * made on.
+ */
+export async function getTextBoxFormattingOnPages(
+    page: Page,
+    pages: IBookPage[],
+): Promise<IBookTextBoxFormatting[]> {
+    const result: IBookTextBoxFormatting[] = [];
+    for (const bookPage of pages) {
+        await goToPage(page, bookPage.id);
+        for (const box of await getTextBoxFormatting(page))
+            result.push({ ...box, pageCaption: bookPage.caption });
+    }
+    return result;
+}
diff --git a/src/BloomE2E/helpers/talkingBook.ts b/src/BloomE2E/helpers/talkingBook.ts
new file mode 100644
index 000000000000..97c89fb77238
--- /dev/null
+++ b/src/BloomE2E/helpers/talkingBook.ts
@@ -0,0 +1,64 @@
+// The Talking Book tool: what it shows on the page while it is open.
+//
+// While the tool is open it highlights the segment that the next recording would go into. In the
+// Edit tab that highlight is a CSS ::highlight() pseudo-element that the tool registers in the page
+// frame (audioHighlightManager.ts), and its colors come from two CSS variables the tool sets on
+// the page's root element from the style's Highlighting settings in the Format dialog. Reading those
+// two things is how a test checks "the current segment is highlighted in the colors I chose".
+
+import { expect, type Page } from "@playwright/test";
+import { editablePageFrame } from "./bookMaking";
+import { cssColorToHex } from "./cssValues";
+
+/** The name the tool registers its current-segment highlight under (audioHighlightManager.ts). */
+const CURRENT_HIGHLIGHT = "bloom-audio-current";
+const BACKGROUND_VAR = "--bloom-audio-current-highlight-background";
+const TEXT_VAR = "--bloom-audio-current-highlight-color";
+
+/** The colors the Talking Book tool is highlighting the current segment with, as "#rrggbb". */
+export interface IAudioHighlightColors {
+    background: string;
+    text: string;
+}
+
+/**
+ * Wait until the Talking Book tool is highlighting a current segment on the page being edited, and
+ * return the colors it is using. Throws, naming the tool, if no highlight appears: the tool has to
+ * be open (see helpers/toolbox.ts) and the page has to have some text.
+ */
+export async function getCurrentAudioHighlightColors(
+    page: Page,
+): Promise<IAudioHighlightColors> {
+    const read = () =>
+        editablePageFrame(page).evaluate(
+            ({ name, backgroundVar, textVar }) => {
+                const highlights = (
+                    CSS as unknown as { highlights?: Map<string, unknown> }
+                ).highlights;
+                const style = document.documentElement.style;
+                return {
+                    registered: !!highlights?.has(name),
+                    background: style.getPropertyValue(backgroundVar),
+                    text: style.getPropertyValue(textVar),
+                };
+            },
+            {
+                name: CURRENT_HIGHLIGHT,
+                backgroundVar: BACKGROUND_VAR,
+                textVar: TEXT_VAR,
+            },
+        );
+    await expect
+        .poll(async () => (await read()).registered, {
+            timeout: 30000,
+            message:
+                "The Talking Book tool never highlighted a current segment on the page. " +
+                "It has to be open, and the page has to have text.",
+        })
+        .toBe(true);
+    const { background, text } = await read();
+    return {
+        background: cssColorToHex(background),
+        text: cssColorToHex(text),
+    };
+}
diff --git a/src/BloomE2E/helpers/toolbox.ts b/src/BloomE2E/helpers/toolbox.ts
new file mode 100644
index 000000000000..d0aba92e83c8
--- /dev/null
+++ b/src/BloomE2E/helpers/toolbox.ts
@@ -0,0 +1,67 @@
+// The toolbox: the panel of tools (Talking Book, Decodable Reader, ...) at the right of the Edit
+// tab, and the handle that shows and hides it.
+//
+// The show/hide handle is a checkbox in the Edit tab's own document; the tools live in a separate
+// "toolbox" frame, as an accordion with one section per enabled tool. Bloom remembers per book
+// whether the toolbox was showing, so a test that shows it should hide it again when it is done.
+
+import { expect, type Frame, type Page } from "@playwright/test";
+
+/** The checkbox that decides whether the toolbox is showing. */
+const TOGGLE = "#pure-toggle-right";
+/** The visible handle a person clicks. (A second, full-screen overlay label targets the same box.) */
+const TOGGLE_HANDLE = `label.pure-toggle-label[for="pure-toggle-right"]`;
+
+/** The frame holding the tools. Throws if the Edit tab is not showing. */
+export function toolboxFrame(page: Page): Frame {
+    const frame = page.frame({ name: "toolbox" });
+    if (!frame)
+        throw new Error(
+            "There is no 'toolbox' frame, so Bloom is not showing the Edit tab. " +
+                `Frames: ${page
+                    .frames()
+                    .map((f) => f.name() || "(main)")
+                    .join(", ")}.`,
+        );
+    return frame;
+}
+
+/** True while the toolbox is showing beside the page. */
+export async function isToolboxShowing(page: Page): Promise<boolean> {
+    return page.locator(TOGGLE).isChecked();
+}
+
+/**
+ * Show the toolbox by clicking its handle, the way a person does, if it is not showing already.
+ * The tool Bloom last had open in this book (Talking Book, for a new book) opens with it.
+ */
+export async function showToolbox(page: Page): Promise<void> {
+    if (await isToolboxShowing(page)) return;
+    await page.locator(TOGGLE_HANDLE).click();
+    await expect(
+        page.locator(TOGGLE),
+        "Clicking the toolbox handle did not show the toolbox.",
+    ).toBeChecked({ timeout: 30000 });
+}
+
+/** Hide the toolbox by clicking its handle, if it is showing. */
+export async function hideToolbox(page: Page): Promise<void> {
+    if (!(await isToolboxShowing(page))) return;
+    await page.locator(TOGGLE_HANDLE).click();
+    await expect(
+        page.locator(TOGGLE),
+        "Clicking the toolbox handle did not hide the toolbox.",
+    ).not.toBeChecked({ timeout: 30000 });
+}
+
+/**
+ * The name of the tool whose section of the toolbox is open, as its header shows it, e.g.
+ * "Talking Book Tool", or undefined when no tool is open.
+ */
+export async function getOpenToolName(page: Page): Promise<string | undefined> {
+    const open = toolboxFrame(page).locator(
+        '.MuiAccordionSummary-root[aria-expanded="true"]',
+    );
+    if ((await open.count()) === 0) return undefined;
+    return (await open.first().innerText()).trim();
+}
diff --git a/src/BloomE2E/tests/all-format-controls.spec.ts b/src/BloomE2E/tests/all-format-controls.spec.ts
new file mode 100644
index 000000000000..ba4b82aa675b
--- /dev/null
+++ b/src/BloomE2E/tests/all-format-controls.spec.ts
@@ -0,0 +1,435 @@
+// Every control of the Format dialog, on all four of its tabs, and where each change lands: on the
+// text of the box at once, on every box of the same style on every page, in one language or in all
+// of them, and in the Talking Book tool's highlight. Also creating a style and applying it.
+// Automates the manual test "All Format Controls" (Test Case ID 357).
+//
+// The book is Basic Book with three pages, "Basic Text & Image", "Image in Middle" and "Image on
+// Bottom", which between them have four text boxes, and the collection has two languages, so once
+// both are showing there are eight boxes. Which of them a change reaches is the heart of the test
+// (see the header of helpers/formatDialog.ts for the rules).
+//
+// The tests are serial: each starts from the state the one before it left behind.
+
+import { expect, test } from "../fixtures/bloomTest";
+import {
+    addPage,
+    clickInGroup,
+    getContentPages,
+    goToPage,
+    makeBookFromTemplate,
+    setContentLanguages,
+    typeInGroup,
+    type IBookPage,
+} from "../helpers/bookMaking";
+import {
+    applyStyle,
+    chooseAlignment,
+    chooseFont,
+    chooseFontSize,
+    chooseHighlightBackgroundColor,
+    chooseHighlightTextColor,
+    chooseIndent,
+    chooseLineSpacing,
+    chooseParagraphSpacing,
+    chooseTextColor,
+    chooseWordSpacing,
+    closeFormatDialog,
+    createStyle,
+    getFontSizeChoices,
+    getFontSizeShown,
+    getStyleMenuEntries,
+    getTextBoxFormatting,
+    getTextBoxFormattingOnPages,
+    openFormatDialog,
+    scrollFormatGearIntoView,
+    switchFormatDialogTab,
+    toggleEmphasis,
+    type IBookTextBoxFormatting,
+    type ITextBoxFormatting,
+} from "../helpers/formatDialog";
+import { getCurrentAudioHighlightColors } from "../helpers/talkingBook";
+import { getOpenToolName, hideToolbox, showToolbox } from "../helpers/toolbox";
+
+test.use({
+    collectionSpec: { name: "all-format-controls", languages: ["en", "fr"] },
+});
+
+test.describe.configure({ mode: "serial" });
+
+const L1 = "en";
+const L2 = "fr";
+/** Every text box on these pages is in a translation group; the tests pick a group by index. */
+const GROUP = ".bloom-translationGroup";
+/** The pages the manual test asks for, by the labels the Add Page dialog shows. */
+const PAGE_LABELS = [
+    "Basic Text & Image",
+    "Image in Middle",
+    "Image on Bottom",
+];
+/** Those pages have one, two and one text boxes: four per language. */
+const BOXES_PER_LANGUAGE = 4;
+/** The style every box starts with, as Bloom names it in the markup. The menu shows "Normal". */
+const NORMAL = "normal";
+/** The style the manual test creates. */
+const TESTING = "Testing";
+/** The collection's font, which every box starts with. */
+const DEFAULT_FONT = "Andika";
+
+// Colors from the pickers' palettes, as "#rrggbb" (helpers/formatDialog.ts refuses any other).
+const RED = "#ff1616";
+const TEAL = "#03989e";
+const PURPLE = "#8c52ff";
+const PALE_GREEN = "#bbf4bb";
+
+/** What the Characters tab is set to on the L1 box in the first test that changes it. */
+const L1_CHARACTERS = {
+    fontFamily: "Arial",
+    fontSizePt: 20,
+    lineSpacing: 2,
+    wordSpacingPt: 5,
+    bold: true,
+    italic: true,
+    underline: true,
+    color: RED,
+};
+/** What the Characters tab is then set to on the L2 box: every control different from L1's. */
+const L2_CHARACTERS = {
+    fontFamily: "Times New Roman",
+    fontSizePt: 14,
+    lineSpacing: 1.2,
+    wordSpacingPt: 10,
+    bold: false,
+    italic: false,
+    underline: false,
+    color: TEAL,
+};
+/** What the Paragraph tab is set to, which is per style and so reaches both languages. */
+const PARAGRAPH = {
+    indent: "indented",
+    alignment: "center",
+    paragraphSpacingEm: 1,
+} as const;
+/** How the Testing style is changed after it is created. */
+const TESTING_CHANGES = {
+    fontSizePt: 24,
+    italic: false,
+    alignment: "right",
+    indent: "none",
+} as const;
+
+/** The content pages, in order, once the first test has made them. */
+let pages: IBookPage[];
+
+/** The fields of a box's formatting that describe how it looks, without where it is. */
+const looksOf = (box: ITextBoxFormatting) => {
+    const { group, lang, style, ...looks } = box;
+    void group;
+    void lang;
+    void style;
+    return looks;
+};
+
+const boxesInLanguage = (boxes: IBookTextBoxFormatting[], lang: string) =>
+    boxes.filter((b) => b.lang === lang);
+
+/** Expect the eight boxes of the book: four per language. */
+const expectEightBoxes = (boxes: IBookTextBoxFormatting[]) => {
+    expect(boxes).toHaveLength(2 * BOXES_PER_LANGUAGE);
+    expect(boxesInLanguage(boxes, L1)).toHaveLength(BOXES_PER_LANGUAGE);
+    expect(boxesInLanguage(boxes, L2)).toHaveLength(BOXES_PER_LANGUAGE);
+};
+
+/** Open the Format dialog on one box of the page being shown, on the tab wanted. */
+const openFormatDialogOn = async (
+    page: Parameters<typeof clickInGroup>[0],
+    lang: string,
+    groupIndex: number,
+    tab: Parameters<typeof switchFormatDialogTab>[1],
+) => {
+    await clickInGroup(page, GROUP, lang, groupIndex);
+    await scrollFormatGearIntoView(page);
+    await openFormatDialog(page);
+    await switchFormatDialogTab(page, tab);
+};
+
+test.describe("All Format Controls", () => {
+    test("builds a book with four text boxes on three pages, in two languages", async ({
+        page,
+    }) => {
+        test.setTimeout(600000);
+        await makeBookFromTemplate(page, "Basic Book");
+        for (const label of PAGE_LABELS) await addPage(page, label);
+        await setContentLanguages(page, [L1, L2]);
+        pages = await getContentPages(page);
+        expect(pages).toHaveLength(PAGE_LABELS.length);
+
+        // Put two short paragraphs in every box, so that there is text to format and to highlight,
+        // and a paragraph that the space-between-paragraphs setting can show under.
+        for (const bookPage of pages) {
+            await goToPage(page, bookPage.id);
+            for (const box of await getTextBoxFormatting(page))
+                await typeInGroup(
+                    page,
+                    GROUP,
+                    box.lang,
+                    `Some ${box.lang} text.\nMore ${box.lang} text.`,
+                    box.group,
+                );
+        }
+
+        const boxes = await getTextBoxFormattingOnPages(page, pages);
+        expectEightBoxes(boxes);
+        for (const box of boxes) expect(box.style).toBe(NORMAL);
+        // Sanity check the starting point the rest of the file measures changes from.
+        for (const box of boxes)
+            expect(box).toMatchObject({
+                fontFamily: DEFAULT_FONT,
+                bold: false,
+                italic: false,
+                underline: false,
+                alignment: "left",
+                indent: "none",
+            });
+    });
+
+    test("each Characters-tab control takes effect at once on the L1 box, and reaches all eight boxes [Test Case ID 357]", async ({
+        page,
+    }) => {
+        test.setTimeout(600000);
+        await goToPage(page, pages[0].id);
+        await openFormatDialogOn(page, L1, 0, "Characters");
+        const boxOnPage = async (lang: string) =>
+            (await getTextBoxFormatting(page)).find((b) => b.lang === lang)!;
+
+        // Each change shows on the box straight away, with the dialog still open.
+        await chooseFont(page, L1_CHARACTERS.fontFamily);
+        expect((await boxOnPage(L1)).fontFamily).toBe(L1_CHARACTERS.fontFamily);
+        await chooseFontSize(page, L1_CHARACTERS.fontSizePt);
+        expect((await boxOnPage(L1)).fontSizePt).toBe(L1_CHARACTERS.fontSizePt);
+        await chooseLineSpacing(page, "2.0");
+        expect((await boxOnPage(L1)).lineSpacing).toBe(
+            L1_CHARACTERS.lineSpacing,
+        );
+        await chooseWordSpacing(page, "Wide");
+        expect((await boxOnPage(L1)).wordSpacingPt).toBe(
+            L1_CHARACTERS.wordSpacingPt,
+        );
+        expect(await toggleEmphasis(page, "bold")).toBe(true);
+        expect((await boxOnPage(L1)).bold).toBe(true);
+        expect(await toggleEmphasis(page, "italic")).toBe(true);
+        expect((await boxOnPage(L1)).italic).toBe(true);
+        expect(await toggleEmphasis(page, "underline")).toBe(true);
+        expect((await boxOnPage(L1)).underline).toBe(true);
+        await chooseTextColor(page, L1_CHARACTERS.color);
+        expect((await boxOnPage(L1)).color).toBe(L1_CHARACTERS.color);
+        await closeFormatDialog(page);
+
+        // A change made on an L1 box is for the style as a whole, so every box in both
+        // languages, on every page, shows it. Font is the exception: it stays per language.
+        const boxes = await getTextBoxFormattingOnPages(page, pages);
+        expectEightBoxes(boxes);
+        const { fontFamily, ...forEveryLanguage } = L1_CHARACTERS;
+        for (const box of boxesInLanguage(boxes, L1))
+            expect(box, `L1 box on page ${box.pageCaption}`).toMatchObject(
+                L1_CHARACTERS,
+            );
+        for (const box of boxesInLanguage(boxes, L2))
+            expect(box, `L2 box on page ${box.pageCaption}`).toMatchObject({
+                ...forEveryLanguage,
+                fontFamily: DEFAULT_FONT,
+            });
+        void fontFamily;
+    });
+
+    test("a font size typed into the size box changes all eight boxes, shows in the control, and joins its list [Test Case ID 357]", async ({
+        page,
+    }) => {
+        test.setTimeout(600000);
+        const customSize = 17;
+        await goToPage(page, pages[1].id);
+        await openFormatDialogOn(page, L1, 0, "Characters");
+        expect(
+            await getFontSizeChoices(page),
+            "the size chosen must not already be in the list",
+        ).not.toContain(customSize);
+
+        await chooseFontSize(page, customSize);
+
+        const onPage = await getTextBoxFormatting(page);
+        expect(
+            onPage.find((b) => b.lang === L1 && b.group === 0)!.fontSizePt,
+        ).toBe(customSize);
+        expect(await getFontSizeShown(page)).toBe(customSize);
+        expect(await getFontSizeChoices(page)).toContain(customSize);
+        await closeFormatDialog(page);
+
+        const boxes = await getTextBoxFormattingOnPages(page, pages);
+        expectEightBoxes(boxes);
+        for (const box of boxes)
+            expect(
+                box.fontSizePt,
+                `${box.lang} box on page ${box.pageCaption}`,
+            ).toBe(customSize);
+    });
+
+    test("changes made on the L2 box change the four L2 boxes and leave the L1 boxes as they were [Test Case ID 357]", async ({
+        page,
+    }) => {
+        test.setTimeout(600000);
+        const before = await getTextBoxFormattingOnPages(page, pages);
+        await goToPage(page, pages[0].id);
+        await openFormatDialogOn(page, L2, 0, "Characters");
+        await chooseFont(page, L2_CHARACTERS.fontFamily);
+        await chooseFontSize(page, L2_CHARACTERS.fontSizePt);
+        await chooseLineSpacing(page, "1.2");
+        await chooseWordSpacing(page, "Extra Wide");
+        // The L1 changes turned all three on for every language, so each click turns one off.
+        expect(await toggleEmphasis(page, "bold")).toBe(false);
+        expect(await toggleEmphasis(page, "italic")).toBe(false);
+        expect(await toggleEmphasis(page, "underline")).toBe(false);
+        await chooseTextColor(page, L2_CHARACTERS.color);
+        await closeFormatDialog(page);
+
+        const after = await getTextBoxFormattingOnPages(page, pages);
+        expectEightBoxes(after);
+        for (const box of boxesInLanguage(after, L2))
+            expect(box, `L2 box on page ${box.pageCaption}`).toMatchObject(
+                L2_CHARACTERS,
+            );
+        expect(boxesInLanguage(after, L1)).toEqual(boxesInLanguage(before, L1));
+    });
+
+    test("Paragraph-tab changes reach all eight boxes [Test Case ID 357]", async ({
+        page,
+    }) => {
+        test.setTimeout(600000);
+        await goToPage(page, pages[0].id);
+        await openFormatDialogOn(page, L2, 0, "Paragraph");
+        await chooseIndent(page, PARAGRAPH.indent);
+        await chooseAlignment(page, PARAGRAPH.alignment);
+        await chooseParagraphSpacing(page, "1");
+        await closeFormatDialog(page);
+
+        const boxes = await getTextBoxFormattingOnPages(page, pages);
+        expectEightBoxes(boxes);
+        for (const box of boxes)
+            expect(
+                box,
+                `${box.lang} box on page ${box.pageCaption}`,
+            ).toMatchObject(PARAGRAPH);
+    });
+
+    test("the Highlighting tab's colors are the ones the Talking Book tool highlights with [Test Case ID 357]", async ({
+        page,
+    }) => {
+        test.setTimeout(600000);
+        await goToPage(page, pages[2].id);
+        await openFormatDialogOn(page, L1, 0, "Highlighting");
+        await chooseHighlightBackgroundColor(page, PALE_GREEN);
+        await chooseHighlightTextColor(page, PURPLE);
+        await closeFormatDialog(page);
+
+        await showToolbox(page);
+        expect(await getOpenToolName(page)).toBe("Talking Book Tool");
+        expect(await getCurrentAudioHighlightColors(page)).toEqual({
+            background: PALE_GREEN,
+            text: PURPLE,
+        });
+        await hideToolbox(page);
+    });
+
+    test("creating a style keeps the box's look, applies to both languages of its group only, and joins the menu [Test Case ID 357]", async ({
+        page,
+    }) => {
+        test.setTimeout(600000);
+        await goToPage(page, pages[1].id);
+        const before = await getTextBoxFormatting(page);
+        // Sanity check: this page has two groups, and every box is still Normal.
+        expect(before.map((b) => b.group)).toEqual([0, 0, 1, 1]);
+        for (const box of before) expect(box.style).toBe(NORMAL);
+
+        await openFormatDialogOn(page, L1, 0, "Style Name");
+        expect(await getStyleMenuEntries(page)).not.toContain(TESTING);
+        await createStyle(page, TESTING);
+
+        expect(await getStyleMenuEntries(page)).toContain(TESTING);
+        const after = await getTextBoxFormatting(page);
+        const byBox = (
+            boxes: ITextBoxFormatting[],
+            group: number,
+            lang: string,
+        ) => boxes.find((b) => b.group === group && b.lang === lang)!;
+        // The box, and its partner in the other language, are now Testing; the other group is not.
+        expect(byBox(after, 0, L1).style).toBe(TESTING);
+        expect(byBox(after, 0, L2).style).toBe(TESTING);
+        expect(byBox(after, 1, L1).style).toBe(NORMAL);
+        expect(byBox(after, 1, L2).style).toBe(NORMAL);
+        // The new style copied the box's settings, font included (the box's font was set
+        // explicitly on the Characters tab, so it belongs to the style), so the box looks as it did.
+        expect(looksOf(byBox(after, 0, L1))).toEqual(
+            looksOf(byBox(before, 0, L1)),
+        );
+        // Its L2 partner moved to the new style too, and keeps the font that was chosen for it;
+        // its other settings now come from the new style, which copied the L1 box's.
+        expect(byBox(after, 0, L2).fontFamily).toBe(
+            byBox(before, 0, L2).fontFamily,
+        );
+        // The other group on the page did not change at all.
+        expect(looksOf(byBox(after, 1, L1))).toEqual(
+            looksOf(byBox(before, 1, L1)),
+        );
+        expect(looksOf(byBox(after, 1, L2))).toEqual(
+            looksOf(byBox(before, 1, L2)),
+        );
+    });
+
+    test("changing the Testing style changes only the Testing boxes [Test Case ID 357]", async ({
+        page,
+    }) => {
+        test.setTimeout(600000);
+        await closeFormatDialog(page);
+        const before = await getTextBoxFormattingOnPages(page, pages);
+        await goToPage(page, pages[1].id);
+        await openFormatDialogOn(page, L1, 0, "Characters");
+        await chooseFontSize(page, TESTING_CHANGES.fontSizePt);
+        expect(await toggleEmphasis(page, "italic")).toBe(
+            TESTING_CHANGES.italic,
+        );
+        await switchFormatDialogTab(page, "Paragraph");
+        await chooseAlignment(page, TESTING_CHANGES.alignment);
+        await chooseIndent(page, TESTING_CHANGES.indent);
+        await closeFormatDialog(page);
+
+        const after = await getTextBoxFormattingOnPages(page, pages);
+        expectEightBoxes(after);
+        const testingBoxes = after.filter((b) => b.style === TESTING);
+        expect(testingBoxes.map((b) => b.lang).sort()).toEqual([L1, L2]);
+        for (const box of testingBoxes)
+            expect(box, `${box.lang} Testing box`).toMatchObject(
+                TESTING_CHANGES,
+            );
+        expect(after.filter((b) => b.style === NORMAL)).toEqual(
+            before.filter((b) => b.style === NORMAL),
+        );
+    });
+
+    test("applying Testing to the L2 box of another page changes both languages of that group [Test Case ID 357]", async ({
+        page,
+    }) => {
+        test.setTimeout(600000);
+        await goToPage(page, pages[2].id);
+        const before = await getTextBoxFormatting(page);
+        for (const box of before) expect(box.style).toBe(NORMAL);
+
+        await openFormatDialogOn(page, L2, 0, "Style Name");
+        await applyStyle(page, TESTING);
+        await closeFormatDialog(page);
+
+        const after = await getTextBoxFormatting(page);
+        expect(after).toHaveLength(2);
+        for (const box of after) {
+            expect(box.style, `${box.lang} box`).toBe(TESTING);
+            expect(box, `${box.lang} box`).toMatchObject(TESTING_CHANGES);
+        }
+    });
+});