32339 svg text firsts (#32467)

* added example of multiple line text in svg and first-letter * added example of first-line on svg text element and turned off linting so the text is not rewritten * Update files/en-us/web/css/_doublecolon_first-line/index.md Co-authored-by: Estelle Weyl <estelle@openwebdocs.org> * Update files/en-us/web/css/_doublecolon_first-line/index.md Co-authored-by: Estelle Weyl <estelle@openwebdocs.org> * Update files/en-us/web/css/_doublecolon_first-line/index.md Co-authored-by: Estelle Weyl <estelle@openwebdocs.org> * Update files/en-us/web/css/white-space/index.md Co-authored-by: Estelle Weyl <estelle@openwebdocs.org> * Update files/en-us/web/css/white-space/index.md Co-authored-by: Estelle Weyl <estelle@openwebdocs.org> * Update files/en-us/web/css/_doublecolon_first-letter/index.md Co-authored-by: Estelle Weyl <estelle@openwebdocs.org> * Update files/en-us/web/css/_doublecolon_first-letter/index.md Co-authored-by: Estelle Weyl <estelle@openwebdocs.org> * updated the positioning of text from dy to y * added note about svg elements not wrapping --------- Co-authored-by: Estelle Weyl <estelle@openwebdocs.org>
mdn · Mar 12, 2024 · 190e65c · 190e65c
1 parent 5dc4c98
commit 190e65c
Show file tree

Hide file tree

Showing 5 changed files with 138 additions and 4 deletions.
diff --git a/files/en-us/web/css/_doublecolon_first-letter/index.md b/files/en-us/web/css/_doublecolon_first-letter/index.md
@@ -122,6 +122,40 @@ p::first-letter {
 
 {{ EmbedLiveSample('Effect_on_special_punctuation_and_non-Latin_characters', '100%', 350) }}
 
+### Styling first letter in SVG text element
+
+In this example, we use the `::first-letter` pseudo-element to style the first letter of a SVG {{SVGElement("text")}} element.
+
+> **Note:** At time of writing this feature has [limited support](#browser_compatibility).
+
+#### HTML
+
+```html
+<svg viewBox="0 0 300 40">
+  <text y="30">First letter in &lt;text&gt; SVG</text>
+</svg>
+```
+
+#### CSS
+
+```css
+text {
+  font-family: sans-serif;
+}
+
+text::first-letter {
+  font-family: serif;
+  font-size: 2rem;
+  font-weight: 600;
+  fill: tomato;
+  stroke: indigo;
+}
+```
+
+#### Result
+
+{{ EmbedLiveSample("styling_first_letter_in_SVG_text_element", "100%", "100") }}
+
 ## Specifications
 
 {{Specifications}}

diff --git a/files/en-us/web/css/_doublecolon_first-line/index.md b/files/en-us/web/css/_doublecolon_first-line/index.md
@@ -37,7 +37,9 @@ Only a small subset of CSS properties can be used with the `::first-line` pseudo
 
 ## Examples
 
-### HTML
+### Styling first line of a paragraph
+
+#### HTML
 
 ```html
 <p>
@@ -51,12 +53,19 @@ Only a small subset of CSS properties can be used with the `::first-line` pseudo
 </span>
 ```
 
-### CSS
+#### CSS
+
+```css hidden
+* {
+  font-size: 20px;
+  font-family: sans-serif;
+}
+```
 
 ```css
 ::first-line {
   color: blue;
-  text-transform: uppercase;
+  font-weight: bold;
 
   /* WARNING: DO NOT USE THESE */
   /* Many properties are invalid in ::first-line pseudo-elements */
@@ -67,7 +76,52 @@ Only a small subset of CSS properties can be used with the `::first-line` pseudo
 
 ### Result
 
-{{EmbedLiveSample('Examples', 350, 160)}}
+{{EmbedLiveSample('styling_first_line_of_a_paragraph', 350, 130)}}
+
+### Styling the first line of a SVG text element
+
+In this example, we style the first line of an SVG {{SVGElement("text")}} element using the `::first-line` pseudo-element.
+
+> **Note:** At time of writing this feature has [limited support](#browser_compatibility).
+
+#### HTML
+
+```html-nolint
+<svg viewBox="0 0 320 150">
+  <text y="20">Here is an English paragraph
+that is broken into multiple lines
+in the source code so that it can
+be more easily read and edited
+in a text editor.
+  </text>
+</svg>
+```
+
+#### CSS
+
+In order to make the SVG `<text>` element wrap to multiple lines, we use the {{cssxref("white-space", "", "#multiple_lines_in_svg_text_element")}} CSS property. We then select the first line using the `::first-line` pseudo-element.
+
+```css hidden
+text {
+  font-size: 20px;
+  font-family: sans-serif;
+}
+```
+
+```css
+text {
+  white-space: break-spaces;
+}
+
+text::first-line {
+  fill: blue;
+  font-weight: bold;
+}
+```
+
+#### Result
+
+{{EmbedLiveSample("styling_the_first_line_of_a_SVG_text_element", "100%", 150)}}
 
 ## Specifications
 
@@ -80,3 +134,4 @@ Only a small subset of CSS properties can be used with the `::first-line` pseudo
 ## See also
 
 - {{cssxref("::first-letter")}}
+- {{cssxref("white-space")}}
diff --git a/files/en-us/web/css/white-space/index.md b/files/en-us/web/css/white-space/index.md
@@ -229,6 +229,39 @@ select.addEventListener("change", (e) => {
 
 {{EmbedLiveSample("In_action", "100%", 350)}}
 
+### Multiple lines in SVG text element
+
+The {{CSSXRef("white-space")}} CSS property can be used to create multiple lines in a {{SVGElement("text")}} element, which does not wrap by default.
+
+> **Note:** At time of writing this feature has [limited support](#browser_compatibility).
+
+#### HTML
+
+The text inside the `<text>` element needs to be split into multiple lines for the new-lines to be detected. After the first line the rest need to have their whitespace removed.
+
+```html-nolint
+<svg viewBox="0 0 320 150">
+  <text y="20" x="10">Here is an English paragraph
+that is broken into multiple lines
+in the source code so that it can
+be more easily read and edited
+in a text editor.
+  </text>
+</svg>
+```
+
+#### CSS
+
+```css
+text {
+  white-space: break-spaces;
+}
+```
+
+#### Result
+
+{{EmbedLiveSample("multiple_lines_in_svg_text_element", "100%", 150)}}
+
 ## Specifications
 
 {{Specifications}}

diff --git a/files/en-us/web/svg/element/text/index.md b/files/en-us/web/svg/element/text/index.md
@@ -11,6 +11,8 @@ The SVG **`<text>`** element draws a graphics element consisting of text. It's p
 
 If text is included in SVG not inside of a `<text>` element, it is not rendered. This is different than being hidden by default, as setting the {{SVGAttr('display')}} property won't show the text.
 
+> **Note:** the `<text>` element does not wrap by default, to make this happen it needs to be styled with the {{CSSXRef("white-space")}} CSS property.
+
 ## Example
 
 ```css hidden
@@ -87,3 +89,7 @@ svg {
 ## Related
 
 - Other SVG text related elements: **{{SVGElement("tspan")}}**, {{SVGElement("tref")}}
+
+## See also
+
+- {{CSSXRef("white-space", "", "#multiple_lines_in_svg_text_element")}}
diff --git a/files/en-us/web/svg/element/tspan/index.md b/files/en-us/web/svg/element/tspan/index.md
@@ -9,6 +9,8 @@ browser-compat: svg.elements.tspan
 
 The SVG **`<tspan>`** element defines a subtext within a {{SVGElement('text')}} element or another `<tspan>` element. It allows for adjustment of the style and/or position of that subtext as needed.
 
+> **Note:** the `<tspan>` element does not wrap by default, to make this happen it needs to be styled with the {{CSSXRef("white-space")}} CSS property.
+
 ## Example
 
 ```css hidden
@@ -76,3 +78,7 @@ svg {
 ## Browser compatibility
 
 {{Compat}}
+
+## See also
+
+- {{CSSXRef("white-space", "", "#multiple_lines_in_svg_text_element")}}