2d:null 2e:["$","title",null,{"children":"SVG text dominant-baseline & alignment-baseline attributes | Jules Blom | Observable"}] 33:T6a2,alignmentBaselineValues = [ { name: "baseline", description: "Uses the dominant baseline choice of the parent. Matches the box’s corresponding baseline to that of its parent." }, { name: "text-bottom", description: "Matches the bottom of the box to the top of the parent’s content area." }, { name: "text-top", description: "Matches the top of the box to the top of the parent’s content area." }, { name: "middle", description: "Aligns the vertical midpoint of the box with the baseline of the parent box plus half the x-height of the parent." }, { name: "central", description: "Matches the box’s central baseline to the central baseline of its parent." }, { name: "ideographic", description: "Matches the box’s ideographic character face under-side baseline to that of its parent." }, { name: "alphabetic", description: "Matches the box’s alphabetic baseline to that of its parent." }, { name: "hanging", description: "The alignment-point of the object being aligned is aligned with the 'hanging' baseline of the parent text content element." }, { name: "mathematical", description: "Matches the box’s mathematical baseline to that of its parent." }, { name: "top", description: "Aligns the top of the aligned subtree with the top of the line box." }, { name: "center", description: "Aligns the center of the aligned subtree with the center of the line box." }, { name: "bottom", description: "Aligns the bottom of the aligned subtree with the bottom of the line box." } ]34:T10bd,dominantBaselineValues = [ { name: "auto", description: "If this property occurs on a \`\` element, then the computed value depends on the value of the writing-mode attribute. \nIf the writing-mode is horizontal, then the value of the dominant-baseline component is alphabetic. Otherwise, if the writing-mode is vertical, then the value of the dominant-baseline component is central. \nIf this property occurs on a \`\` or \`\` element, then the dominant-baseline and the baseline-table components remain the same as those of the parent text content element. \nIf the computed baseline-shift value actually shifts the baseline, then the baseline-table font-size component is set to the value of the font-size attribute on the element on which the dominant-baseline attribute occurs, otherwise the baseline-table font-size remains the same as that of the element. \nIf there is no parent text content element, the scaled-baseline-table value is constructed as above for \`\` elements." }, { name: "ideographic", description: "The baseline-identifier for the dominant-baseline is set to be ideographic, the derived baseline-table is constructed using the ideographic baseline-table in the font, and the baseline-table font-size is changed to the value of the font-size attribute on this element." }, { name: "alphabetic", description: "The baseline-identifier for the dominant-baseline is set to be alphabetic, the derived baseline-table is constructed using the alphabetic baseline-table in the font, and the baseline-table font-size is changed to the value of the font-size attribute on this element." }, { name: "hanging", description: "The baseline-identifier for the dominant-baseline is set to be hanging, the derived baseline-table is constructed using the hanging baseline-table in the font, and the baseline-table font-size is changed to the value of the font-size attribute on this element." }, { name: "mathematical", description: "The baseline-identifier for the dominant-baseline is set to be mathematical, the derived baseline-table is constructed using the mathematical baseline-table in the font, and the baseline-table font-size is changed to the value of the font-size attribute on this element." }, { name: "central", description: "The baseline-identifier for the dominant-baseline is set to be central. The derived baseline-table is constructed from the defined baselines in a baseline-table in the font. That font baseline-table is chosen using the following priority order of baseline-table names: ideographic, alphabetic, hanging, mathematical. The baseline-table font-size is changed to the value of the font-size attribute on this element." }, { name: "middle", description: "The baseline-identifier for the dominant-baseline is set to be middle. The derived baseline-table is constructed from the defined baselines in a baseline-table in the font. That font baseline-table is chosen using the following priority order of baseline-table names: \`alphabetic\`, \`ideographic\`, \`hanging\`, \`mathematical\`. The baseline-table font-size is changed to the value of the font-size attribute on this element." }, { name: "text-after-edge", description: "The baseline-identifier for the dominant-baseline is set to be text-after-edge. The derived baseline-table is constructed from the defined baselines in a baseline-table in the font. The choice of which font baseline-table to use from the baseline-tables in the font is browser dependent. The baseline-table font-size is changed to the value of the font-size attribute on this element." }, { name: "text-before-edge", description: "The baseline-identifier for the dominant-baseline is set to be text-before-edge. The derived baseline-table is constructed from the defined baselines in a baseline-table in the font. The choice of which baseline-table to use from the baseline-tables in the font is browser dependent. The baseline-table font-size is changed to the value of the font-size attribute on this element." }, { name: "text-top", description: "This value uses the top of the em box as the baseline." } ]35:[] 31:{"id":"839b491beaf46d1c","slug":"svg-dominant-baseline-alignment-baseline-attributes","title":"SVG text dominant-baseline & alignment-baseline attributes","thumbnail":"4e8d1d87ba5ed18b7e9532c5d64fedde3d9b5ab650fd75415e517bf94c5f3ef3","access_level":"public","create_time":"$D2021-06-07T20:43:34.378Z","update_time":"$D2022-04-26T21:17:00.136Z","view_time":null,"first_public_time":"$D2021-06-23T10:13:03.762Z","has_unpublished_edits":null,"fork":false,"stars":5,"starred":false,"owner":{"type":"team","id":"7a0be485f6c75a69","login":"julesblm","name":"Jules Blom","avatar_url":"https://avatars-next.observableusercontent.com/b7de984ae585198887501b17f9ba995c2549e9278d73c6fea516ec7ff7a5e684","tier":"starter_2024"},"version":329,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"aa71bd62661dc929","login":"julesblm","name":"Jules Blom","avatar_url":"https://avatars-next.observableusercontent.com/1e8787977bfd7f7f59fe9be84835541199e1605aa10e4cd7ae6f3707cb411d40","tier":null}],"members":[{"type":"individual","id":"aa71bd62661dc929","login":"julesblm","name":"Jules Blom","avatar_url":"https://avatars-next.observableusercontent.com/1e8787977bfd7f7f59fe9be84835541199e1605aa10e4cd7ae6f3707cb411d40","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":{"id":"e5d94b30651c2ec4","slug":"svg","title":"SVG Explainables","owner":{"id":"7a0be485f6c75a69","login":"julesblm","name":"Jules Blom"}},"type":"notebook","body":{"titling":"auto","title":"SVG text dominant-baseline & alignment-baseline attributes","cells":[{"id":0,"value":"# SVG text `dominant-baseline` & `alignment-baseline` attributes\n\nSVG provides three properties to allow you adjust text baselines.\n\n* `dominant-baseline` is used to determine or re-determine a scaled-baseline-table\n* `alignment-baseline` specifies which baseline is to be aligned with the corresponding baseline of the parent\n* `baseline-shift` allows repositioning of the dominant-baseline relative to the dominant-baseline of the parent\n\nSelect different values of the three properties and see how the text in the [demo cell](#demoText) changes.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":190,"value":"md`## \\`dominant-baseline\\` \n\nAs a presentation attribute, it can be applied only on the following three elements: \\`\\`, and \\`\\`, and \\`\\`. All possible values are shown below along with a baseline.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":296,"value":"viewof selectedDominantBaseline = Inputs.select(dominantBaselineValues, {\n label: \"dominant-baseline\",\n format: (x) => x.name,\n value: alignmentBaselineValues.find((t) => t.name === \"auto\")\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":300,"value":"md`### \\`dominant-baseline: ${selectedDominantBaseline.name}\\` \n

\n${selectedDominantBaseline.description}\n

\n${selectedAlignmentBaseline.description}\n

\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":202,"value":"viewof selectedAlignmentBaseline = Inputs.select(alignmentBaselineValues, {\n label: \"alignment-baseline\",\n format: (x) => x.name,\n value: alignmentBaselineValues.find((t) => t.name === \"baseline\")\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":272,"value":"md` ### \\`baseline-shift: ${baselineShift} \\`\n\nThe baseline-shift attribute allows repositioning of the dominant-baseline relative to the dominant-baseline of the parent text content element. Just like \\`alignment-baseline\\`, it can be applied only on the following four elements: , and , not itself!\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":229,"value":"viewof baselineShift = Inputs.range([-5, 5], {\n value: 0,\n step: 0.5,\n label: \"baseline-shift\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":318,"value":"## Demo Text","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":17,"value":"demoText = svg``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":127,"value":"row = (r) => svg`\n \n ${dominantBaselineValues\n .slice(r * nrOfColumns, r * nrOfColumns + nrOfColumns)\n .map((d, j) => dominantBaselineItem(d, j))}\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":132,"value":"dominantBaselineItem = (d, j) =>\n svg`\n dominant-baseline: ${d.name}\n \n alignment-baseline: ${selectedAlignmentBaseline.name}\n \n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":95,"value":"length = alignmentBaselineValues.length","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":101,"value":"nrOfColumns = Math.round(width / spacing)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":122,"value":"nrOfRows = length / nrOfColumns","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":117,"value":"rows = [...Array(nrOfRows).keys()]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":46,"value":"spacing = 425","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":3,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":167,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W35","stdlib":"1"}} 32:"$31:body"