Tinkering with code and algorithms for fun
Public
Edited
Nov 7, 2024
Importers
7 stars
boxFonts
html`<style>
.boxfont2 {
font-family: "Fira Code";
font-size: 48px;
line-height: 59px;
color: #FFF;
background-color: #000;
}
</style>
<pre class="boxfont2">
┌─┬┐ ╔═╦╗ ╓─╥╖ ╒═╤╕
│ ││ ║ ║║ ║ ║║ │ ││
├─┼┤ ╠═╬╣ ╟─╫╢ ╞═╪╡
└─┴┘ ╚═╩╝ ╙─╨╜ ╘═╧╛
┌───────────────────┐
│ ╔═══╗ Some Text │▒
│ ╚═╦═╝ in the box │▒
╞═╤══╩══╤═══════════╡▒
│ ├──┬──┤ │▒
│ └──┴──┘ │▒
└───────────────────┘▒
▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒
</pre>`
function initBoxFont(chosenBoxFont, size, lineHeight) {
const _size = {
Cozette: "24px",
"Fira Code": "medium",
"Fixedsys Excelsior": "16px",
"Iosevka Term": "large",
"Iosevka Extended": "large"
};
const _lineHeight = {
Cozette: "24px",
"Fira Code": "1.5em",
"Fixedsys Excelsior": "14px",
"Iosevka Term": "normal",
"Iosevka Extended": "normal"
};
return html`<style>
.boxfont {
font-family: "${chosenBoxFont || "Fira Code"}";
font-size: ${size || _size[chosenBoxFont || "Fira Code"]};
line-height: ${lineHeight || _lineHeight[chosenBoxFont || "Fira Code"]};
}
</style>`;
}
initBoxFont(chosenBoxFont)
boxFonts = html`<style>
@font-face {
font-family: "Cozette";
font-style: normal;
src: url(${await FileAttachment("cozette-subset.woff").url()}) format("woff");
}
@font-face {
font-family: "Fira Code";
font-style: normal;
src: url(${await FileAttachment("fira-code-subset.woff").url()}) format("woff");
}
@font-face {
font-family: "Fixedsys Excelsior";
font-style: normal;
src: url(${await FileAttachment("fsex302-alt-subset.woff").url()}) format("woff");
}
@font-face {
font-family: "Iosevka Extended";
font-style: normal;
src: url(${await FileAttachment("iosevka-extended-subset@1.woff").url()}) format("woff");
}
@font-face {
font-family: "Iosevka Term";
font-style: normal;
src: url(${await FileAttachment("iosevka-term-subset.woff").url()}) format("woff");
}
</style>`
function box(strings, ...rest) {
let output = []
for (let i = 0; i < rest.length; i++) {
output.push(strings[i], rest[i]);
}
output.push(strings[strings.length-1]);
return html`<pre style="overflow-x: auto;" class=boxfont>${output.join('')}</pre>`;
}
import {Radio} from "@observablehq/inputs"
chosenBoxFont
Type JavaScript, then Shift-Enter. Ctrl-space for more options. Arrow ↑/↓ to switch modes.
Purpose-built for displays of data
Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
