3e:null 3f:["$","title",null,{"children":"Circle Labels: Serif vs Monospaced | Ben Pyrik | Observable"}] 45:[] 43:{"id":"2e44038da733fecb","slug":"circle-labels-serif-vs-monospaced","title":"Circle Labels: Serif vs Monospaced","thumbnail":"431da89efa7c015de3646127d6263f8b0951080e432454c10a7ab1e85feaecb3","access_level":"public","create_time":"$D2018-11-05T23:31:54.365Z","update_time":"$D2018-11-06T20:08:20.609Z","view_time":null,"first_public_time":"$D2018-11-06T20:08:30.702Z","has_unpublished_edits":null,"fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"97e03c8520c8407e","login":"bryik","name":"Ben Pyrik","avatar_url":"https://avatars-next.observableusercontent.com/855ee5aed892f1112efa8abfe4d3b82a1cd5a6db03fc4c2456abab99fe563c60","tier":"starter_2024","bio":"Agrarian cyberpunk."},"version":144,"publish_version":144,"role":null,"authored":false,"authors":[{"type":"individual","id":"a068242f2b7fc4a4","login":"bryik","name":"Ben Pyrik","avatar_url":"https://avatars-next.observableusercontent.com/855ee5aed892f1112efa8abfe4d3b82a1cd5a6db03fc4c2456abab99fe563c60","tier":null,"bio":"Agrarian cyberpunk."}],"members":[{"type":"individual","id":"a068242f2b7fc4a4","login":"bryik","name":"Ben Pyrik","avatar_url":"https://avatars-next.observableusercontent.com/855ee5aed892f1112efa8abfe4d3b82a1cd5a6db03fc4c2456abab99fe563c60","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Circle Labels: Serif vs Monospaced","cells":[{"id":0,"value":"md`# Circle Labels: Serif vs Monospaced\n\nSomewhat following a [previous notebook](https://beta.observablehq.com/@bryik/centering-text-inside-a-circle), I'm interested in seeing if a monospaced font looks better centered inside a circle. To do this, I'll compare two fonts side-by-side: Iowan Old Style (a serif typeface) and Fira Mono (a monospaced typeface).\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":124,"value":"FiraMono = html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":117,"value":"md`## Tools`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":24,"value":"md`The alphabet:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":8,"value":"alphabet = { return \"ABCDEFGHIJKLMNOPQRSTUVWXYZ\".split(\"\"); }","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":26,"value":"md`A single letter that endlessly cycles between \"A\" and \"Z\", changing every second.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":21,"value":"// Async generator that sets \"letter\" to a new letter of the alphabet every second.\nletter = {\n let letterIndex = 0;\n while (true) {\n // Sleep for 1 second.\n await Promises.delay(1000);\n // Yield a single letter from the alphabet.\n yield alphabet[letterIndex++];\n // Once letterIndex has reached the end of the alphabet, reset it back at \"A\".\n if (letterIndex === alphabet.length) {\n letterIndex = 0\n }\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":122,"value":"md`### Centering Function`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":41,"value":"md`I will need a function for centering the text element inside a circle using the text element's bounding box. This function takes in a D3 selection of an SVG group and returns the ${tex`x`} and ${tex`y`} coordinates of the text element's center. The SVG group contains a circle and a text element.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":10,"value":"function center(circleGroup) {\n // Get current x and y values.\n let letter = circleGroup.select('text');\n let x = Number(letter.attr('x'));\n let y = Number(letter.attr('y'));\n \n // Get bounding box and compute the center point.\n let bb = letter.node().getBBox();\n console.log('Bounding box:', bb);\n let centerX = bb.width / 2;\n let centerY = bb.height / 4;\n console.log(`Center point: (${centerX}, ${centerY})`);\n \n // Adjust x and y.\n letter.attr('x', x - centerX);\n letter.attr('y', y + centerY);\n \n return [(x - centerX), (y + centerY)];\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":128,"value":"md`## Visual Comparison`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":46,"value":"md`The left-circle is Iowan Old Style and the right is Fira Mono.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":18,"value":"circles = html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":75,"value":"centering = {\n let circleSvg = d3.select(circles);\n let defaultCircle = circleSvg.select(\"#defaultCircle\");\n let firaCircle = circleSvg.select(\"#firaCircle\");\n return {\n \"center of letter with default font\": center(defaultCircle),\n \"center of letter with Fira Mono\": center(firaCircle)\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":58,"value":"md`Some observations:\n\n- For Iowan Old Style, not all letters share the same x-coordinate.\n\n- For Fira Mono, the center coordinates never change. To put it another way, every letter has the same center.\n\nLetters and characters of monospaced fonts all have [the same width](https://en.wikipedia.org/wiki/Monospaced_font), so it makes sense that the x-coordinates are equal but I'm not sure why the y-coordinates are the same.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":15,"value":"md`## Libraries`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":12,"value":"d3 = require(\"d3@5\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W45","stdlib":"1"}} 44:"$43:body"