31:[] 2f:{"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"},{"id":124,"value":"FiraMono = html``","pinned":false,"hidden":false,"mode":"ojs"},{"id":117,"value":"md`## Tools`","pinned":false,"hidden":false,"mode":"ojs"},{"id":24,"value":"md`The alphabet:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":8,"value":"alphabet = { return \"ABCDEFGHIJKLMNOPQRSTUVWXYZ\".split(\"\"); }","pinned":false,"hidden":false,"mode":"ojs"},{"id":26,"value":"md`A single letter that endlessly cycles between \"A\" and \"Z\", changing every second.`","pinned":false,"hidden":false,"mode":"ojs"},{"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"},{"id":122,"value":"md`### Centering Function`","pinned":false,"hidden":false,"mode":"ojs"},{"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"},{"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"},{"id":128,"value":"md`## Visual Comparison`","pinned":false,"hidden":false,"mode":"ojs"},{"id":46,"value":"md`The left-circle is Iowan Old Style and the right is Fira Mono.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":18,"value":"circles = html``","pinned":false,"hidden":false,"mode":"ojs"},{"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"},{"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"},{"id":15,"value":"md`## Libraries`","pinned":false,"hidden":false,"mode":"ojs"},{"id":12,"value":"d3 = require(\"d3@5\")","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W31","stdlib":"1","titling":"auto"}