21:null 22:["$","title",null,{"children":"Return of the Body Snatchers | Michaël Guitton | Observable"}] 27:T1be0,

▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓██████████▓▓████████▓▓▓▓██████████▓▓██████▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓
▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓██░░░░  ████████    ████████      ██████    ██▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓
▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓██░░▒▒▓▓    ░░                                ██▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓
▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓██░░  ▒▒▓▓    ░░    ██  ██        ████  ██      ██▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓
▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓██    ▒▒▒▒    ░░    ██████░░      ████████░░    ██▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓
▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓██    ░░░░    ░░  ██        ░░  ██          ░░  ██▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓
▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓██░░      ░░░░  ░░██            ██                ██▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓
▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓██    ▒▒▒▒  ░░▒▒  ░░██      ▒▒██  ██      ▒▒██      ██▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓
▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓██    ▒▒▒▒  ░░▒▒  ░░██      ████████      ██████    ██▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓
▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓██░░  ░░░░  ░░▒▒  ░░████    ▓▓██▒▒██      ▓▓██▒▒    ██▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓
▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓██        ░░░░  ░░    ██        ████████████████  ██▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓
▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓██        ░░  ░░░░      ████████              ██  ██▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓
▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓██  ▒▒▒▒▓▓  ▒▒▒▒                ████████████    ██▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓
▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓██  ░░░░░░  ▒▒▒▒  ████                  ██      ██▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓
▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓██      ░░  ▒▒▒▒      ██          ░░    ██      ██▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓
▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓██    ░░  ░░░░        ██████████████████      ██▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓
▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓██    ░░    ░░░░        ██    ██      ██      ██▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓
▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓██          ░░▒▒  ░░▒▒    ████  ██████        ██▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓
▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓██████            ░░▒▒    ░░                        ██████▒▒▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓
▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓██        ██        ░░▒▒                      ░░▒▒            ▒▒▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓
▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓██  ░░████▓▓████    ░░░░        ▒▒  ░░      ░░  ▒▒            ▒▒▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓
▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓██  ░░▓▓▓▓▓▓████    ░░  ██        ▒▒▒▒▒▒          ██  ██████  ▒▒▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓
▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓██  ░░▓▓▓▓▓▓████    ░░    ██      ▒▒▒▒▒▒        ██  ██▓▓▓▓██  ▒▒▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓
▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓██  ▒▒░░▒▒▓▓████▒▒▒▒▓▓▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒██▓▓▓▓██  ▒▒▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓
▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓██      ░░▓▓████▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▒▒▒▒▒▒▓▓▓▓▓▓▓▓▓▓▓▓████████  ▒▒▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓
▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓██      ▒▒▓▓████▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▒▒▓▓▓▓▓▓▓▓▓▓▓▓██████      ▒▒▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓
▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓████▒▒▓▓▓▓████▓▓▓▓▓▓████▓▓▓▓████▓▓▓▓██████▓▓▓▓████████      ▒▒▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓
▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓████▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓██▓▓▓▓▓▓▓▓▓▓▓▓▓▓██████▓▓████▒▒▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓
▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓████████▓▓▓▓▓▓██▓▓████▓▓▓▓▓▓▓▓██▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓

28:T56d,~~~JavaScript { " 1": /* one................. */ "${ "\u2160" }", " 2": /* two................. */ "${ "\u2161" }", " 3": /* three............... */ "${ "\u2162" }", " 4": /* four................ */ "${ "\u2163" }", " 5": /* five................ */ "${ "\u2164" }", " 6": /* six................. */ "${ "\u2165" }", " 6": /* six late form....... */ "${ "\u2185" }", " 7": /* seven............... */ "${ "\u2166" }", " 8": /* eight............... */ "${ "\u2167" }", " 9": /* nine................ */ "${ "\u2168" }", " 10": /* ten................. */ "${ "\u2169" }", " 11": /* eleven.............. */ "${ "\u216a" }", " 12": /* twelve.............. */ "${ "\u216b" }", " 50": /* fifty early form.... */ "${ "\u2186" }", " 50": /* fifty............... */ "${ "\u216c" }", " 100": /* one hundred......... */ "${ "\u216d" }", " 100": /* reversed one hundred */ "${ "\u2183" }", " 500": /* five hundred........ */ "${ "\u216e" }", " 1_000": /* one thousand........ */ "${ "\u216f" }", " 1_000": /* one thousand........ */ "${ "\u2180" }", " 5_000": /* five thousand....... */ "${ "\u2181" }", " 10_000": /* ten thousand........ */ "${ "\u2182" }", " 50_000": /* fifty thousand...... */ "${ "\u2187" }", "100_000": /* one hundred thousand */ "${ "\u2188" }", } ~~~29:T55f,${isLocal ? `` : { Brick: html` `, Google: [ html``, html``, html`` ], Bunny: [ html``, html`` ] }[provider] } 2a:[] 25:{"id":"fe9a820e3a26ad89","slug":"return-of-the-body-snatchers-your-carefully-chosen-typeface-may-not-be-what-you-think-it-is","title":"Return of the Body Snatchers","thumbnail":"0877394899a57bee348f2b2eafa26bbf8e4a9a8b18d97dce347c953d6b56c097","access_level":"public","create_time":"$D2022-09-28T14:35:40.096Z","update_time":"$D2026-02-17T13:45:14.578Z","view_time":null,"first_public_time":"$D2025-08-12T03:21:00.434Z","has_unpublished_edits":null,"fork":true,"stars":0,"starred":false,"owner":{"type":"team","id":"4c1622bb5c37477f","login":"galopin","name":"Michaël Guitton","avatar_url":"https://avatars-next.observableusercontent.com/10e2fe999ac95c8686156fd07e96a686520149a4eef18a95f97795b7a7be1e29","tier":"starter_2024"},"version":188,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"950eb34948878085","login":"galopin","name":"Michaël Guitton","avatar_url":"https://avatars-next.observableusercontent.com/b59822ff41962e9448473fadd4a11819ac725b074ad3868aabf532bade0ac00d","tier":null}],"members":[{"type":"individual","id":"950eb34948878085","login":"galopin","name":"Michaël Guitton","avatar_url":"https://avatars-next.observableusercontent.com/b59822ff41962e9448473fadd4a11819ac725b074ad3868aabf532bade0ac00d","tier":null,"role":"editor"},{"type":"team","id":"4c1622bb5c37477f","login":"galopin","name":"Michaël Guitton","avatar_url":"https://avatars-next.observableusercontent.com/10e2fe999ac95c8686156fd07e96a686520149a4eef18a95f97795b7a7be1e29","tier":"starter_2024","role":"viewer"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":1,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Return of the Body Snatchers","cells":[{"id":0,"value":"$${[\n md`# Return of the Body Snatchers`,\n md`## Your Carefully Chosen Typeface May Not Be What You Think It Is`\n].map(($_) =>\n Object.assign($_, {\n style: \"text-wrap: balance;\"\n })\n)}","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":6,"value":"$27","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":8,"value":"Does SpongeBob SquarePants sprite looks distorted?","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":16,"value":"viewof monospace = Object.assign(\n Inputs.radio(fonts, {\n format: (o) => [\n Object.assign(\n html`${o}`,\n ok.includes(o)\n ? { style: \"margin-bottom: -1px; border-bottom: green solid 1px\" }\n : local.includes(o)\n ? {}\n : { style: \"margin-bottom: -1px; border-bottom: orange solid 1px\" }\n ),\n local.includes(o)\n ? \"\"\n : Object.assign(html`❡`, {\n style: \"margin-left: var(--length2); color: var(--syntax-comment)\"\n })\n ],\n label: \"Monospaced font\",\n value: \"Menlo\"\n }),\n { id: +new Date() }\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":36,"value":"viewof provider = Inputs.radio(providers, {\n label: \"Web font provider\",\n value: \"Google\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":87,"value":"viewof fallback = Inputs.toggle(\n ((on, off) => ({\n label: \"Generic fallback\",\n values: [on, off],\n value: on\n }))(\", monospace\", \"\")\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":19,"value":"$${annotate(\n `🦉`,\n `A monospaced font is a font whose letters, numbers, and other printable glyphs are _supposed_ to each occupy _the same amount_ of horizontal space. This contrasts with proportional fonts, where the characters and spacings have variable widths.`\n)}","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":25,"value":"

A good monospaced typeface is not an easy thing to draw. The obvious problems with monospaced fonts are the lack of proportional spacing and the resulting misshapen characters that try to fill — or fit into — the fixed spaces.

— Allan Halley, Monospaced Fonts

\n\n","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":27,"value":"In days of yore, monospace text sizing in some browsers on some operating systems turned out to be completely unintuitive and maddening: Those browsers would typically show `

`, ``, and `` tagged text in a too small font.\n\n${html`\n\n  [5_000]: https://rsms.me/inter/glyphs/?g=uni2181\n [10_000]: https://rsms.me/inter/glyphs/?g=uni2182\n [50_000]: https://rsms.me/inter/glyphs/?g=uni2187\n[100_000]: https://rsms.me/inter/glyphs/?g=uni2188","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":140,"value":"## Shapeshifting","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":139,"value":"Shapeshifting may occur in Safari when the fixed-width character is coupled with a combining diacritical mark such as a dieresis or an overline.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":138,"value":"\nIn the event that your primary font doesn’t include a particular diacritic mark, browsers will render the missing character with the next available font in your font-family stack.
\n— Robb Owen, Mind your language
\n
","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":137,"value":"{\n  const sample = (\n    recompose = false,\n    {\n      glyphs = [\n        [\"À\", \"à\", \"Â\", \"â\", \"Ã\", \"ã\", \"Ä\", \"ä\"],\n        [\"A\", \"a\"]\n      ]\n    } = {}\n  ) => {\n    const [accented, unadorned] = glyphs;\n\n    return html`${Array.from(\n      [0, 2, 3, 8].reduce(\n        /* thank you, Mulan & Mike Bostock - mg */\n        (\n          (m, r) => (acc, x) =>\n            r(acc, m(x))\n        )(\n          (x) => [x, x],\n          (a, b) => a.concat(b)\n        ),\n        []\n      ),\n      (x, i) =>\n        html`${accented[i]} / ${(unadorned[i & 1] +\n          JSON.parse('\"\\\\u030' + x + '\"'))[\n          !!recompose ? \"normalize\" : \"valueOf\"\n        ](\"NFC\")}`\n    )}`;\n  };\n\n  yield md`Please compare the following glyphs:\n\n1. precomposed / decomposed\n\n  ${sample()}\n\n2. precomposed / recomposed\n\n  ${sample(true)}`;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":136,"value":"The W3C Character Model for the World Wide Web 1.0: Normalization and other W3C specifications (such as XML 1.0 5th Edition) recommend using Normalization Form C for all content, because this form avoids potential interoperability problems arising from the use of canonically equivalent, yet different, character sequences in document formats on the Web.
","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":135,"value":"I don’t want to jump to conclusions but it seems that the substitution happens more frequently when importing a monospaced font family from a web font service such as [Google Fonts][0]. This is less likely to happen when using Brick. (Sadly this web font service is no longer actively maintained.)\n\n[0]: https://fonts.google.com/\n[1]: https://brick.im/fonts/","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":134,"value":"There is no remedy possible for this however:\n\n- `${\"A\"}` / `${\"A\" + \"\\u033F\"}` / `${\"A\" + \"\\u0305\"}` / `${\"A\" + \"\\u0304\"}` / `${\"A\" + \"\\u0331\"}` / `${\"A\" + \"\\u0332\"}` / `${\"A\" + \"\\u0333\"}`\n- `${\"a\"}` / `${\"a\" + \"\\u033F\"}` / `${\"a\" + \"\\u0305\"}` / `${\"a\" + \"\\u0304\"}` / `${\"a\" + \"\\u0331\"}` / `${\"a\" + \"\\u0332\"}` / `${\"a\" + \"\\u0333\"}`\n- `${\"0.0\"}` / `${\"0.0\" + \"\\u033F\"}` / `${\"0.0\" + \"\\u0305\"}` / `${\"0.0\" + \"\\u0304\"}` / `${\"0.0\" + \"\\u0331\"}` / `${\"0.0\" + \"\\u0332\"}` / `${\"0.0\" + \"\\u0333\"}`","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":50,"value":"The glyph under the *double overline*, *vinculum*, and *macron* or above the *macron below*, *low line*, and *double low line* — whether it’s a letter or digit — may not look the same or be as tall. It’s especially easy to spot when the fixed-width `0` digit is dotted or slashed. Whisky Tango Foxtrot!?","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":132,"value":"On the flip side, Google Chrome for Android does not perform any glyph substitution but fails miserably to render the various Roman numeral / [overline](https://codepoints.net/U+0305) / [underline](https://codepoints.net/U+0332) symbols and will display a missing glyph symbol instead.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":131,"value":"## Ligatures","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":162,"value":"Ligatures are [combinations of two or more letters](https://practicaltypography.com/ligatures.html) that are joined together to form a single glyph, often used in typography to improve the appearance and readability of text. Examples include the characters æ and œ, as well as common combinations like fi and fl.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":63,"value":"~~~JavaScript\n'##'\na &= b\na && b\na != b \na >= b\na <= b\na === b\na !== b\n++i\ni--\n(x) => x * x\n~~~","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":161,"value":"viewof ligatures = Inputs.toggle({ label: \"Disable ligatures\", value: false })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":160,"value":"According to Matthew Butterick, [ligatures in programming fonts](https://practicaltypography.com/ligatures-in-programming-fonts-hell-no.html) ${Object.assign(html`are a misguided trend and a terrible idea.`, { style: `quotes: \"“\" \"”\"` })}\n\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":10,"value":"---","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":23,"value":"$29","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":21,"value":"isLocal = local.includes(monospace)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":184,"value":"providers = [\"Brick\", \"Bunny\", \"Google\"]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":129,"value":"fonts = combine(local, external[provider])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":97,"value":"local = [\n  \"Andale Mono\",\n  \"Cascadia Mono\",\n  \"Courier\",\n  \"Courier New\",\n  \"Menlo\",\n  \"Monaco\",\n  \"Segoe UI Mono\",\n  \"ui-monospace\"\n]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":33,"value":"external = {\n  const Brick = combine(common, [\"Latin Modern Mono\"]);\n  const Bunny = combine(common, [\n    \"Courier Prime\",\n    \"IBM Plex Mono\",\n    \"JetBrains Mono\",\n    \"Noto Sans Mono\",\n    \"Oxygen Mono\",\n    \"PT Mono\"\n  ]);\n  yield {\n    Brick,\n    Bunny,\n    Google: combine(Bunny, [\"Consolas\", \"Cutive Mono\", \"Droid Sans Mono\"])\n  };\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":12,"value":"ok = combine(\n  [\"Andale Mono\", \"Courier New\", \"Menlo\"],\n  \"Brick\" === provider\n    ? [\"Fira Mono\", \"Source Code Pro\"]\n    : \"Bunny\" === provider\n    ? [\"PT Mono\"]\n    : []\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":82,"value":"common = [\n  \"Anonymous Pro\",\n  \"Fira Mono\",\n  \"Inconsolata\",\n  \"Roboto Mono\",\n  \"Source Code Pro\"\n]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":79,"value":"combine = (a, b) => a.concat(b).sort()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":14,"value":"","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":127,"value":"slots = grid(\"X X X\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":126,"value":"grid = (/* template */ areas, value = areas.match(/\\S+/g) || []) =>\n  Object.freeze(\n    Object.defineProperties(value, {\n      areas: { value },\n      template: {\n        get: function () {\n          return this + \"\";\n        }\n      },\n      toString: {\n        value: function () {\n          return '\"' + this.join(\" \") + '\"';\n        }\n      },\n      valueOf: {\n        value: function () {\n          return [this].join(\"\");\n        }\n      }\n    })\n  )","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":181,"value":"import { annotate } from \"@galopin/misclib-routines\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W2a","stdlib":"1"}}
26:"$25:body"