2d:null 2e:["$","title",null,{"children":"Chars BBox | Igor A1 | Observable"}] 33:T4a8,fillTable = () => { const head = fontList.map((d) => [ d.split(",")[0], ["char", "width", "height"] ]); const testPage = d3.select("svg#testWidth"); const body = fontList.map((_, i) => testPage .selectAll(`text.font_${i}`) .nodes() .map((d) => ({ char: d.__data__, width: d.getComputedTextLength().toFixed(2), height: d.getBBox().height.toFixed(2) })) ); const data = { head: head, body: body }; let s = ``; s += ``; data.head.forEach((d) => { s += `"; data.head.forEach((d, i) => { d[1].forEach((d) => (s += `"; data.body[0].forEach((_, j) => { s += ``; data.body.forEach((_, i) => { s += `

${d[0]}`; }); s += "
${d}`)); }); s += "
${data.body[i][j].char}`; s += `	${data.body[i][j].width}`; s += `	${data.body[i][j].height}`; }); }); d3.select("div#char_table").html(s); }34:[{"id":"3808e28ff65094180c42628b74cb842e5d88aad8b6de8cdf12c751a1433a610d186e0b0582c5543902f6be5137eed05ba1afec5ab89dc8a4c4de7af9f46018d8","href":"https://static.observableusercontent.com/files/3808e28ff65094180c42628b74cb842e5d88aad8b6de8cdf12c751a1433a610d186e0b0582c5543902f6be5137eed05ba1afec5ab89dc8a4c4de7af9f46018d8","name":"HamburgSymbols.ttf","type":"font/ttf","lastModified":1673020274196.28,"size":44736}] 31:{"id":"ac5ed9754cabc211","slug":"chars-bbox","title":"Chars BBox","thumbnail":"4adeb7f9e3390bdf70ad9b1ed5b269bdd09028970052230fa39ce02f6dbc87ec","access_level":"public","create_time":"$D2023-01-06T15:43:21.704Z","update_time":"$D2023-01-07T22:07:04.389Z","view_time":null,"first_public_time":"$D2023-01-06T15:43:21.704Z","has_unpublished_edits":null,"fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"6c5efb1eab88987b","login":"igor-a1","name":"Igor A1","avatar_url":"https://avatars-next.observableusercontent.com/7f0055f4279565990ec1cc324da008037750cdcc99d774567c194b9e9898c62f","tier":"starter_2024"},"version":107,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"4c750d0fb9bf5b48","login":"igor-a1","name":"Igor A1","avatar_url":"https://avatars-next.observableusercontent.com/7f0055f4279565990ec1cc324da008037750cdcc99d774567c194b9e9898c62f","tier":null}],"members":[{"type":"individual","id":"4c750d0fb9bf5b48","login":"igor-a1","name":"Igor A1","avatar_url":"https://avatars-next.observableusercontent.com/7f0055f4279565990ec1cc324da008037750cdcc99d774567c194b9e9898c62f","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":true,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"title":"Chars BBox","cells":[{"id":0,"value":"# Chars BBox","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":52,"value":"## Test page","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":40,"value":"TEST = {\n const svg = d3\n .select(\n DOM.svg(width, fontList.length * (1 + ASCII.length) * UNIT + MARGIN)\n )\n .attr(\"id\", \"testWidth\");\n\n fontList.forEach((font, findex) => {\n const g = svg\n .append(\"g\")\n .attr(\"id\", `testFont${findex}`)\n .attr(\n \"transform\",\n `translate(${[8, findex * (1 + ASCII.length) * UNIT]})`\n );\n\n g.append(\"text\").attr(\"y\", UNIT).attr(\"fill\", \"skyblue\").text(font);\n\n ASCII.forEach((row, ay) =>\n g\n .selectAll()\n .data(row)\n .join(\"text\")\n .attr(\"class\", `font_${findex}`)\n .attr(\"x\", (_, i) => i * EM)\n .attr(\"y\", (2 + ay) * UNIT)\n .style(\"font-family\", font)\n .style(\"font-size\", `${EM}px`)\n .text((d) => d)\n );\n });\n\n return svg.node();\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":69,"value":"## Table","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":93,"value":"Inputs.button(\"Get Chars Bounds\", { reduce: () => fillTable() })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":103,"value":" ","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":95,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":16,"value":"fontList = [\n \"Times New Roman, Georgia, serif\",\n \"Arial, Helvetica, sans-serif\",\n \"Lucida Console, Courier, monospace\",\n \"AstroFont\"\n]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":5,"value":"## Const","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":36,"value":"ASCII = [\n \" !\\\"#$%&'()+,-./0123456789:;<=>?@\",\n \"ABCDEFGHIJKLMNOPQRSTUVWXYZ[\\\\]^_`\",\n \"abcdefghijklmnopqrstuvwxyz{\|}~\"\n].map((d) => d.split(\"\"))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":7,"value":"MARGIN =4","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":9,"value":"EM = 16","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":13,"value":"UNIT = MARGIN + EM + MARGIN","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":18,"value":"## AstroFont","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":20,"value":"html`HamburgSymbols* font is Public Domain (2005) and contains astrological symbols`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":32,"value":"","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":26,"value":"async function readAstroFont() {\n return new Promise(async (resolve, reject) => {\n const res = await fetch(urlAstroFont);\n if (!res.ok) return reject(`Error: ${res.status} ${res.statusText}`);\n const blob = await res.blob();\n const reader = new FileReader();\n reader.readAsDataURL(blob);\n reader.onloadend = () => resolve(reader.result);\n });\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":23,"value":"urlAstroFont = FileAttachment(\"HamburgSymbols.ttf\").url()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W34","stdlib":"1","titling":"auto"}} 32:"$31:body"