<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Times New Bastard</title> <script> function chunk(n) { let i = 0; let out = []; while (i < this.length) { out.push(this.slice(i, i + n)); i += n; } out.push(this.slice(i, i + n)); return out.filter(xs => xs.length > 0); } Object.defineProperty(Array.prototype, "chunk", { value: chunk, }); Object.defineProperty(String.prototype, "chunk", { value: chunk, }); // https://cohost.org/doq/post/2442981-span-style-font // font-family: "Times New Roman", "Liberation Serif", serif; //font-family: "Arial", "Helvetica", "Liberation Sans", sans-serif; function main() { const input = document.getElementById("input"); const output = document.getElementById("output"); const preview = document.getElementById("preview"); const serif_font = document.getElementById("serif-font"); const sans_serif_font = document.getElementById("sans-serif-font"); function serif(str) { const span = document.createElement("span"); span.style = serif_font.value.split("\n").join(""); span.innerText = str; return span; } function sans_serif(str) { const span = document.createElement("span"); span.style = sans_serif_font.value.split("\n").join(""); span.innerText = str; return span; } // good news! https://github.com/weiweihuanghuang/Times-New-Bastard seems to be based on _characters_, not letters function update() { const text = input.value; const chunks = text.chunk(7); const magic = chunks.flatMap(ch => [ serif(ch.slice(0, 6)), ...(ch[6] ? [sans_serif(ch[6])] : []), ]); preview.innerHTML = ""; preview.append(...magic); output.value = `<span style=" /* your style here */ ">${magic.map(el => el.outerHTML).join("")}</span>`; } function update_on_change(elem) { elem.addEventListener("change", update); elem.addEventListener("keyup", update); } update_on_change(input); update_on_change(serif_font); update_on_change(sans_serif_font); output.onclick = () => { navigator.clipboard.writeText(output.value); }; } window.onload = main; </script> <style> #input { grid-area: a; } #preview { word-break: break-word; overflow: hidden; width: 100%; height: 100%; grid-area: b; } #output { grid-area: c; } #serif-font { grid-area: d; } #sans-serif-font { grid-area: e; } #promo { grid-area: f; } body { margin: 0; margin: 1rem; height: calc(100vh - 2rem); display: grid; gap: 0.25rem; /* didn't feel like actual names */ grid-template-areas: "a a" "b b" "c c" "d e" "f f"; grid-template-rows: repeat(4, 1fr) min-content; } textarea { resize: none; } /* using vars would be good,,, */ @media (prefers-color-scheme: dark) { body, a { color: #dcfdfd; background-color: #021111; } textarea { color: #dcfdfd; background-color: #031d1d; border: 1px solid #dcfdfd; } textarea:focus { outline: 1px solid #dcfdfd; } } @media (prefers-color-scheme: light) { body, a { background-color: #dcfdfd; color: #021111; } textarea { background-color: #e6ffff; color: #021111; border: 1px solid #021111; } textarea:focus { outline: 1px solid #021111; } } </style> </head> <body> <textarea id="input" title="input"></textarea> <div id="preview" title="preview, should be pretty much exactly accurate" ></div> <textarea id="output" readonly title="click to copy (only on https)" ></textarea> <textarea type="text" id="serif-font" title="serif css style"> font-family: "Times New Roman", "Liberation Serif", serif;</textarea > <textarea type="text" id="sans-serif-font" title="sans-serif css style"> font-family: "Arial", "Helvetica", "Liberation Sans", sans-serif;</textarea > <div id="promo"> <a href="./" download="times-new-bastard.html" >download this page</a > which was made by mehbark who has a <a href="https://terezi.pyrope.net">website</a> and is on <a href="https://cohost.org/mehbark">cohost</a> and <a href="https://pl.pyrope.net/terezi">fedi</a>. here are some more links: <a href="https://patreon.com">patreon</a> <a href="https://example.org">example</a> <a href="https://pyrope.net/mcai" >discord server that i made so i could continue saying "man, computers are incredible" every day</a > </div> </body> </html>