Using textLength attribute - svg

Question

I have segments of text that I want to put into a fixed 80px width, and I'm looking for the best way to implement fall-back if they don't quite fit (they will all be very close so I expect spacing can be used to make corrections).
I looked at the documentation for the textLength attribute but found it very hard to understand -- and the examples don't help at all. Specifying the pixel width on a text element garbles the text in Firefox and does nothing in my Chrome.
An article at More Robust SVG Text gave examples in 'em' units, but I haven't found any official documentation to explain why that works when pixels do not. Using that method helps in Firefox (although it's ignored on tspan), but is totally ignored in Chrome.
<svg width="570px" height="310px" xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink">
<style>
text {
text-anchor: middle;
font-size: 13px;
font-weight: bold;
font-family: "Times New Roman";
}
</style>
<rect x="115" y="180" width="80" height="80" fill="white" stroke="black"/>
<text x="155" y="180" textLength="80">
<tspan dy="1.2em" x="155" >Elizabeth</tspan>
<tspan dy="1.1em" x="155" >Taylor</tspan>
<tspan dy="1.1em" x="155" >(c1731–1783)</tspan>
</text>
</svg>
Can someone explain how to use it in a portable way?

Answer 1

The problem is that the behaviour of textLength when there are <tspan> elements is a little buggy on all(?) browsers.
Firefox's behaviour is correct I think, and makes sense if you leave all the <tspan> elements in their default position, and don't move them.
(View this in Firefox)
<svg width="570px" height="310px" xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink">
<style>
text {
text-anchor: middle;
font-size: 13px;
font-weight: bold;
font-family: "Times New Roman";
}
</style>
<rect x="115" y="180" width="80" height="80" fill="white" stroke="black"/>
<text x="155" y="180" textLength="80">
<tspan dy="1.2em" x="155" >Elizabeth</tspan>
<tspan dy="1.1em" x="155" >Taylor</tspan>
<tspan dy="1.1em" x="155">(c1731–1783)</tspan>
</text>
<text x="155" y="180" textLength="80">
<tspan>Elizabeth</tspan>
<tspan>Taylor</tspan>
<tspan>(c1731–1783)</tspan>
</text>
</svg>
It is resizing all the text so that its total length is 80px.
Perhaps you wanted each <tspan> to be length 80px? You don't say. The reason that isn't happening is because textLength is not a style property. Thus it isn't inherited by the <tspan> elements. If you want that, you have to set that attribute on every <tspan>.
<svg width="570px" height="310px" xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink">
<style>
text {
text-anchor: middle;
font-size: 13px;
font-weight: bold;
font-family: "Times New Roman";
}
</style>
<rect x="115" y="180" width="80" height="80" fill="white" stroke="black"/>
<text x="155" y="180">
<tspan dy="1.2em" x="155" textLength="80">Elizabeth</tspan>
<tspan dy="1.1em" x="155" textLength="80">Taylor</tspan>
<tspan dy="1.1em" x="155" textLength="80">(c1731–1783)</tspan>
</text>
</svg>
Unfortunately, this only works on Chrome currently, but not on Firefox.
Basically it seems that Chrome only likes textLength when it is on a leaf child element. And Firefox only likes it when it is on a parent text element.
You don't say exactly what you want, but my recommendation would be to avoid <tspan> and use proper <text> elements for every line, if you want the behaviour to match on all browsers.
(The following example looks the same on Chrome and Firefox)
<svg width="570px" height="310px" xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink">
<style>
text {
text-anchor: middle;
font-size: 13px;
font-weight: bold;
font-family: "Times New Roman";
}
</style>
<rect x="115" y="180" width="80" height="80" fill="white" stroke="black"/>
<text x="155" y="180" dy="1.2em" textLength="80">Elizabeth</text>
<text x="155" y="180" dy="2.3em" textLength="80">Taylor</text>
<text x="155" y="180" dy="3.4em" textLength="80">(c1731–1783)</text>
</svg>