0

Inside a text element a tspan allows to style specific parts of text.

html, body, svg
{
  width       : 100%;
  height      : 100%;
  margin      : 0;
  background  : black;
}

text
{
  font-size : 100px;
  fill      : white;
}
<svg>
  <text y='100'>
    A <tspan>test</tspan>
  </text>
</svg>

The tspan is correctly located after the text.

Standard tspan position

However, when font-size exceeds 200px the position starts to behave differently.

Incorrect tspan position

The content of text gets also affected. If you wish, you can inspect yourself.

html, body, svg
{
  width       : 100%;
  height      : 100%;
  margin      : 0;
  background  : black;
}

text
{
  font-size : 250px;
  fill      : white
}
<svg>
  <text y='200'>
    A <tspan>test</tspan>
  </text>
</svg>

The bigger font, the bigger the difference. Here is the result of font-size at 400px.

Incorrect tspan position with bigger font

Relative units (em and %) have been tested. Other text-related elements (a) have also been tested.

  • No `viewbox` on the SVG? – Paulie_D Jul 25 '21 at 17:37
  • @Paulie_D, there is **no need** for the [`viewBox`](https://dev.mozilla.org/SVG/Attribute/viewBox "MDN Web Docs") attribute. It doesn't solve this issue. It is only a question of responsiveness. The code should be simple as possible. – František Vojáček Jul 25 '21 at 17:57
  • I see no difference, is this issue specific to Chrome? Or is it because I'm using a Mac at the moment. At any rate it's not universal. – Robert Longson Jul 25 '21 at 18:30
  • It turns out it appears **only** on [Firefox](https://mozilla.org/firefox/). On all editions. (Thank you for the idea to try out on different browsers @RobertLongson.) – František Vojáček Jul 25 '21 at 19:16
  • I'm using Firefox and I don't think I'm seeing what you're seeing. – Robert Longson Jul 25 '21 at 19:19
  • Tested on two different devices running [Firefox](https://mozilla.org/firefox/ "Mozilla") *89.0.2* and [Firefox Developer Edition](https://mozilla.org/firefox/developer/ "Mozilla") *91b6*. Operating system Windows 10. I filed this as a [bug in BugZilla](https://bugzilla.mozilla.org/show_bug.cgi?id=1722241 "Mozilla BugZilla"). Thank you for help! – František Vojáček Jul 25 '21 at 19:55
  • So presumably this is a Windows only bug. Have you tried disabling webrender? – Robert Longson Jul 25 '21 at 20:15
  • Yes, I have. It is still the same. – František Vojáček Jul 26 '21 at 06:44

0 Answers0