multipleof4/stain.otf
1
0
Fork 0
mirror of https://github.com/multipleof4/stain.otf.git synced 2026-01-13 16:17:55 +00:00
Code Issues Packages Projects Releases Wiki Activity

Feat: Add all-caps pangram to sample text

Browse Source
This commit is contained in:
multipleof4
2025-11-09 11:42:30 -08:00
parent 7d22b6074c
commit 5a0f6696bf
1 changed files with 8 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16
index.html
View File

@@ -137,20 +137,20 @@
<div class="input-wrap">
<span>Sample text:</span>
<input id="text" value="Stain: The quick brown fox jumps over the lazy dog ABC abc" />
<input id="text" value="Stain: The quick brown fox jumps over the lazy dog. THE QUICK BROWN FOX JUMPS OVER THE LAZY DOG. ABC abc" />
</div>
<div class="grid">
<section class="panel">
<div class="label">Stain</div>
<div id="stainSample" class="sample stain">
Stain: The quick brown fox jumps over the lazy dog ABC abc
Stain: The quick brown fox jumps over the lazy dog. THE QUICK BROWN FOX JUMPS OVER THE LAZY DOG. ABC abc
</div>
</section>
<section class="panel">
<div class="label">System (Candara / fallback)</div>
<div id="sysSample" class="sample sys">
Stain: The quick brown fox jumps over the lazy dog ABC abc
Stain: The quick brown fox jumps over the lazy dog. THE QUICK BROWN FOX JUMPS OVER THE LAZY DOG. ABC abc
</div>
</section>
</div>
@@ -165,15 +165,15 @@
const sysSample = document.getElementById("sysSample");
const update = () => {
const content = text.value || "Stain: The quick brown fox jumps over the lazy dog ABC abc";
const content = text.value || "Stain: The quick brown fox jumps over the lazy dog. THE QUICK BROWN FOX JUMPS OVER THE LAZY DOG. ABC abc";
const fs = size.valueAsNumber || 40;
const ls = (track.valueAsNumber || 3) / 100;
sizeVal.textContent = fs + "px";
trackVal.textContent = ls.toFixed(2) + "em";
sizeVal.textContent = `${fs}px`;
trackVal.textContent = `${ls.toFixed(2)}em`;
[stainSample, sysSample].forEach((el) => {
el.textContent = content;
el.style.fontSize = fs + "px";
el.style.letterSpacing = ls + "em";
el.style.fontSize = `${fs}px`;
el.style.letterSpacing = `${ls}em`;
});
};