198 lines
6.5 KiB
HTML
198 lines
6.5 KiB
HTML
|
<!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>
|