multipleof4/stain.otf
1
0
Fork 0
mirror of https://github.com/multipleof4/stain.otf.git synced 2026-01-14 08:37:59 +00:00
Code Issues Packages Projects Releases Wiki Activity

Refactor: Preview pure Stain (no lowercase fallback)

Browse Source
This commit is contained in:
multipleof4
2025-11-08 23:00:55 -08:00
parent d2def65ee6
commit 365e6790a2
1 changed files with 10 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

18
index.html
View File

@@ -4,13 +4,11 @@
<meta charset="UTF-8" /> <meta charset="UTF-8" />
<title>StainFont Preview</title> <title>StainFont Preview</title>
<style> <style>
* { * { box-sizing: border-box; }
box-sizing: border-box;
}
body { body {
margin: 0; margin: 0;
padding: 2rem; padding: 2rem;
font-family: system-ui, -apple-system, BlinkMacSystemFont, -sans-serif; font-family: system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
background: #050505; background: #050505;
color: #f5f5f5; color: #f5f5f5;
} }
@@ -111,7 +109,7 @@ a.button-link:hover {
font-display: swap; font-display: swap;
} }
.preview-text.stain { .preview-text.stain {
font-family: "Stain", system-ui, -apple-system, BlinkMacSystemFont, sans-serif; font-family: "Stain", sans-serif;
} }
.preview-text.system { .preview-text.system {
font-family: system-ui, -apple-system, BlinkMacSystemFont, sans-serif; font-family: system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
@@ -130,7 +128,7 @@ a.button-link:hover {
<p>A readable experimental sans serif inspired by Candara’s soft geometry.</p> <p>A readable experimental sans serif inspired by Candara’s soft geometry.</p>
<label for="text">Custom Preview Text</label> <label for="text">Custom Preview Text</label>
<textarea id="text">StainFont Regular — CLEAN, HUMAN, READABLE. <textarea id="text">StainFont Regular — clean, human, readable.
The quick brown fox jumps over the lazy dog 0123456789.</textarea> The quick brown fox jumps over the lazy dog 0123456789.</textarea>
<div class="controls"> <div class="controls">
@@ -145,7 +143,7 @@ The quick brown fox jumps over the lazy dog 0123456789.</textarea>
<div class="preview"> <div class="preview">
<div class="preview-label">StainFont — Large Display</div> <div class="preview-label">StainFont — Large Display</div>
<div class="preview-text stain" id="pvDisplay"> <div class="preview-text stain" id="pvDisplay">
StainFont Regular — CLEAN, HUMAN, READABLE. StainFont Regular — clean, human, readable.
</div> </div>
</div> </div>
<div class="preview"> <div class="preview">
@@ -167,7 +165,7 @@ The quick brown fox jumps over the lazy dog 0123456789.</textarea>
<div class="note"> <div class="note">
This page uses a generated TTF from the repository build scripts. This page uses a generated TTF from the repository build scripts.
Update the generator to iterate on proportions, contrast, and spacing as needed. All A–Z, a–z, digits, and core punctuation are custom Stain glyphs.
</div> </div>
<script src="./vendor/paper-full.min.js"></script> <script src="./vendor/paper-full.min.js"></script>
@@ -175,6 +173,8 @@ The quick brown fox jumps over the lazy dog 0123456789.</textarea>
const textArea = document.getElementById("text"); const textArea = document.getElementById("text");
const pvDisplay = document.getElementById("pvDisplay"); const pvDisplay = document.getElementById("pvDisplay");
const pvSentence = document.getElementById("pvSentence"); const pvSentence = document.getElementById("pvSentence");
const pvSys = document.getElementById("pvSys");
const pvStain = document.getElementById("pvStain");
const btnSystem = document.getElementById("btnSystem"); const btnSystem = document.getElementById("btnSystem");
const btnStain = document.getElementById("btnStain"); const btnStain = document.getElementById("btnStain");
@@ -182,6 +182,8 @@ function syncText() {
const v = textArea.value || " "; const v = textArea.value || " ";
pvDisplay.textContent = v; pvDisplay.textContent = v;
pvSentence.textContent = v; pvSentence.textContent = v;
pvSys.textContent = v;
pvStain.textContent = v;
} }
textArea.addEventListener("input", syncText); textArea.addEventListener("input", syncText);
syncText(); syncText();