2a:null 2b:["$","title",null,{"children":"SVG Alignment Attributes (Interactive) | Shreshth Mohan | Observable"}] 31:[] 2e:{"id":"89647ee997fb804d","slug":"svg-presentation-attributes-interactive","title":"SVG Alignment Attributes (Interactive)","thumbnail":"982de3bdfe56abeaac429e9d9de8427e83ffe2302e28bdb857fedd2bd69de43b","access_level":"public","create_time":"$D2022-02-07T01:32:50.906Z","update_time":"$D2022-07-08T02:00:07.456Z","view_time":null,"first_public_time":"$D2022-02-07T01:35:06.680Z","fork":{"id":"8b78a78016baff3c","slug":"svg-presentation-attributes-vertical-alignment","title":"SVG Presentation Attributes for Alignment","owner":{"id":"73bc516ca29b1924","login":"shreshthmohan","name":"Shreshth Mohan"}},"stars":0,"starred":false,"owner":{"type":"team","id":"73bc516ca29b1924","login":"shreshthmohan","name":"Shreshth Mohan","avatar_url":"https://avatars-next.observableusercontent.com/0e808176c1a435a909a72a1a5c73f111b8f5bef619bff383261ca32002c5de57","tier":"starter_2024"},"version":403,"publish_version":403,"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":0,"collection":{"id":"9397850e71d523f3","slug":"svg-attributes","title":"SVG Attributes","owner":{"id":"73bc516ca29b1924","login":"shreshthmohan","name":"Shreshth Mohan"}},"type":"notebook","body":{"title":"SVG Alignment Attributes (Interactive)","cells":[{"id":0,"value":"# SVG Alignment Attributes (Interactive)\nAlignment attributes (Interactive)","pinned":false,"hidden":false,"mode":"md"},{"id":73,"value":"viewof textValue = Inputs.text({ value: \"TEXT text\", label: \"Display text\" })","pinned":false,"hidden":false,"mode":"ojs"},{"id":22,"value":"viewof attrs = Inputs.form({\n alignmentBaseline: Inputs.select(\n attributeOptionListMap[\"alignment-baseline\"],\n {\n label: \"alignment-baseline\",\n value: \"auto\"\n }\n ),\n dominantBaseLine: Inputs.select(attributeOptionListMap[\"dominant-baseline\"], {\n label: \"dominant-baseline\",\n value: \"auto\"\n }),\n textAnchor: Inputs.select(attributeOptionListMap[\"text-anchor\"], {\n label: \"text-anchor\",\n value: \"inherit\"\n })\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":3,"value":"","pinned":false,"hidden":false,"mode":"html"},{"id":399,"value":"## More\n- [Alt: alignment attributes with all options in one view](https://observablehq.com/@shreshthmohan/svg-presentation-attributes-vertical-alignment?collection=@shreshthmohan/svg-attributes)","pinned":false,"hidden":false,"mode":"md"},{"id":295,"value":"MDN SVG Presentation Attributes","pinned":false,"hidden":false,"mode":"html"},{"id":122,"value":"attributeOptionListMap = {\n return {\n \"dominant-baseline\": [\n \"dominant-baseline\",\n // \"auto\",\n \"alphabetic\",\n \"ideographic\",\n \"MIDDLE\",\n \"CENTRAL\",\n \"mathematical\",\n \"hanging\",\n \"text-bottom\",\n \"text-top\"\n // \"\"\n ],\n \"alignment-baseline\": [\n \"alignment-baseline\",\n // \"auto\",\n \"baseline\",\n \"MIDDLE\",\n \"CENTRAL\",\n \"ideographic\",\n \"alphabetic\",\n \"hanging\",\n \"mathematical\",\n \"before-edge\",\n \"after-edge\",\n \"text-before-edge\",\n \"text-after-edge\"\n // \"inherit\"\n // \"\"\n ],\n \"baseline-shift\": [\n \"baseline-shift\",\n \"sub\",\n \"super\",\n \"10%\",\n \"20%\",\n \"-10%\",\n \"-20%\",\n \"1\",\n \"2\",\n \"3\",\n \"4\",\n \"-1\",\n \"-2\",\n \"-3\",\n \"-4\"\n ],\n \"text-anchor\": [\"inherit\", \"start\", \"middle\", \"end\"]\n };\n}","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"}],"files":"$W31","stdlib":"1","titling":"auto"}} 2f:"$2e:body"