Svg Letter-Spacing Also Applied to Mozilla Firefox

SVG letter-spacing also applied to Mozilla Firefox

My solution was that I create the strings with (multiple)whitespaces in QGIS. This is bad way because if you want to give all elements a bigger space it takes a long time.

But it is easy and works on any browser in the same way. So this is the way to go if you have your data in geojson or topojson.

Firefox is ignoring more than one whitespace in SVG text and showing them smaller - compared to Chrome

Already found it. Setting white-space: pre; on tspan works as aspected.

The remaining issue is that QGIS where I'm defining my data is not saving multiple whitespace in the presentation. So I just need to find out how that is working.

Edit: here the link to the QGIS question: https://gis.stackexchange.com/questions/136311/qgis-multiple-whitespace-in-attributes-are-removed-after-restart

Hopefully someone has an idea there =)

Why won't text-transform work on SVG text in Firefox?

It doesn't work in all browsers because it is not a valid SVG property. It doesn't appear in this list:

http://www.w3.org/TR/SVG/propidx.html

There were questions about it on Bugzilla, but the conclusion was not to add it to Firefox.

https://bugzilla.mozilla.org/show_bug.cgi?id=682124

Letter Spacing Css with custom font on safari?

Try using pixels instead of relative values for letter spacing. Also, use round numbers for font-size and line-height. Safari has been known to round differently.

SVG text not centering firefox

OK so I came up with a work around to get letter spacing the same in both chrome and firefox. What I did was add both to text-transform: letter-spacing="9.691" textLength="780px" and adjusted the x until both browsers displayed the text in the center of the image. Its not pretty but it works.

 <text transform="matrix(0.9287 0 0 1 60.9023 137.7646)" letter-spacing="9.691" textLength="780px" font-weight="bold">
        <tspan x="1" y="0" fill="#FFFFFF" font-family="'Consolas'" font-size="71.5163">SOC</tspan>
        <tspan x="-21.8" y="85.819" fill="#FFFFFF" font-family="'Consolas'" font-size="71.5163">KING</tspan>
    </text>

Safari, letter-spacing with custom font

There is no proper solution for this issue. Safari / Webkit will render these things incorrectly.

Another thread covering similar issues can be found here

How to produce same result on different browsers when embedding SVG file in HTML code?

I only get different results in size between Firefox and Safari (on Windows) when a viewbox is defined in the svg.

A solution is to

• set the width and height attribute in the object tag in html to absolute values (pixel)
• set the width and height attribute in the svg file to relative values (e.g. 100%)

Then both FF and Safari show the same behaviour! You should try this, if this is applicable to your situation.

EDIT: Concerning your new questions:
- Transparency in Safari seems to be a bug: bugs Webkit
- Standard way for embedding: I don't think there is a standard way. you can use object, iframe, img or svg (inline declaration).

If you want it to work in every browser, you probably have to use browser sniffing and use object or img tags depending on the browser. Or you should try iframes. as they are supposed to have transparent backgrounds in safari and firefox. (but don't know about opera)

Like always in webdev browser support is the big problem, as you can see here: svg support (when you click the image, you can check for the svg features in detail)

---

Related Topics