- From: Amelia Bellamy-Royds via GitHub <sysbot+gh@w3.org>
- Date: Fri, 12 May 2017 21:31:15 +0000
- To: public-svg-issues@w3.org
AmeliaBR has just created a new issue for https://github.com/w3c/svgwg: == `text-anchor` not well specified for negative character advance == There's a cross-browser inconsistency in SVG text layout if you use the `dx` attribute to adjust a single text-anchoring chunk such that the first/last characters in the text content are not the left-most / right-most characters in the text layout. [SVG 2 spec text](https://www.w3.org/TR/SVG2/text.html#TextAnchoringProperties), with bold text added by me: > The text-anchor property is applied to each individual text chunk within a given ‘text’ element. Each text chunk has an initial current text position, which represents the point in the user coordinate system resulting from (depending on context) application of the ‘x’ and ‘y’ attributes on the ‘text’ element, any ‘x’ or ‘y’ attribute values on a ‘tspan’ element assigned explicitly to the first rendered character in a text chunk, or determination of the initial current text position for a ‘textPath’ element. Each text chunk also has a final current text position which is the current text position after placing the last glyph in the text chunk. **The positions are determined before applying the text-anchor property**. > > Values have the following meanings: > > - start > The rendered characters are aligned such that the start of the resulting rendered text is at the initial current text position. For an element with a direction property value of "ltr" (typical for most European languages), the **left side of the text is rendered at the initial text position**. For an element with a direction property value of "rtl" (typical for Arabic and Hebrew), the right side of the text is rendered at the initial text position. For an element with a vertical primary text direction (often typical for Asian text), the top side of the text is rendered at the initial text position. > > - middle > The rendered characters are shifted such that **the geometric middle of the resulting rendered text (determined from the initial and final current text position before applying the text-anchor property) is at the initial current text position**. > > - end > The rendered characters are shifted such that the end of the resulting rendered text (final current text position before applying the text-anchor property) is at the initial current text position. For an element with a direction property value of "ltr" (typical for most European languages), **the right side of the text is rendered at the initial text position.** For an element with a direction property value of "rtl" (typical for Arabic and Hebrew), the left side of the text is rendered at the initial text position. For an element with a vertical primary text direction (often typical for Asian text), the bottom of the text is rendered at the initial text position. [Test case on CodePen](https://codepen.io/AmeliaBR/pen/XRqRWM/) ```xml <svg viewBox="0 0 50 85" font-size="10px"> <line x1="25" x2="25" y1="0" y2="100%" stroke="blue" stroke-width="0.3"/> <text x="25" y="1em" text-anchor="start">s<tspan dx="-25" dy="+10">tart</tspan></text> <text x="25" y="3em" text-anchor="middle">m<tspan dx="-25" dy="+10">iddle</tspan></text> <text x="25" y="5em" text-anchor="end">e<tspan dx="-25" dy="+10">nd</tspan></text> <text x="25" y="7em" text-anchor="end">e<tspan dx="-25" dy="+10">nding</tspan></text> </svg> ``` Firefox implements a literal interpretation of the spec: the bounding box of the laid-out text, including `dx` adjustment, is determined, then it's position is adjusted so that `start`, `end` or `middle` of that box is at the anchor point. So the `start` aligned content is all on the right of the line, and the `end` aligned content is all to the left of the line, regardless of the offset in the text itself  Chrome, Safari, and Edge all use `start`, `end` and `middle` to be the beginning, end, and middle of the text content. So the "s" in "start" and the "d" in "end" are flush against the line, even though the rest of the text sticks out on the other side. I'm not quite sure how the alignment for `middle` is being calculated, but all three browsers are consistent. (The screenshot is from MS Edge 15)  Please view or discuss this issue at https://github.com/w3c/svgwg/issues/317 using your GitHub account
Received on Friday, 12 May 2017 21:31:22 UTC