2a:null 2b:["$","title",null,{"children":"Unicode box drawing formatter | Job van der Zwan | Observable"}] 30:T702,md` In another cell, initialize the \`boxfont\` CSS class and the \`box\` tagged template by calling \`initBoxFont\`: \`\`\`js initBoxFont() // Defaults to Fira Code \`\`\` You can optionally pass \`"Fira Code"\`, \`Fixedsys Excelsior\`, \`"Iosevka Term"\`, \`"Iosevka Extended"\` or \`"Cozette"\` as font customizations. \`\`\`js initBoxFont("Iosevka Term") \`\`\` To do a box drawing with the chosen font, use the \`box\` tagged template on a text string: \`\`\`js box\` ┏━┓ ┏━┓ ┏━┓ ┏━┓ ┏━┓ ┏━┓ ┏━┓ ┏━┓ ┃ ┗━┛ ┃ ┃ ┗━┛ ┃ ┃ ┗━┛ ┃ ┃ ┗━┛ ┃ ┃ ┏━┓ ┃ ┃ ┏━┓ ┃ ┃ ┏━┓ ┃ ┃ ┏━┓ ┃ ┗━┛ ┃ ┗━┛ ┃ ┗━┛ ┗━┛ ┃ ┗━┛ ┃ ┗━┛ ┏━┓ ┃ ┏━┓ ┃ ┏━┓ ┏━┓ ┃ ┏━┓ ┃ ┏━┓ ┃ ┗━┛ ┃ ┃ ┗━┛ ┃ ┃ ┗━┛ ┃ ┃ ┗━┛ ┃ ┃ ┏━┓ ┃ ┃ ┏━┓ ┃ ┃ ┏━┓ ┃ ┃ ┏━┓ ┃ ┗━┛ ┗━┛ ┗━┛ ┃ ┗━┛ ┃ ┗━┛ ┗━┛ ┗━┛ ┏━┓ ┏━┓ ┏━┓ ┃ ┏━┓ ┃ ┏━┓ ┏━┓ ┏━┓ ┃ ┗━┛ ┃ ┃ ┗━┛ ┃ ┃ ┗━┛ ┃ ┃ ┗━┛ ┃ ┃ ┏━┓ ┃ ┃ ┏━┓ ┃ ┃ ┏━┓ ┃ ┃ ┏━┓ ┃ ┗━┛ ┃ ┗━┛ ┃ ┗━┛ ┗━┛ ┃ ┗━┛ ┃ ┗━┛ ┏━┓ ┃ ┏━┓ ┃ ┏━┓ ┏━┓ ┃ ┏━┓ ┃ ┏━┓ ┃ ┗━┛ ┃ ┃ ┗━┛ ┃ ┃ ┗━┛ ┃ ┃ ┗━┛ ┃ ┃ ┏━┓ ┃ ┃ ┏━┓ ┃ ┃ ┏━┓ ┃ ┃ ┏━┓ ┃ ┗━┛ ┗━┛ ┗━┛ ┗━┛ ┗━┛ ┗━┛ ┗━┛ ┗━┛ \` \`\`\` The above produces:`31:T7e8,md` (If you want support for other fonts, leave a comment with a link to the font in question. If their license allows it I will convert it to a small \`.woff\` file with the relevant glyph subset and add it) ## Advanced Usage If you just want to override the font size and line height, you can pass these as optional parameters to \`initBoxFont\`: \`\`\`js { const chosenBoxFont = "Cozette"; const size = "48px"; const lineHeight = "52px"; return initBoxFont(chosenBoxFont, size, lineHeight); } \`\`\` ### Custom Styling Under the hood the \`box\` template literal just produces a \`

 (your text)

\` as output. So to do more customized styling, you can just add \`class="boxfont"\` to any appropriate html element of your choosing, plus whatever CSS you wish to apply. For example: \`\`\`html

┏━━━━━━━━┓
┃╔══════╗┃
┃║╭────╮║┃
┃║│Boxy│║┃
┃║╰────╯║┃
┃╚══════╝┃
┗━━━━━━━━┛

\`\`\` results in:

Similarly, since importing \`boxFonts\` and evaluating it in a cell loads all of embedded fonts, you can just define your own \`class\`:`32:[{"id":"aefc3c27e8e94cbb14a9bbb183e33b38287eb3ec2889442c6a4026dc48c43d573dc241478998d750b0e4d462d2e6d8749fe17ade49f7622be544ba46a808774a","href":"https://static.observableusercontent.com/files/aefc3c27e8e94cbb14a9bbb183e33b38287eb3ec2889442c6a4026dc48c43d573dc241478998d750b0e4d462d2e6d8749fe17ade49f7622be544ba46a808774a","name":"cozette-subset.woff","type":"font/woff","lastModified":1616622600298.706,"size":5164},{"id":"7febfd8e0b7cbcb677360b7c2a087c23d0d3bdf99591af5bd1b77d19b54db6e5491e687e84dcc5d9a8d9e619419806cd6c0f943aecb371276b9ae62cb5946192","href":"https://static.observableusercontent.com/files/7febfd8e0b7cbcb677360b7c2a087c23d0d3bdf99591af5bd1b77d19b54db6e5491e687e84dcc5d9a8d9e619419806cd6c0f943aecb371276b9ae62cb5946192","name":"iosevka-extended-subset@1.woff","type":"font/woff","lastModified":1616622600342.041,"size":23836},{"id":"663c5ee983ebbdbb06daad4700e2320664c0cb9c61044bd79b274830f24611764876926c2e28cfec5080fbc2dd405928e66fd22a53d595cbea0785d57ee96476","href":"https://static.observableusercontent.com/files/663c5ee983ebbdbb06daad4700e2320664c0cb9c61044bd79b274830f24611764876926c2e28cfec5080fbc2dd405928e66fd22a53d595cbea0785d57ee96476","name":"fira-code-subset.woff","type":"font/woff","lastModified":1616622600374.815,"size":25920},{"id":"9d2b4176055bffb25c3468ee4b30fecd6f39eedf0acd9c9403e7842325908b6dbd05ce80d24826457681922cee7b113a82118cbbaa9278dd9fb37b1b5419e31b","href":"https://static.observableusercontent.com/files/9d2b4176055bffb25c3468ee4b30fecd6f39eedf0acd9c9403e7842325908b6dbd05ce80d24826457681922cee7b113a82118cbbaa9278dd9fb37b1b5419e31b","name":"iosevka-term-subset.woff","type":"font/woff","lastModified":1616665817141.165,"size":23812},{"id":"dfdcf47667b484a6214ea019629b548033f927e66cb0f86b8d81cead8163dcb460021caf20f94a95aa05466d21093403914524e154ee9ef820b4c6c7a011e305","href":"https://static.observableusercontent.com/files/dfdcf47667b484a6214ea019629b548033f927e66cb0f86b8d81cead8163dcb460021caf20f94a95aa05466d21093403914524e154ee9ef820b4c6c7a011e305","name":"fsex302-alt-subset.woff","type":"font/woff","lastModified":1616773070193.688,"size":8948}] 2e:{"id":"77e16b4b70e1d7f4","slug":"unicode-box-drawing-formatter","title":" Unicode box drawing formatter","thumbnail":"72054d612ef6807d0f910a6606584140767bcfcfb4bc5827c3dbf1785addba8c","access_level":"public","create_time":"$D2021-03-14T10:55:11.318Z","update_time":"$D2024-11-07T12:51:23.559Z","view_time":null,"first_public_time":"$D2024-11-07T11:54:23.031Z","has_unpublished_edits":null,"fork":false,"stars":8,"starred":false,"owner":{"type":"team","id":"3f83172cfde1e56a","login":"jobleonard","name":"Job van der Zwan","avatar_url":"https://avatars-next.observableusercontent.com/808373580aa09723ceabb9cb31d01ea6db287280b59eaa63618e259f5d28dd71","tier":"starter_2024"},"version":583,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"d36034ddfb454bdd","login":"jobleonard","name":"Job van der Zwan","avatar_url":"https://avatars-next.observableusercontent.com/808373580aa09723ceabb9cb31d01ea6db287280b59eaa63618e259f5d28dd71","tier":null}],"members":[{"type":"individual","id":"d36034ddfb454bdd","login":"jobleonard","name":"Job van der Zwan","avatar_url":"https://avatars-next.observableusercontent.com/808373580aa09723ceabb9cb31d01ea6db287280b59eaa63618e259f5d28dd71","tier":null,"role":"editor"},{"type":"team","id":"3f83172cfde1e56a","login":"jobleonard","name":"Job van der Zwan","avatar_url":"https://avatars-next.observableusercontent.com/808373580aa09723ceabb9cb31d01ea6db287280b59eaa63618e259f5d28dd71","tier":"starter_2024","role":"viewer"}],"comments":[],"custom_thumbnail":true,"trashed":false,"lapsed":null,"subscribed":null,"forks":3,"collection":null,"type":"notebook","body":{"titling":"auto","title":" Unicode box drawing formatter","cells":[{"id":402,"value":"MakingTheObservableTitleExtractorHappy = html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":387,"value":"box`\n ╔═══════════════════════════════╗\n ║ Unicode box drawing formatter ╟┐\n ╚╤══════════════════════════════╝┝┓\n └┰──────────────────────────────┘┃\n ┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┛\n\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":0,"value":"md`I have a soft spot for the [box drawing](https://en.wikipedia.org/wiki/Box_Drawing_(Unicode_block%29) and [block elements](https://en.wikipedia.org/wiki/Block_Elements) in unicode, but they require that the font being used has good support for them. When I tried using it with the default Observable styling the results were very uneven. So here is a little notebook with embedded (subsetted) fonts to ensure that box drawings render correctly, with a helper function to make it easier to produce them from plaintext input.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":113,"value":"viewof chosenBoxFont = Radio([\"Fira Code\", \"Fixedsys Excelsior\", \"Iosevka Term\", \"Iosevka Extended\", \"Cozette\"], {label: \"Box font\", value: \"Fira Code\"})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":172,"value":"box`U+250x ─ ━ │ ┃ ┄ ┅ ┆ ┇ ┈ ┉ ┊ ┋ ┌ ┍ ┎ ┏\nU+251x ┐ ┑ ┒ ┓ └ ┕ ┖ ┗ ┘ ┙ ┚ ┛ ├ ┝ ┞ ┟\nU+252x ┠ ┡ ┢ ┣ ┤ ┥ ┦ ┧ ┨ ┩ ┪ ┫ ┬ ┭ ┮ ┯\nU+253x ┰ ┱ ┲ ┳ ┴ ┵ ┶ ┷ ┸ ┹ ┺ ┻ ┼ ┽ ┾ ┿\nU+254x ╀ ╁ ╂ ╃ ╄ ╅ ╆ ╇ ╈ ╉ ╊ ╋ ╌ ╍ ╎ ╏\nU+255x ═ ║ ╒ ╓ ╔ ╕ ╖ ╗ ╘ ╙ ╚ ╛ ╜ ╝ ╞ ╟\nU+256x ╠ ╡ ╢ ╣ ╤ ╥ ╦ ╧ ╨ ╩ ╪ ╫ ╬ ╭ ╮ ╯\nU+257x ╰ ╱ ╲ ╳ ╴ ╵ ╶ ╷ ╸ ╹ ╺ ╻ ╼ ╽ ╾ ╿\nU+258x ▀ ▁ ▂ ▃ ▄ ▅ ▆ ▇ █ ▉ ▊ ▋ ▌ ▍ ▎ ▏\nU+259x ▐ ░ ▒ ▓ ${chosenBoxFont === \"Cozette\" ? \"\\n\\n(Cozette misses some geometric glyphs)\" : \"▔ ▕ ▖ ▗ ▘ ▙ ▚ ▛ ▜ ▝ ▞ ▟\\n\"}\n┌─┬┐ ╔═╦╗ ╓─╥╖ ╒═╤╕\n│ ││ ║ ║║ ║ ║║ │ ││\n├─┼┤ ╠═╬╣ ╟─╫╢ ╞═╪╡\n└─┴┘ ╚═╩╝ ╙─╨╜ ╘═╧╛\n┌───────────────────┐\n│ ╔═══╗ Some Text │▒\n│ ╚═╦═╝ in the box │▒\n╞═╤══╩══╤═══════════╡▒\n│ ├──┬──┤ │▒\n│ └──┴──┘ │▒\n└───────────────────┘▒\n ▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":373,"value":"md`## Examples`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":198,"value":"{\n let side1 = \"\";\n let side2 = \"\";\n let side3 = \"\"\n for (let i = 0; i < chosenBoxFont.length; i++) {\n side1 += \"─\";\n side2 += \"═\";\n side3 += \"━\";\n }\n return box`\n┏━━${side3}━━┓\n┃╔═${side2}═╗┃\n┃║╭${side1}╮║┃\n┃║│${chosenBoxFont}│║┃\n┃║╰${side1}╯║┃\n┃╚═${side2}═╝┃\n┗━━${side3}━━┛\n`\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":84,"value":"box`\n1━━━━━━━━━━━┓\n┃2━━━━━━┓ ┃6━━━━━━━━━┓8━━━━━━━━━┓10━━━━━━┓\n┃┃3━┓4━┓┃5━┓┃┃7━┓┌─┐┌─┐┃┃9━┓┌─┐┌─┐┃┃┌─┐11━┓┃\n┃┃┃S┃┃H┃┃┃E┃┃┃┃ ┃│3││5│┃┃┃L┃│9││3│┃┃│6│┃A-┃┃\n┃┃┗━┛┗━┛┃┗━┛┃┃┗━┛└─┘└─┘┃┃┗━┛└─┘└─┘┃┃└─┘┗━━┛┃\n┃┗━━━━━━┛ ┃┗━━━━━━━━━┛┗━━━━━━━━━┛┗━━━━━━━┛\n┗━━━━━━━━━━━┛\n ┌─┐┌─┐┌─┐12━┓┌─┐13┓┌─┐┌─┐┌──┐┌─┐14━┓┌─┐\n │1││8││7│┃BY┃│7│┃T┃│4││5││10││2│┃OR┃│5│\n └─┘└─┘└─┘┗━━┛└─┘┗━┛└─┘└─┘└──┘└─┘┗━━┛└─┘\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":260,"value":"md`## Basic usage\n\nImport the fonts, the initializer and (optionally) the formatting helper:\n\n\\`\\`\\`js\n import {initBoxFont, boxFonts, box} from \"@jobleonard/unicode-box-drawing-formatter\"\n\\`\\`\\`\n\nPut \\`boxFonts\\` in its own cell (it appears that Observable will not initialize the fonts until the imported cell that includes them is evaluated at least once. Thanks to Christoph Pahmeyer for figuring this out)`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":563,"value":"boxFonts","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":560,"value":"$30","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":544,"value":"box`\n ┏━┓ ┏━┓ ┏━┓ ┏━┓ ┏━┓ ┏━┓ ┏━┓ ┏━┓ \n ┃ ┗━┛ ┃ ┃ ┗━┛ ┃ ┃ ┗━┛ ┃ ┃ ┗━┛ ┃ \n ┃ ┏━┓ ┃ ┃ ┏━┓ ┃ ┃ ┏━┓ ┃ ┃ ┏━┓ ┃ \n ┗━┛ ┃ ┗━┛ ┃ ┗━┛ ┗━┛ ┃ ┗━┛ ┃ ┗━┛ \n ┏━┓ ┃ ┏━┓ ┃ ┏━┓ ┏━┓ ┃ ┏━┓ ┃ ┏━┓ \n ┃ ┗━┛ ┃ ┃ ┗━┛ ┃ ┃ ┗━┛ ┃ ┃ ┗━┛ ┃ \n ┃ ┏━┓ ┃ ┃ ┏━┓ ┃ ┃ ┏━┓ ┃ ┃ ┏━┓ ┃ \n ┗━┛ ┗━┛ ┗━┛ ┃ ┗━┛ ┃ ┗━┛ ┗━┛ ┗━┛ \n ┏━┓ ┏━┓ ┏━┓ ┃ ┏━┓ ┃ ┏━┓ ┏━┓ ┏━┓ \n ┃ ┗━┛ ┃ ┃ ┗━┛ ┃ ┃ ┗━┛ ┃ ┃ ┗━┛ ┃ \n ┃ ┏━┓ ┃ ┃ ┏━┓ ┃ ┃ ┏━┓ ┃ ┃ ┏━┓ ┃ \n ┗━┛ ┃ ┗━┛ ┃ ┗━┛ ┗━┛ ┃ ┗━┛ ┃ ┗━┛ \n ┏━┓ ┃ ┏━┓ ┃ ┏━┓ ┏━┓ ┃ ┏━┓ ┃ ┏━┓ \n ┃ ┗━┛ ┃ ┃ ┗━┛ ┃ ┃ ┗━┛ ┃ ┃ ┗━┛ ┃ \n ┃ ┏━┓ ┃ ┃ ┏━┓ ┃ ┃ ┏━┓ ┃ ┃ ┏━┓ ┃ \n ┗━┛ ┗━┛ ┗━┛ ┗━┛ ┗━┛ ┗━┛ ┗━┛ ┗━┛\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":526,"value":"$31","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":480,"value":"html`\n

\n┌─┬┐  ╔═╦╗  ╓─╥╖  ╒═╤╕\n│ ││  ║ ║║  ║ ║║  │ ││\n├─┼┤  ╠═╬╣  ╟─╫╢  ╞═╪╡\n└─┴┘  ╚═╩╝  ╙─╨╜  ╘═╧╛\n┌───────────────────┐\n│  ╔═══╗ Some Text  │▒\n│  ╚═╦═╝ in the box │▒\n╞═╤══╩══╤═══════════╡▒\n│ ├──┬──┤           │▒\n│ └──┴──┘           │▒\n└───────────────────┘▒\n ▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒\n

`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":423,"value":"md`(Note that if you just wish to import the fonts and define your own styling, and don't plan to use the default CSS class or the \\`box\\` tagged template, they don't need to be imported either)\n\n

\n\n## Licence and fonts used\n\nThis notebook is CC-BY-SA, but the embedded subsetted fonts still fall under their original licence AFAIK.\n\nTODO: figure out how to properly (in the legal sense) attribute these open source fonts and their licences.\n\nCozette: https://github.com/slavfox/Cozette\n\nFixedsys Excelsior: https://github.com/kika/fixedsys\n\nFira Code: https://github.com/tonsky/FiraCode\n\nIosevka: https://typeof.net/Iosevka/\n\n

\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":78,"value":"function initBoxFont(chosenBoxFont, size, lineHeight) {\n const _size = {\n Cozette: \"24px\",\n \"Fira Code\": \"medium\",\n \"Fixedsys Excelsior\": \"16px\",\n \"Iosevka Term\": \"large\",\n \"Iosevka Extended\": \"large\"\n };\n\n const _lineHeight = {\n Cozette: \"24px\",\n \"Fira Code\": \"1.5em\",\n \"Fixedsys Excelsior\": \"14px\",\n \"Iosevka Term\": \"normal\",\n \"Iosevka Extended\": \"normal\"\n };\n\n return html``;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":227,"value":"initBoxFont(chosenBoxFont)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":220,"value":"boxFonts = html``","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":93,"value":"function box(strings, ...rest) {\n let output = []\n for (let i = 0; i < rest.length; i++) {\n output.push(strings[i], rest[i]);\n }\n output.push(strings[strings.length-1]);\n return html`

${output.join('')}

`;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":115,"value":"import {Radio} from \"@observablehq/inputs\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":118,"value":"chosenBoxFont","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":582,"value":"box`▓\n├─key name : key value\n└─foo\n ├─bar : 123\n ├─keys with\n │ newlines are\n │ supported\n │ ├─x : 123\n │ └─y : 345\n └─baz : 567`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W32","stdlib":"1"}} 2f:"$2e:body"