2d:null 2e:["$","title",null,{"children":"Font getBBox | Martien van Steenbergen | Observable"}] 33:T674,viewof BBoxTest = { const grid = Grid({divisions: 6, aspect: {tall: 2, wide: 16}, opacity: .2}).sketch(); const {pad, plot, q, M} = grid; const ƒ = (n) => n.toFixed(1); const {fontFamily, fontWeight, fontSize} = font; const g = pad .append("g") .style("font-family", fontFamily) .style("font-weight", fontWeight) .style("font-size", fontSize) ; const t = g .append("g") .attr("transform", `translate(${M(3)}, ${M(1)})`) ; t .append("text") .text(text) ; const {x, y, width, height} = getBBox(text, font); t .append("rect") .attr("stroke", "red") .attr("fill", "transparent") .attr("width", width) .attr("height", height) .attr("x", x) .attr("y", y) ; const metrics = [ {label: "x", value: x}, {label: "y", value: y}, {label: "width", value: width}, {label: "height", value: height}, {label: "wide", value: width/q()}, {label: "tall", value: height/q()}, ]; const texts = g .append("g") .attr("transform", `translate(0, ${q(3)})`) .attr("font-family", fontFamily) .attr("font-weight", "normal") .attr("font-size", "18px") .attr("fill", "grey") .attr("text-anchor", "end") .selectAll("text") .data(metrics) ; texts .join("text") .text(d => `${d.label}:`) .attr("dx", q(7)) .attr("dy", (_, i) => q(2 * i - 1)) ; texts .join("text") .text(d => `${ƒ(d.value)}`) .attr("dx", q(13)) .attr("dy", (_, i) => q(2 * i - 1)) ; Object.defineProperty(grid.frame.node(), "value", {get: () => ({x, y, width, height})}); return grid.frame.node(); }34:T511,{ const log = document.getElementById("martien"); // log.textContent = ""; const font = new FontFace( // fontFamily, // `url("https://fonts.googleapis.com/css2?family=${fontFamily}&display=swap")` // "Poppins", // "url(https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap)", // "url('https://fonts.googleapis.com/css2?family=Poppins&display=swap')" "FontFamily Oxygen", // "url(https://fonts.gstatic.com/s/oxygen/v5/qBSyz106i5ud7wkBU-FrPevvDin1pK8aKteLpeZ5c0A.woff2)", "url(https://fonts.googleapis.com/css2?family=Oxygen)" // "url('https://fonts.googleapis.com/css2?family=Oxygen:wght@300;400;700&display=swap')" ); document.fonts.add(font); // log.textContent += `${font.family}: ${font.status}…`; let pad = d3.create("svg").attr("width",width); pad.append("text").text(font.family) .style("font-size", 72) .attr("x", 36) .attr("y", 72) ; document.fonts.load("1px FontFamily Oxygen").then( () => { // log.textContent += `${font.status}`; // font: loaded pad.style("font-family", font.family) }, (err) => { console.error(err); }, ); return pad.node(); }35:[{"id":"356be48b978f76bc3c9666d06414ffa44a6e778a8f8af76df95d49013a6ad60f55a557646ecee51c703efd414228d0e72b40f9c0f97880513bf20d16078ab6bf","href":"https://static.observableusercontent.com/files/356be48b978f76bc3c9666d06414ffa44a6e778a8f8af76df95d49013a6ad60f55a557646ecee51c703efd414228d0e72b40f9c0f97880513bf20d16078ab6bf","name":"Neutraface Condensed Thin.woff2","type":"font/woff2","lastModified":1681487853664.083,"size":20536},{"id":"3c4068045dce3aad4e342eab9d49a98f0b0ae7b3b4500a81f60f40c7cff66eeb00f8631bc50cd4064e4680a58c6f6cdbb0858f9d15456f74ce3c0c7e8fad9a17","href":"https://static.observableusercontent.com/files/3c4068045dce3aad4e342eab9d49a98f0b0ae7b3b4500a81f60f40c7cff66eeb00f8631bc50cd4064e4680a58c6f6cdbb0858f9d15456f74ce3c0c7e8fad9a17","name":"Neutraface Text Book.woff2","type":"font/woff2","lastModified":1681487539403.394,"size":39340},{"id":"c1eb4d5185d8b205eb4b5f08555d73cfb7bc96afed8147975c3a7836da1c9163c178b5cdf469e23782e1470f1c3adc6bb308757446749f3d4240fc473d108767","href":"https://static.observableusercontent.com/files/c1eb4d5185d8b205eb4b5f08555d73cfb7bc96afed8147975c3a7836da1c9163c178b5cdf469e23782e1470f1c3adc6bb308757446749f3d4240fc473d108767","name":"Taz-SemiBold.woff2","type":"font/woff2","lastModified":1681487992257.455,"size":14920}] 31:{"id":"8d3f5125bd69133b","slug":"font-getbbox","title":"Font getBBox","thumbnail":"44f783c33f7f3e7c519ae5c7354558c73eb168cda0a57ad568da2960bde49162","access_level":"public","create_time":"$D2022-12-13T15:22:51.546Z","update_time":"$D2024-04-10T13:27:21.501Z","view_time":null,"first_public_time":"$D2023-04-14T16:11:31.939Z","fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"6e89ba4444f0cc85","login":"martien","name":"Martien van Steenbergen","avatar_url":"https://avatars-next.observableusercontent.com/40dc8e4f86d0cf89184b173b4d1d88336e5728c175479f33261ced3496adb3c2","tier":"starter_2024"},"version":439,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"3c5ecb707ecd20a7","login":"martien","name":"Martien van Steenbergen","avatar_url":"https://avatars-next.observableusercontent.com/40dc8e4f86d0cf89184b173b4d1d88336e5728c175479f33261ced3496adb3c2","tier":null}],"members":[{"type":"individual","id":"3c5ecb707ecd20a7","login":"martien","name":"Martien van Steenbergen","avatar_url":"https://avatars-next.observableusercontent.com/40dc8e4f86d0cf89184b173b4d1d88336e5728c175479f33261ced3496adb3c2","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":{"id":"e447e7868515bb74","slug":"fonts","title":"Fonts & Typefaces","owner":{"id":"6e89ba4444f0cc85","login":"martien","name":"Martien van Steenbergen"}},"type":"notebook","body":{"title":"Font getBBox","cells":[{"id":0,"value":"# Font getBBox\n## How do I get `getBBox()` to always return the proper dimensions?\nSomehow `getBBox()` returned width is wrong for Roboto Condensed and Roboto Slab. Never found out why exactly. Maybe it’s the metrics file. Weird and unpredictable behaviour.\n\n1. Open https://observablehq.com/@martien/font-getbbox:\n - has font *PT Sans Narrow* selected;\n - shows a red outline around the text; its bounding box;\n1. Select font *Roboto Slab*:\n - rerenders the text in the new font;\n - shows a bbox that is shorter than the text: text now extends beyond the bbox;\n1. Switching between fonts while keeping everything else the same:\n - shows a wrong bbox most of the time.\n1. Change the font size or the text:\n - bbox now shows proper sizes.\n\n\n\nGuess: it may have something to do with the time it needs to load fonts. I have tried several approaches but failed.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":286,"value":"// [...document.fonts].map(f => Object.fromEntries(Object.keys(f.constructor.protptype).map(k => [k, f[k]])))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":287,"value":"{\n fontFamily, fontSize, fontWeight, text;\n let f = [...document.fonts]\n .map(f => Object.fromEntries(Object.keys(f.constructor.prototype).map(k => [k, f[k]])));\n\n document.fonts.ready.then(\n () => { \n // const fontList = (\n // [...document.fonts]\n // .map(f => Object.fromEntries(Object.keys(f.constructor.prototype).map(k => [k, f[k]])))\n f = f\n .filter(f => f.family === fontFamily && f.status === \"loaded\")\n ;\n }\n );\n return f;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":302,"value":"[...document.fonts].map(f => Object.fromEntries(Object.keys(f.constructor.prototype).map(k => [k, f[k]])))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":322,"value":"{\n fontFamily, fontSize, fontWeight, text;\n document.fonts.ready.then(() => console.log(\"ready\"));\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":57,"value":"viewof fontFamily = Inputs.radio(fonts, {label: \"Font Family\", value: \"PT Sans Narrow\"})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":241,"value":"viewof fontSize = Inputs.range([6,72], {label: \"Font Size\", value: 36, step: 1})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":279,"value":"viewof fontWeight = Inputs.range([100,900], {label: \"Font Weight\", value: 400, step: 100})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":188,"value":"viewof text = Inputs.text({value: \"The quick brown fox jumps over the lazy dog\"});","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":278,"value":"{ // Source: https://observablehq.com/@mbostock/autosize-svg\n // ref https://talk.observablehq.com/t/getbbox/1222\n const svg = html``;\n\n document.fonts.ready.then(() => {\n\n // Add the SVG element to the DOM so we can determine its size.\n document.body.appendChild(svg);\n\n // Computing the bounding box of the content.\n const box = svg.querySelector(\"[name=content]\").getBBox();\n\n // Remove the SVG element from the DOM.\n svg.remove();\n\n // Set the viewBox.\n svg.setAttribute(\"width\", box.width);\n svg.setAttribute(\"height\", box.height);\n svg.setAttribute(\"viewBox\", `${box.x} ${box.y} ${box.width} ${box.height}`);\n });\n\n return svg;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":34,"value":"$33","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":30,"value":"function getBBox(txt, {fontFamily, fontSize, fontWeight}) {\n const svg = d3.create('svg').attr(\"name\", \"margarine\");\n const tmp = svg\n .append(\"text\")\n .style(\"font-family\", fontFamily)\n .style(\"font-size\", fontSize)\n .style(\"font-weight\", fontWeight)\n .text(txt)\n ;\n document.body.appendChild(svg.node());\n \n const b = tmp.node().getBBox();\n \n document.body.removeChild(svg.node());\n tmp.remove();\n return b;\n const { x, y, width, height } = b;\n return { x, y, width, height };\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":83,"value":"fonts = [\n \"Roboto Condensed\",\n \"Roboto Slab\",\n \"Roboto\",\n \"PT Sans Narrow\",\n \"Courier\",\n // \"Neutraface Text Book\",\n // \"Neutraface Condensed Thin\",\n // \"Taz SemiBold\",\n \"IBM Plex Mono\",\n \"Noto Sans Mono\",\n \"Noto Sans\",\n]","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":40,"value":"font = ({\n fontFamily,\n fontWeight,\n fontSize,\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":195,"value":"","pinned":true,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":340,"value":"$34","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":351,"value":"

martien

","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":349,"value":"document.getElementById(\"martien\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":32,"value":"import {Grid} from \"@martien/gridder\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":347,"value":"hallo =\"hallo\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W35","stdlib":"1","titling":"auto"}} 32:"$31:body"