2a:null 2b:["$","title",null,{"children":"SVG dominant-baseline | Martin Stålberg | Observable"}] 30:[] 2e:{"id":"b3145878d2465874","slug":"svg-dominant-baseline","title":"SVG dominant-baseline","thumbnail":"13a06f8cfa499be48bcc8840a5ad5e815ca2e70bb038bcd873a9422e4598c36a","access_level":"public","create_time":"$D2022-05-12T07:25:21.397Z","update_time":"$D2022-05-12T07:58:23.795Z","view_time":null,"first_public_time":"$D2022-05-12T07:56:52.070Z","fork":false,"stars":1,"starred":false,"owner":{"type":"team","id":"846cb38877f13a5e","login":"mast4461","name":"Martin Stålberg","avatar_url":"https://avatars-next.observableusercontent.com/60cf8849f11993dfaf06d6e0634bbcecffce9e5a71f2bdcaa587389505b28994","tier":"starter_2024"},"version":115,"publish_version":115,"role":null,"authored":false,"authors":[{"type":"individual","id":"44de236d09dec6e7","login":"mast4461","name":"Martin Stålberg","avatar_url":"https://avatars-next.observableusercontent.com/60cf8849f11993dfaf06d6e0634bbcecffce9e5a71f2bdcaa587389505b28994","tier":null}],"members":[{"type":"individual","id":"44de236d09dec6e7","login":"mast4461","name":"Martin Stålberg","avatar_url":"https://avatars-next.observableusercontent.com/60cf8849f11993dfaf06d6e0634bbcecffce9e5a71f2bdcaa587389505b28994","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":true,"trashed":false,"subscribed":null,"forks":1,"collection":null,"type":"notebook","body":{"title":"SVG dominant-baseline","cells":[{"id":0,"value":"# SVG dominant-baseline\n\nShowcasing the alternatives for the SVG text attribute `dominant-baseline`.\n\n\"The `dominant-baseline` attribute specifies the dominant baseline, which is the baseline used to align the box's text and inline-level contents. It also indicates the default alignment baseline of any boxes participating in baseline alignment in the box's alignment context.\" [―](https://english.stackexchange.com/a/59320/397692) [MDN](https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/dominant-baseline)","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":58,"value":"viewof settings = Inputs.form({\n fontSize: Inputs.range([2, 100], {\n transform: Math.log,\n step: 0.01,\n label: \"Font size\",\n width: \"100%\",\n value: 20\n }),\n fontFamily: Inputs.radio([\"inherit\", \"serif\", \"sans-serif\", \"monospace\"], {\n label: \"Font family\",\n value: \"inherit\"\n }),\n sample: Inputs.text({\n label: \"Sample\",\n value: \"QWERTYUIOPASDFGHJKLZXCVBNMqwertyuiopasdfghjklzxcvbnm0123456789\",\n width: \"100%\"\n })\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":94,"value":"{\n const lineHeight = Math.ceil(settings.fontSize / 2) * 4 + 1;\n const dy = lineHeight / 2;\n return html`

\n ${alternatives.map(\n (\n d\n ) => html``\n )} \n \n

`;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":7,"value":"alternatives = \"auto | text-bottom | alphabetic | ideographic | middle | central | mathematical | hanging | text-top\".split(\n \" | \"\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"}],"files":"$W30","stdlib":"1","titling":"auto"}} 2f:"$2e:body"