3c:null 3d:["$","title",null,{"children":"Problem with curved text mark | Jo Wood | Observable"}] 43:T77d,function curvedTextOriginal( txt, { cPath, showPath = false, anchor = "middle", fontSize = 10, letterSpacing = 1, wordSpacing = 1 } = {} ) { const smooth = d3.line().curve(d3.curveCatmullRom); return (_, { x, y }) => { const pathData = smooth(cPath.map(([px, py]) => [x(px), y(py)])); // We could calculate the path and text lengths by creating tempory // addtions to the DOM. Path lengths are identical in both browsers // but the text length is not. /* const svgNamespace = "http://www.w3.org/2000/svg"; const tempSvg = document.createElementNS(svgNamespace, "svg"); const tempPath = document.createElementNS(svgNamespace, "path"); tempPath.setAttribute("d", pathData); tempSvg.appendChild(tempPath); const tempText = document.createElementNS(svgNamespace, "text"); tempText.textContent = txt; tempText.style.fontSize = `${fontSize}px`; tempText.style.letterSpacing = `${letterSpacing}px`; tempText.style.wordSpacing = `${wordSpacing}px`; tempSvg.appendChild(tempText); document.body.appendChild(tempSvg); const pathLength = tempPath.getTotalLength(); const textLength = tempText.getComputedTextLength(); document.body.removeChild(tempSvg); console.log("Lengths", pathLength, textLength); */ return htl.svg` ${txt} `; }; }44:[] 41:{"id":"1b63355e548aad14","slug":null,"title":"Problem with curved text mark","thumbnail":"64819325a0ffe063a3b29cc5648e949d5bc1d6f7231750cdddac37e36e2bb5b4","access_level":"unlisted","create_time":"$D2023-08-13T09:31:38.928Z","update_time":"$D2023-08-13T17:10:16.160Z","view_time":null,"first_public_time":null,"has_unpublished_edits":null,"fork":{"id":"be1824065fec9df8","slug":"curved-text-mark","title":"Curved Text Mark","owner":{"id":"9461f58b209074d5","login":"jwolondon","name":"Jo Wood"}},"stars":1,"starred":false,"owner":{"type":"team","id":"9461f58b209074d5","login":"jwolondon","name":"Jo Wood","avatar_url":"https://avatars-next.observableusercontent.com/27f72cecd1ac20853a533421fab228ce5f611cbc0986c1e420f7d3b1eb49ef50","tier":"starter_2024","bio":"Professor of Visual Analytics interested in design, geovisualization, visual storytelling and computational thinking."},"version":347,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"e2432cc13dc447d3","login":"jwolondon","name":"Jo Wood","avatar_url":"https://avatars-next.observableusercontent.com/27f72cecd1ac20853a533421fab228ce5f611cbc0986c1e420f7d3b1eb49ef50","tier":null,"bio":"Professor of Visual Analytics interested in design, geovisualization, visual storytelling and computational thinking."}],"members":[{"type":"individual","id":"e2432cc13dc447d3","login":"jwolondon","name":"Jo Wood","avatar_url":"https://avatars-next.observableusercontent.com/27f72cecd1ac20853a533421fab228ce5f611cbc0986c1e420f7d3b1eb49ef50","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Problem with curved text mark","cells":[{"id":0,"value":"# Problem with curved text mark","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":338,"value":"info(\n `This problem has been solved but I leave the original here for reference (and the solution below it).`\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":158,"value":"Observable Plot has the ability to create [text marks](https://observablehq.com/plot/marks/text) with a variety of styling options, but it cannot display text along curved paths. \n\nThis function is an attempt to fill that gap, allowing a curved path to be specified with an array of points and text displayed along its length.\n\nThe problem is that text placement seems to be browser-dependent. The interactive placement below appears to work as expected in Safari, but not Chrome (e.g. text not correctly centred in Chrome, and left and right anchors behave unexpectedly.)","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":77,"value":"$43","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":245,"value":"curves = ({\n flat: [\n [50, 200],\n [550, 100]\n ],\n moderate: [\n [50, 120],\n [200, 190],\n [300, 210],\n [400, 190],\n [550, 120]\n ],\n sinuous: [\n [100, 130],\n [200, 100],\n [300, 250],\n [500, 20]\n ]\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":179,"value":"viewof opt = Inputs.form({\n cType: Inputs.radio([\"flat\", \"moderate\", \"sinuous\"], {\n label: \"Curve type\",\n value: \"moderate\"\n }),\n showPath: Inputs.toggle({ label: \"Show path line\", value: true }),\n anchor: Inputs.radio([\"start\", \"middle\", \"end\"], {\n label: \"Text anchor\",\n value: \"middle\"\n }),\n fontSize: Inputs.range([0, 32], { label: \"Font size\", step: 1, value: 16 }),\n letterSpacing: Inputs.range([-6, 32], {\n label: \"Letter spacing\",\n step: 0.01,\n value: 1\n }),\n wordSpacing: Inputs.range([-6, 32], {\n label: \"Word spacing\",\n step: 0.01,\n value: 2\n })\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":5,"value":"{\n return Plot.plot({\n width: 640,\n height: 300,\n x: { domain: [0, 640], grid: true, tickSpacing: 50 },\n y: { domain: [0, 300], grid: true, tickSpacing: 50 },\n marks: [\n curvedTextOriginal(\"This is some text that should curve along a path\", {\n cPath: curves[opt.cType],\n showPath: opt.showPath,\n anchor: opt.anchor,\n fontSize: opt.fontSize,\n letterSpacing: opt.letterSpacing,\n wordSpacing: opt.wordSpacing\n })\n ]\n });\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":321,"value":"## Corrected Version\n\nThanks to Fabian Iwand (@mootari) for [a solution](https://talk.observablehq.com/t/problem-with-cross-browser-curved-text-via-plot/8183). \n\n- Plot applies its own styles to whitespace around text, so this function needs to override to default (`normal`) whitespace behaviour so that text length is interpreted correctly by browsers.\n\nThe modified version includes some other better practice changes including:\n\n- Use unique IDs generated at runtime to avoid risk of name clashes.\n- Consistent use of `none` for non-visible styling.\n- Shorter `href` to the path (`xlink` not necessary).","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":324,"value":"function curvedText(\n txt,\n {\n cPath,\n showPath = false,\n anchor = \"middle\",\n fontSize = 10,\n letterSpacing = 1,\n wordSpacing = 1\n } = {}\n) {\n const smooth = d3.line().curve(d3.curveCatmullRom.alpha());\n return (_, { x, y }) => {\n const pathData = smooth(cPath.map(([px, py]) => [x(px), y(py)]));\n const pathId = DOM.uid(\"curve\").id;\n return htl.svg`\n \n \n \n ${txt}\n \n `;\n };\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":329,"value":"Plot.plot({\n width: 640,\n height: 300,\n x: { domain: [0, 640], grid: true, tickSpacing: 50 },\n y: { domain: [0, 300], grid: true, tickSpacing: 50 },\n marks: [\n curvedText(\"This is some text that should curve along a path\", {\n cPath: curves[opt.cType],\n showPath: opt.showPath,\n anchor: opt.anchor,\n fontSize: opt.fontSize,\n letterSpacing: opt.letterSpacing,\n wordSpacing: opt.wordSpacing\n })\n ]\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":332,"value":"---\n\n## Appendices","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":334,"value":"import { info } from \"@jwolondon/schema-teaching\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W44","stdlib":"1"}} 42:"$41:body"