From 06c533a92ef0f79de849eecf5a7ba8a2aead34ea Mon Sep 17 00:00:00 2001 From: "Eric A. Meyer" Date: Fri, 26 Jul 2024 15:56:59 -0400 Subject: [PATCH 1/3] Added text-anchor property --- files/en-us/web/css/text-anchor/index.md | 106 ++++++++++++++++++ .../web/svg/attribute/text-anchor/index.md | 7 +- 2 files changed, 112 insertions(+), 1 deletion(-) create mode 100644 files/en-us/web/css/text-anchor/index.md diff --git a/files/en-us/web/css/text-anchor/index.md b/files/en-us/web/css/text-anchor/index.md new file mode 100644 index 000000000000000..79bb81d21172152 --- /dev/null +++ b/files/en-us/web/css/text-anchor/index.md @@ -0,0 +1,106 @@ +--- +title: text-anchor +slug: Web/CSS/text-anchor +page-type: css-property +browser-compat: css.properties.text-anchor +--- + +{{CSSRef}} + +The **`text-anchor`** [CSS](/en-US/docs/Web/CSS) property aligns a box containing a string of text where the wrapping area is determined from the {{cssxref("inline-size")}} property, and the text is then placed relative to the anchor point of the element, which is defined using the {{SVGAttr('x')}} and {{SVGAttr('y')}} (or {{SVGAttr('dx')}} and {{SVGAttr('dy')}}) attributes. If present, the value of the CSS property overrides any value of the element's {{SVGAttr("text-anchor")}} attribute. + +Each individual text fragment within an element is aligned independently; thus, a multi-line {{SVGElement("text")}} element will have each line of text aligned as per the value of `text-anchor`. `text-anchor` values only have an effect on the {{SVGElement("text")}}, {{SVGElement("textPath")}}, {{SVGElement("tref")}}, and {{SVGElement("tspan")}} SVG elements. `text-anchor` does not apply to automatically wrapped text; for that, see {{cssxref('text-align')}}. + +## Syntax + +```css +text-anchor: start; +text-anchor: middle; +text-anchor: end; + +/* Global values */ +text-anchor: inherit; +text-anchor: initial; +text-anchor: revert; +text-anchor: revert-layer; +text-anchor: unset; +``` + +### Values + +- `start` + + - : Aligns the text such that the inline start of the text string is aligned with the anchor point. This alignment is relative to the writing direction of the text; thus, for example, in right-to-left top-to-bottom writing, the text will be placed to the left of the anchor point. If the text's inline direction is vertical, as with many Asian languages, the top edge of the text is aligned with the anchor point. + +- `middle` + + - : Aligns the text such that the center (middle) of the text string's inline box is aligned with the anchor point. + +- `end` + + - : Aligns the text such that the inline end of the text string is aligned with the anchor point. This alignment is relative to the writing direction of the text; thus, for example, in right-to-left top-to-bottom writing, the text will be placed to the right of the anchor point. If the text's inline direction is vertical, as with many Asian languages, the bottom edge of the text is aligned with the anchor point. + +## Formal definition + +{{CSSInfo}} + +## Formal syntax + +{{csssyntax}} + +## Example + +Three `` elements are given the same `x` position, but different values for `text-anchor`. A dashed red line is included to mark the x-axis position of all three anchor points. + +```html + + + Anchored + Anchored + Anchored + +``` + +```css hidden +text { + font-size: 24px; +} +``` + +```css +text:nth-of-type(1) { + text-anchor: start; +} +text:nth-of-type(2) { + text-anchor: middle; +} +text:nth-of-type(3) { + text-anchor: end; +} +``` + +{{EmbedLiveSample("Example", 200, 150)}} + +## Specifications + +{{Specifications}} + +## Browser compatibility + +{{Compat}} + +## See also + +- {{cssxref('dominant-baseline')}} +- SVG {{SVGElement("text")}} element +- SVG {{SVGAttr("text-anchor")}} attribute diff --git a/files/en-us/web/svg/attribute/text-anchor/index.md b/files/en-us/web/svg/attribute/text-anchor/index.md index 52d2c7a983aa5e1..514133f7354fcc7 100644 --- a/files/en-us/web/svg/attribute/text-anchor/index.md +++ b/files/en-us/web/svg/attribute/text-anchor/index.md @@ -14,7 +14,7 @@ This attribute is not applicable to other types of auto-wrapped text. For those The `text-anchor` attribute is applied to each individual text chunk within a given {{SVGElement("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 {{SVGAttr("x")}} and {{SVGAttr("y")}} attributes on the `` element, any `x` or `y` attribute values on a {{SVGElement("tspan")}} or {{SVGElement("tref")}} element assigned explicitly to the first rendered character in a text chunk, or determination of the initial current text position for a {{SVGElement("textPath")}} element. > [!NOTE] -> As a presentation attribute, `text-anchor` can be used as a CSS property. +> As a presentation attribute, `text-anchor` can be used as a CSS property. See {{cssxref('text-anchor')}} for more. You can use this attribute with the following SVG elements: @@ -92,6 +92,11 @@ svg { {{Specifications}} +## See Also + +- SVG {{SVGElement("text")}} element +- CSS {{cssxref('text-anchor')}} property + ## Browser compatibility {{Compat}} From cd7b085b62ce07d52253430c309623bf7e9295b4 Mon Sep 17 00:00:00 2001 From: "Eric A. Meyer" Date: Fri, 26 Jul 2024 15:57:33 -0400 Subject: [PATCH 2/3] Removed redirect --- files/en-us/_redirects.txt | 1 - 1 file changed, 1 deletion(-) diff --git a/files/en-us/_redirects.txt b/files/en-us/_redirects.txt index 66ab353b81f51d7..eb6e7905eb37749 100644 --- a/files/en-us/_redirects.txt +++ b/files/en-us/_redirects.txt @@ -11729,7 +11729,6 @@ /en-US/docs/Web/CSS/symbols() /en-US/docs/Web/CSS/symbols /en-US/docs/Web/CSS/symbols-descriptor /en-US/docs/Web/CSS/@counter-style/symbols /en-US/docs/Web/CSS/system /en-US/docs/Web/CSS/@counter-style/system -/en-US/docs/Web/CSS/text-anchor /en-US/docs/Web/SVG/Attribute/text-anchor /en-US/docs/Web/CSS/text-combine-horizontal /en-US/docs/Web/CSS/text-combine-upright /en-US/docs/Web/CSS/time-function /en-US/docs/Web/CSS/easing-function /en-US/docs/Web/CSS/timing-function /en-US/docs/Web/CSS/easing-function From b652489698e028f19590dca06fb96f48af253795 Mon Sep 17 00:00:00 2001 From: "Eric A. Meyer" Date: Mon, 29 Jul 2024 08:24:04 -0400 Subject: [PATCH 3/3] Fixes for Josh-Cena --- files/en-us/web/svg/attribute/text-anchor/index.md | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/files/en-us/web/svg/attribute/text-anchor/index.md b/files/en-us/web/svg/attribute/text-anchor/index.md index 514133f7354fcc7..3f12bd00bffe563 100644 --- a/files/en-us/web/svg/attribute/text-anchor/index.md +++ b/files/en-us/web/svg/attribute/text-anchor/index.md @@ -92,11 +92,11 @@ svg { {{Specifications}} -## See Also - -- SVG {{SVGElement("text")}} element -- CSS {{cssxref('text-anchor')}} property - ## Browser compatibility {{Compat}} + +## See also + +- SVG {{SVGElement("text")}} element +- CSS {{cssxref('text-anchor')}} property