31: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." } ]32: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." } ]33:[] 2f:{"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"},{"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"},{"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"},{"id":300,"value":"md`### \\`dominant-baseline: ${selectedDominantBaseline.name}\\` \n

\n${selectedDominantBaseline.description}\n

\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":193,"value":"md`## \\`alignment-baseline\\` \n\\`alignment-baseline\\` is an adjustment relative to the parent element\n\nAs a presentation attribute, it can be applied only on the following four elements: \\`\\`, and \\`\\`, **not** \\`\\` itself!\n\n\\`text-before-edge\\` is same as \\`text-top\\`, and \\`text-after-edge\\` is same as \\`text-bottom\\`\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":233,"value":"md`### \\`alignment-baseline: ${selectedAlignmentBaseline.name}\\` \n

\n${selectedAlignmentBaseline.description}\n

\n`","pinned":false,"hidden":false,"mode":"ojs"},{"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"},{"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"},{"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"},{"id":318,"value":"## Demo Text","pinned":false,"hidden":false,"mode":"md"},{"id":17,"value":"demoText = svg``","pinned":false,"hidden":false,"mode":"ojs"},{"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"},{"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"},{"id":95,"value":"length = alignmentBaselineValues.length","pinned":false,"hidden":false,"mode":"ojs"},{"id":101,"value":"nrOfColumns = Math.round(width / spacing)","pinned":false,"hidden":false,"mode":"ojs"},{"id":122,"value":"nrOfRows = length / nrOfColumns","pinned":false,"hidden":false,"mode":"ojs"},{"id":117,"value":"rows = [...Array(nrOfRows).keys()]","pinned":false,"hidden":false,"mode":"ojs"},{"id":46,"value":"spacing = 425","pinned":false,"hidden":false,"mode":"ojs"},{"id":3,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":167,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W33","stdlib":"1","titling":"auto"}