2b:null 2c:["$","title",null,{"children":"SVG Presentation Attributes for Alignment | Shreshth Mohan | Observable"}] 32:T48d,{ const width = 1000; const height = 150; const svg = d3 .create("svg") .attr("viewBox", [0, 0, width, height]) .attr( "style", "max-width: 100%; height: auto; height: intrinsic; background: floralwhite" ); const db = svg.append("g"); db.append("line") .attr("x1", 0) .attr("x2", width) .attr("y1", 30) .attr("y2", 30) .attr("stroke", "gray"); db.append("line") .attr("x1", 0) .attr("x2", width) .attr("y1", 80) .attr("y2", 80) .attr("stroke", "gray"); const { list: optionsData, endPos: pos } = appendPosition( attributeOptionListMap["alignment-baseline"], 0 ); db.append("text") .selectAll("tspan") .data(optionsData) .join("tspan") .text((d) => d.text) .attr("x", (d, i) => (d.x * width * 1.8) / pos) // .attr("x", (d, i) => (d.x * width) / pos) .attr("y", 30) .attr("font-family", "monospace") .attr("dy", (d, i) => (i > 7 ? "50" : "")) .attr("dx", (d, i) => (i > 7 ? -width + 50 : "")) .attr("font-weight", (d, i) => (i === 0 ? "bold" : "none")) .attr("alignment-baseline", (d) => d.text); return svg.node(); }33:T4ea,attributeOptionListMap = { return { "dominant-baseline": [ "dominant-baseline", // "auto", "alphabetic", "ideographic", "middle", "central", "mathematical", "hanging", "text-bottom", "text-top" // "" ], "alignment-baseline": [ "alignment-baseline", // "auto", "baseline", "middle", "central", "ideographic", "alphabetic", "hanging", "mathematical", "before-edge", "after-edge", "text-before-edge", "text-after-edge", "top", "center", "bottom" // "inherit" // "" ], "baseline-shift": [ "baseline-shift", "sub", "super", "10%", "20%", "-10%", "-20%", "1", "2", "3", "4", "-1", "-2", "-3", "-4" ], dy: [ "dy", "1rem", "1em", "1ex", "10px", "0.5in", "1cm", "7mm", "2pt", "1pc", "20%", "-1rem", "-1em", "-1ex", "-10px", "-0.5in", "-1cm", "-7mm", "-2pt", "-1pc", "-20%" ], "text-anchor": ["text-anchor", "start", "middle", "end"] }; }34:[] 2f:{"id":"8b78a78016baff3c","slug":"svg-presentation-attributes-vertical-alignment","title":"SVG Presentation Attributes for Alignment","thumbnail":"6800ea92c3d8e956a0f52f5cde48768371565cdaf66c997b73d762c72fbbda55","access_level":"public","create_time":"$D2022-02-04T14:57:31.863Z","update_time":"$D2022-04-03T05:54:41.660Z","view_time":null,"first_public_time":"$D2022-02-04T15:53:19.439Z","fork":false,"stars":1,"starred":false,"owner":{"type":"team","id":"73bc516ca29b1924","login":"shreshthmohan","name":"Shreshth Mohan","avatar_url":"https://avatars-next.observableusercontent.com/0e808176c1a435a909a72a1a5c73f111b8f5bef619bff383261ca32002c5de57","tier":"starter_2024"},"version":482,"publish_version":482,"role":null,"authored":false,"authors":[{"type":"individual","id":"f190f9c94eb4b295","login":"shreshthmohan","name":"Shreshth Mohan","avatar_url":"https://avatars-next.observableusercontent.com/0e808176c1a435a909a72a1a5c73f111b8f5bef619bff383261ca32002c5de57","tier":null}],"members":[{"type":"individual","id":"f190f9c94eb4b295","login":"shreshthmohan","name":"Shreshth Mohan","avatar_url":"https://avatars-next.observableusercontent.com/0e808176c1a435a909a72a1a5c73f111b8f5bef619bff383261ca32002c5de57","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"subscribed":null,"forks":2,"collection":{"id":"9397850e71d523f3","slug":"svg-attributes","title":"SVG Attributes","owner":{"id":"73bc516ca29b1924","login":"shreshthmohan","name":"Shreshth Mohan"}},"type":"notebook","body":{"title":"SVG Presentation Attributes for Alignment","cells":[{"id":0,"value":"# SVG Presentation Attributes for Alignment","pinned":false,"hidden":false,"mode":"md"},{"id":295,"value":"MDN SVG Presentation Attributes","pinned":false,"hidden":false,"mode":"html"},{"id":270,"value":"md`## dominant-baseline\n- Works with \\`\\`, \\`\\` and \\`\\`\n- Except for _text-bottom_ and _text-top_, all other values work in major browsers\n- todo: _middle_ vs _central_ (probably makes sense to use middle for lowercase and central for uppercase)\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":144,"value":"{\n const width = 1000;\n const height = 100;\n const svg = d3\n .create(\"svg\")\n .attr(\"viewBox\", [0, 0, width, height])\n\n .attr(\n \"style\",\n \"max-width: 100%; height: auto; height: intrinsic; background: #f8f1e7\"\n );\n\n const db = svg.append(\"g\");\n\n db.append(\"line\")\n .attr(\"x1\", 0)\n .attr(\"x2\", width)\n .attr(\"y1\", 30)\n .attr(\"y2\", 30)\n .attr(\"stroke\", \"gray\");\n\n const { list: optionsData, endPos: pos } = appendPosition(\n attributeOptionListMap[\"dominant-baseline\"]\n );\n\n db.selectAll(\"text\")\n .data(optionsData)\n .join(\"text\")\n .text((d) => d.text)\n .attr(\"x\", (d, i) => (d.x * width) / pos)\n .attr(\"y\", 30)\n .attr(\"font-family\", \"monospace\")\n .attr(\"font-weight\", (d, i) => (i === 0 ? \"bold\" : \"none\"))\n .attr(\"dominant-baseline\", (d) => d.text);\n\n return svg.node();\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":279,"value":"md`## alignment-baseline\n - 🚩 Doesn't work in Firefox; inconsistencies between Chrome and Safari, use **dy** instead\n - _top_, _center_ and _bottom_ don't work\n - Supposed to work with \\`\\` and \\`\\`\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":226,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":300,"value":"md`\n## baseline-shift\n - 🚩 Doesn't work in Firefox, better to use **dy** instead\n - Will be deprecated in SVG 2\n - Supposed to work with \\`\\` and \\`\\`\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":342,"value":"{\n const width = 1000;\n const height = 100;\n const svg = d3\n .create(\"svg\")\n .attr(\"viewBox\", [0, 0, width, height])\n .attr(\n \"style\",\n \"max-width: 100%; height: auto; height: intrinsic; background: floralwhite\"\n );\n\n const db = svg.append(\"g\");\n\n db.append(\"line\")\n .attr(\"x1\", 0)\n .attr(\"x2\", width)\n .attr(\"y1\", 30)\n .attr(\"y2\", 30)\n .attr(\"stroke\", \"gray\");\n\n const { list: optionsData, endPos: pos } = appendPosition(\n attributeOptionListMap[\"baseline-shift\"],\n 0\n );\n\n db.append(\"text\")\n .selectAll(\"tspan\")\n .data(optionsData)\n .join(\"tspan\")\n .text((d) => d.text)\n .attr(\"x\", (d, i) => d.x * 20)\n .attr(\"y\", 30)\n .attr(\"font-family\", \"monospace\")\n .attr(\"font-weight\", (d, i) => (i === 0 ? \"bold\" : \"none\"))\n .attr(\"baseline-shift\", (d) => d.text);\n\n return svg.node();\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":378,"value":"md`\n## dy\n- Works with \\`\\` and \\`\\`\n- 🚩 _rem_ unit doesn't work in Firefox and Safari\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":375,"value":"{\n const width = 1000;\n const height = 170;\n const svg = d3\n .create(\"svg\")\n .attr(\"viewBox\", [0, 0, width, height])\n .attr(\n \"style\",\n \"max-width: 100%; height: auto; height: intrinsic; background: floralwhite\"\n );\n\n const db = svg.append(\"g\");\n\n db.append(\"line\")\n .attr(\"x1\", 0)\n .attr(\"x2\", width)\n .attr(\"y1\", 80)\n .attr(\"y2\", 80)\n .attr(\"stroke\", \"gray\");\n\n const { list: optionsData, endPos: pos } = appendPosition(\n attributeOptionListMap[\"dy\"],\n 0\n );\n\n db.append(\"text\")\n .selectAll(\"tspan\")\n .data(optionsData)\n .join(\"tspan\")\n .text((d) => d.text)\n // .attr(\"x\", (d, i) => d.x * 20)\n .attr(\"x\", (d, i) => (d.x * width) / pos)\n\n .attr(\"y\", 80)\n // .attr(\"dy\", (d, i) => (i > 10 ? \"50\" : \"\"))\n // .attr(\"dx\", (d, i) => (i > 10 ? -width : \"\"))\n .attr(\"font-family\", \"monospace\")\n .attr(\"font-weight\", (d, i) => (i === 0 ? \"bold\" : \"none\"))\n .attr(\"dy\", (d) => d.text);\n\n return svg.node();\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":445,"value":"md`\n## text-anchor\n- Works with \\`\\`, \\`\\` and \\`\\`\n- For horizontal alignment\n- Works in all major browsers\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":428,"value":"{\n const sectionHeight = 40;\n const list = attributeOptionListMap[\"text-anchor\"];\n const width = 800;\n const height = sectionHeight * list.length;\n const svg = d3\n .create(\"svg\")\n .attr(\"viewBox\", [0, 0, width, height])\n .attr(\n \"style\",\n \"max-width: 100%; height: auto; height: intrinsic; background: floralwhite\"\n );\n\n const db = svg.append(\"g\");\n const xPos = 100;\n\n db.append(\"line\")\n .attr(\"x1\", xPos)\n .attr(\"x2\", xPos)\n .attr(\"y1\", 0)\n .attr(\"y2\", height)\n .attr(\"stroke\", \"gray\")\n .attr(\"stroke-opacity\", 0.3);\n\n db.selectAll(\"text\")\n .data(list)\n .join(\"text\")\n .text((d) => d)\n .attr(\"x\", xPos)\n .attr(\"y\", (d, i) => (i + 0.5) * sectionHeight)\n .attr(\"font-family\", \"monospace\")\n .attr(\"font-weight\", (d, i) => (i === 0 ? \"bold\" : \"none\"))\n .attr(\"text-anchor\", (d) => d);\n\n return svg.node();\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":122,"value":"$33","pinned":false,"hidden":false,"mode":"ojs"},{"id":203,"value":"function appendPosition(optionList, gap = 1) {\n let pos = 0;\n\n return {\n list: optionList.map((o) => {\n const op = { text: o, x: pos };\n pos += o.length + gap;\n return op;\n }),\n endPos: pos\n };\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":58,"value":"md`## Notes\n - The [spec](https://www.w3.org/TR/SVG2/text.html#AlignmentBaselineProperty) talks about **vertical-align**, but need to check if that works in browsers.\n - Perfect centering approach (?) https://jsfiddle.net/behrangsa/vzLmc0jo/\n`","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W34","stdlib":"1","titling":"auto"}} 30:"$2f:body"