diff --git a/README.md b/README.md
index 796dd05..4b07ce2 100644
--- a/README.md
+++ b/README.md
@@ -16,10 +16,10 @@ Temporary add-ons remain installed until Firefox restarts. For permanent local u
1. Open a normal web page.
2. Select the Glagolify toolbar icon.
-3. Choose **Round** or **Angular** letter shapes.
+3. Choose **Round**, **Angular Sans**, **Historical Angular**, or **Missal Angular** letter shapes.
4. Press **Enable Glagolitic**. Press **Restore Cyrillic** to undo it.
-The popup keeps one action button and a two-choice letter-style selector. The selected style is stored as a global extension preference and updates every enabled tab immediately. The background script separately owns one absolute enabled/disabled state per tab, broadcasts it to every frame, and supplies both state and style to frames created or navigated later. Tab state lasts across navigation and is discarded when the tab closes. Firefox internal pages (`about:`, browser UI), extension pages, and other protected pages cannot be modified; the popup reports that restriction.
+The popup keeps one action button and a four-choice letter-style selector. The selected style is stored as a global extension preference and updates every enabled tab immediately. The background script separately owns one absolute enabled/disabled state per tab, broadcasts it to every frame, and supplies both state and style to frames created or navigated later. Tab state lasts across navigation and is discarded when the tab closes. Firefox internal pages (`about:`, browser UI), extension pages, and other protected pages cannot be modified; the popup reports that restriction.
Glagolify updates existing text and watches for text nodes that are inserted or changed later. It leaves `script`, `style`, `noscript`, `template`, `textarea`, `select`, `option`, effective `contenteditable` regions, and documents in `designMode` untouched. Visible form labels, validation messages, and button text are converted, while text controls and selectable options are not. Textual DOM hidden by HTML, CSS, or `aria-hidden` is converted proactively so it is already Glagolitic if revealed. The implementation only changes text-node data and a reversible inline font fallback; it does not replace or wrap page elements. Disconnected nodes are restored and released after each mutation batch, while nodes moved and reconnected in the same batch keep their state.
@@ -39,10 +39,14 @@ The mapping uses dedicated Glagolitic letters for `Ё` (Yo), `Й` (I), `Щ` (Sht
## Bundled fonts
-Glagolify bundles two OFL-licensed fonts so converted characters remain legible and the popup can switch between historical letter shapes:
+The four selectable styles use two OFL-licensed typefaces:
-- **Round:** [Noto Sans Glagolitic Regular](https://github.com/google/fonts/tree/main/ofl/notosansglagolitic), the standard rounded Unicode Glagolitic design. Its license is `fonts/OFL.txt`.
-- **Angular:** [Shafarik Regular](https://github.com/google/fonts/tree/main/ofl/shafarik) with OpenType Stylistic Set 3 (`ss03`), which Shafarik defines as Croatian Angular or Square Glagolitic. Its license is `fonts/Shafarik-OFL.txt`.
+- **Round:** [Shafarik Regular](https://github.com/slavonic/Shafarik)'s standard Unicode Glagolitic glyphs. Its documentation identifies this character set as Round Glagolitic (`Okrugla glagoljica`), modeled on Bulgarian manuscript handwriting from the late 10th through early 12th centuries.
+- **Angular Sans:** [Noto Sans Glagolitic Regular](https://github.com/google/fonts/tree/main/ofl/notosansglagolitic), a modern sans design with angular letter construction.
+- **Historical Angular:** Shafarik's OpenType Stylistic Set 3 (`ss03`), identified in its documentation as Croatian Angular or Square Glagolitic.
+- **Missal Angular:** Shafarik's OpenType Stylistic Set 4 (`ss04`), modeled on Glagolitic used in 15th- and 16th-century printed missals from Kosinj and Venice.
+
+Shafarik's license is `fonts/Shafarik-OFL.txt`; Noto Sans Glagolitic's license is `fonts/OFL.txt`. The three Shafarik faces use the CSS `size-adjust` font descriptor at 115% to compensate for the typeface's small lowercase Glagolitic body. Noto Sans Glagolitic retains its native metrics.
The selected font is inserted before each affected element's existing computed font family, so non-Glagolitic characters continue to use the page's own typography. If the page genuinely changes an affected element's inline `font-family` while Glagolify is enabled, the extension retains that latest page-owned declaration, reapplies the selected Glagolitic fallback, and restores the latest page value when switched off.
@@ -54,4 +58,4 @@ No install or build step is required. With Node.js available, run:
npm test
```
-The test suite validates the complete 66-entry mapping, mixed-content preservation, case, already-Glagolitic behavior, authoritative per-tab/background frame inheritance, and persisted round/angular font selection using Node's built-in test runner.
+The test suite validates the complete 66-entry mapping, mixed-content preservation, case, already-Glagolitic behavior, authoritative per-tab/background frame inheritance, and persisted four-style font selection using Node's built-in test runner.
diff --git a/background.js b/background.js
index 91c2e82..6d0118a 100644
--- a/background.js
+++ b/background.js
@@ -2,7 +2,7 @@
"use strict";
const FONT_STYLE_KEY = "glagolifyFontStyle";
- const FONT_STYLES = new Set(["round", "angular"]);
+ const FONT_STYLES = new Set(["round", "angular-sans", "angular", "missal-angular"]);
const DEFAULT_FONT_STYLE = "round";
function createBackgroundController(api) {
diff --git a/content.css b/content.css
index 6600279..f674464 100644
--- a/content.css
+++ b/content.css
@@ -1,3 +1,13 @@
+@font-face {
+ font-family: "Glagolify Shafarik Round";
+ src: url("fonts/Shafarik-Regular.ttf") format("truetype");
+ font-style: normal;
+ font-weight: 400;
+ size-adjust: 115%;
+ font-display: swap;
+ unicode-range: U+2C00-2C5F;
+}
+
@font-face {
font-family: "Glagolify Noto Sans Glagolitic";
src: url("fonts/NotoSansGlagolitic-Regular.ttf") format("truetype");
@@ -12,7 +22,19 @@
src: url("fonts/Shafarik-Regular.ttf") format("truetype");
font-style: normal;
font-weight: 400;
+ size-adjust: 115%;
font-display: swap;
font-feature-settings: "ss03";
unicode-range: U+2C00-2C5F;
}
+
+@font-face {
+ font-family: "Glagolify Shafarik Missal Angular";
+ src: url("fonts/Shafarik-Regular.ttf") format("truetype");
+ font-style: normal;
+ font-weight: 400;
+ size-adjust: 115%;
+ font-display: swap;
+ font-feature-settings: "ss04";
+ unicode-range: U+2C00-2C5F;
+}
diff --git a/content.js b/content.js
index 74fc068..e81ded9 100644
--- a/content.js
+++ b/content.js
@@ -3,8 +3,10 @@
const EXCLUDED_ANCESTORS = "head, script, style, noscript, template, textarea, select, option";
const FONT_FAMILIES = Object.freeze({
- round: '"Glagolify Noto Sans Glagolitic"',
- angular: '"Glagolify Shafarik Angular"'
+ round: '"Glagolify Shafarik Round"',
+ "angular-sans": '"Glagolify Noto Sans Glagolitic"',
+ angular: '"Glagolify Shafarik Angular"',
+ "missal-angular": '"Glagolify Shafarik Missal Angular"'
});
let fontFamily = FONT_FAMILIES.round;
const trackedText = new Map();
diff --git a/popup.css b/popup.css
index 1c76f41..96631fa 100644
--- a/popup.css
+++ b/popup.css
@@ -1,3 +1,9 @@
+@font-face {
+ font-family: "Glagolify Shafarik Round";
+ src: url("fonts/Shafarik-Regular.ttf") format("truetype");
+ size-adjust: 115%;
+}
+
@font-face {
font-family: "Glagolify Noto Sans Glagolitic";
src: url("fonts/NotoSansGlagolitic-Regular.ttf") format("truetype");
@@ -6,9 +12,17 @@
@font-face {
font-family: "Glagolify Shafarik Angular";
src: url("fonts/Shafarik-Regular.ttf") format("truetype");
+ size-adjust: 115%;
font-feature-settings: "ss03";
}
+@font-face {
+ font-family: "Glagolify Shafarik Missal Angular";
+ src: url("fonts/Shafarik-Regular.ttf") format("truetype");
+ size-adjust: 115%;
+ font-feature-settings: "ss04";
+}
+
:root {
color-scheme: light dark;
font: 14px/1.45 system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
@@ -19,7 +33,7 @@
}
body {
- width: 292px;
+ width: 320px;
margin: 0;
color: #22202b;
background: #fbfaff;
@@ -75,12 +89,13 @@ header p {
.style-options {
display: grid;
- grid-template-columns: 1fr 1fr;
+ grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 8px;
}
.style-option {
position: relative;
+ min-width: 0;
}
.style-option input {
@@ -90,10 +105,11 @@ header p {
}
.style-option > span {
- display: flex;
+ display: grid;
+ grid-template-columns: minmax(0, 1fr) auto;
align-items: center;
- justify-content: space-between;
- min-height: 38px;
+ gap: 8px;
+ min-height: 56px;
border: 1px solid #d9d2e5;
border-radius: 9px;
padding: 7px 9px;
@@ -103,6 +119,11 @@ header p {
transition: border-color 120ms ease, background 120ms ease, color 120ms ease;
}
+.style-option > span > span:first-child {
+ min-width: 0;
+ line-height: 1.25;
+}
+
.style-option input:checked + span {
border-color: #6842b8;
background: #eee7fb;
@@ -122,9 +143,14 @@ header p {
.glyph {
font-size: 18px;
line-height: 1;
+ white-space: nowrap;
}
.round-glyph {
+ font-family: "Glagolify Shafarik Round";
+}
+
+.angular-sans-glyph {
font-family: "Glagolify Noto Sans Glagolitic";
}
@@ -132,6 +158,10 @@ header p {
font-family: "Glagolify Shafarik Angular";
}
+.missal-angular-glyph {
+ font-family: "Glagolify Shafarik Missal Angular";
+}
+
.status {
min-height: 20px;
margin-bottom: 10px;
diff --git a/popup.html b/popup.html
index 18b38f6..f842797 100644
--- a/popup.html
+++ b/popup.html
@@ -23,9 +23,17 @@
RoundⰀⰁ
+
+
diff --git a/popup.js b/popup.js
index 399bd19..5bb96a5 100644
--- a/popup.js
+++ b/popup.js
@@ -4,6 +4,7 @@
const status = document.getElementById("status");
const toggle = document.getElementById("toggle");
const fontStyleInputs = [...document.querySelectorAll('input[name="font-style"]')];
+ const fontStyles = new Set(fontStyleInputs.map((input) => input.value));
let activeTabId = null;
let currentEnabled = false;
let currentFontStyle = "round";
@@ -25,7 +26,7 @@
}
function renderFontStyle(style) {
- currentFontStyle = style === "angular" ? "angular" : "round";
+ currentFontStyle = fontStyles.has(style) ? style : "round";
for (const input of fontStyleInputs) {
input.checked = input.value === currentFontStyle;
}
diff --git a/tests/background.test.js b/tests/background.test.js
index b264f56..afccd14 100644
--- a/tests/background.test.js
+++ b/tests/background.test.js
@@ -114,41 +114,43 @@ test("keeps states isolated between tabs and reports protected tabs", async () =
);
});
-test("persists the font style and updates only enabled tabs", async () => {
- const fake = makeBrowser({ glagolifyFontStyle: "angular" });
+test("persists every font style and updates only enabled tabs", async () => {
+ const fake = makeBrowser({ glagolifyFontStyle: "missal-angular" });
const controller = createBackgroundController(fake.api);
assert.deepEqual(
await fake.send({ type: "glagolify:document-ready" }, { tab: { id: 7 } }),
- { enabled: false, fontStyle: "angular" }
+ { enabled: false, fontStyle: "missal-angular" }
);
await fake.send({ type: "glagolify:set-tab-enabled", tabId: 7, enabled: true });
await fake.send({ type: "glagolify:set-tab-enabled", tabId: 8, enabled: false });
- const broadcastCount = fake.broadcasts.length;
- assert.deepEqual(
- await fake.send({ type: "glagolify:set-font-style", fontStyle: "round" }),
- { fontStyle: "round", accepted: true }
- );
- assert.deepEqual(fake.storageWrites.at(-1), { glagolifyFontStyle: "round" });
- assert.equal(controller.getFontStyle(), "round");
- assert.deepEqual(fake.broadcasts.slice(broadcastCount), [
- {
- tabId: 7,
- message: {
- type: "glagolify:set-enabled",
- enabled: true,
- fontStyle: "round"
+ for (const fontStyle of ["round", "angular-sans", "angular", "missal-angular"]) {
+ const broadcastCount = fake.broadcasts.length;
+ assert.deepEqual(
+ await fake.send({ type: "glagolify:set-font-style", fontStyle }),
+ { fontStyle, accepted: true }
+ );
+ assert.deepEqual(fake.storageWrites.at(-1), { glagolifyFontStyle: fontStyle });
+ assert.equal(controller.getFontStyle(), fontStyle);
+ assert.deepEqual(fake.broadcasts.slice(broadcastCount), [
+ {
+ tabId: 7,
+ message: {
+ type: "glagolify:set-enabled",
+ enabled: true,
+ fontStyle
+ }
}
- }
- ]);
+ ]);
+ }
const writesBeforeRejection = fake.storageWrites.length;
const broadcastsBeforeRejection = fake.broadcasts.length;
assert.deepEqual(
await fake.send({ type: "glagolify:set-font-style", fontStyle: "italic" }),
- { fontStyle: "round", accepted: false }
+ { fontStyle: "missal-angular", accepted: false }
);
assert.equal(fake.storageWrites.length, writesBeforeRejection);
assert.equal(fake.broadcasts.length, broadcastsBeforeRejection);