371787 - Support the 'letter-spacing' and 'word-spacing' properties in SVG

Status: RESOLVED FIXED

(Core :: SVG, defect)

Description

[Andreas Neumann]

User-Agent:       Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.9a3pre) Gecko/20070226 Minefield/3.0a3pre
Build Identifier: Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.9a3pre) Gecko/20070226 Minefield/3.0a3pre

the word-spacing attribute doesn't seem to be implemented, see screenshot with rendering comparison Minefield/Opera: http://www.carto.net/neumann/mozillasvgbugs/word-spacing_minefield_opera.png

The upper window shows the rendering in Minefield ignoring the word-spacing attribute, the lower window shows the correct rendering in Opera 9.1.

Reproducible: Always

Steps to Reproduce:
1.
2.
3.

Comment 1

[Vladislav]

letter-spacing has the same problem - attribute not implemented.
FF3beta5, Windows XP SP2

Comment 2

[MrX1980]

example for word-spacing in SVG
http://srufaculty.sru.edu/david.dailey/svg/newstuff/text6.svg

Comment 4

[Johan Sundström]

Example for letter-spacing in SVG: http://johan.github.com/kilobyte-svg-challenge/logos/lysator.svg

Webkit reference rendition: http://i.imgur.com/nQhv0.png

Comment 5

[Johan Sundström]

Firefox 19 broken rendition: http://i.imgur.com/reRJm.png (alpha channel bugs are mine; ignore the white bg)

Comment 6

[Jonathan Watt [:jwatt]]

Cameron, what are your thoughts now that bug 839955 is fixed?

Comment 7

[Cameron McCormack (:heycam)]

It's not trivial to get working.  IIRC nsTextFrame uses a PropertyProvider object to get the spacing property values, and it wasn't obvious where to get one of those (with the right values) from within nsSVGTextFrame2.  longsonr recently tried to get this working -- how far did you get Robert?

Comment 8

[Robert Longson [:longsonr]]

Attachment: WIP

This is as far as I got. Asserts occur and the DOM mostly doesn't work.

Rendering seems fairly reasonable though.

Comment 9

[Andy Mercer]

Just ran into this issue. Is there still any work being done?

Comment 10

[Robert Longson [:longsonr]]

Not by me currently so if you want to continue from where I left off, feel free.

Comment 11

[sjw]

AFAIK Gecko is the only engine that does not support these attributes.

Comment 12

[Otto Nascarella]

Same here. Windows 7, FF 32.0.3

We need this feature, PLEEEEASE!

Comment 13

[Dejan Novakovic]

Hi all,

We would really like to use XUL and Gecko engine for rendering SVG graphics and this issue is halting the whole idea. How likely is it to be resolved in the next few months?

Greetings,

Dejan

Comment 14

[Robert Longson [:longsonr]]

See comment 10 i.e. How likely are you to submit a patch to implement or pay someone to do so on your behalf, Dejan?

Comment 15

[Dejan Novakovic]

(In reply to Robert Longson from comment #14)
> See comment 10 i.e. How likely are you to submit a patch to implement or pay
> someone to do so on your behalf, Dejan?

Very unlikely.

Comment 16

[Tom]

who can do it? - I would like to spend some money to solve this issue. Maybe we can share the costs??

Comment 17

[sjw]

(In reply to Tom from comment #16)
> who can do it? - I would like to spend some money to solve this issue. Maybe
> we can share the costs??

Feel free to publish on https://www.bountysource.com/teams/mozilla/

Comment 18

[Martin Kraft]

Is there any chance that this 8(!!!!) year old bug may be resolved some time soon? 

SVG is becoming more and more important in nowadays web. Therefore it is almost unacceptable, that firefox is the only browser lacking this basic typographic property (even IE is supporting svg letterspacing since versions now).

Comment 19

[sayan.engineer]

Hi, is any work being done on this? Our (https://desygner.com) users would love to have this experience on Firefox as well :)

Comment 20

[Guillaume Piolat]

Hi, my clients would appreciate if SVG I generate were viewable with Firefox, we are using letter-spacing.

Comment 21

[johann]

word-/letter-spacing and kerning have been part of the svg standard for over 15 years now. i have no idea how much money mozilla has received during this period -- essentially mostly from its "search" deals with google. however, i do know that since this bug was filed mozilla has received well over $3,000,000,000 US. yes, that is *three billions* of US dollars.

thus, i find it completely disingenuous to ask people to pay for long over-due standards compliance by mozilla.

the question of the day should be: "what is mozilla going to do with the new $375,000,000 US per-year yahoo deal?".

i know that mozilla has been very successful in propagating a "non-profit" image and countless "volunteers" devote vast amounts of uncompensated time to mozilla projects. but, the facts are that the only thing non-profit is the foundation and it receives only two per-cent (2%) of mozilla corporation's total revenue. this leads us to the second question of the day brought about by an examination of the foundation's latest Form 990 filed with the US IRS.

"what is the 'investment' made by the foundation in 'central america and the caribbean'?" are these beach-front get-away villas, get-away bank accounts in panama and/or the cayman islands, or ...

this $4,847,000 US together with the $4,860,000 US compensation to directors/officers and $3,454,000 US "surplus" that went unspent is $13,161,000 US and roughly 68% of the foundations revenue for the last year on file. just imagine what "public benefit" (that the foundation is mandated to provide) would accrue from these added expenditures if the board of directors was serving the public good instead of themselves.

director compensation: the vast majority of non-profits have directors that serve as uncompensated volunteers although nominal fees ($25-500 US) for each actual board meeting and any reasonable expenses getting to them may be paid. not mozilla foundation where directors receive up to $1,305,000 US per year and several have more than ample "salaries" but also get "bonus" compensation ranging from $400,000 to $600,000 US per year! a bonus at a non-profit!? and some directors/officers also serve with mozilla corporation where they undoubtedly receive even more exorbitant compensation and other perks hidden away from prying eyes.

as they last reported, mozilla had amassed $313,000,000 US in net assets. i do not need to drag out my cpa/mba certs to know that this was primarily possible due to the huge non-compensated work-product provided by many "volunteers".

so, mozilla, provide the standards you claim to champion at whatever the cost. period!

i recognize that the expansiveness of this comment (or "rant" if you prefer) is not the purpose of this venue. but, when people see the facts and move on to other non-compliance issues they will know that asking for cash-for-performance rings rather hollow in mozilla's case.

Comment 23

[gustav]

in 2 months this bug will celebrate 10 years :(

Myself had to abandon a commercial project due to this blocking problem.

Mozilla has gotten hundreds of millions of usd from various deals,  how much of the money is going to development of the product ?
Where is that information available in a transparent easy to comprehend way.

Comment 24

[gustav]

in 2 months this bug will celebrate 10 years :(

Myself had to abandon a commercial project due to this blocking problem.

Mozilla has gotten hundreds of millions of usd from various deals,  how much of the money is going to development of the product ?
Where is that information available in a transparent easy to comprehend way.

Comment 25

[Will Stokes]

The following SVG uses the letter spacing attribute:
http://johan.github.io/kilobyte-svg-challenge/logos/lysator.svg

As of Mar 2, 2017 this works properly in Safari, Chrome, Edge, and Internet Explorer 11. Firefox still appears to ignore the letter-spacing SVG attribute.

Comment 26

[u459114]

according to current job assignment, I will not have time to work on this feature in within six months. deassign.

Comment 27

[Jonathan Watt [:jwatt]]

Mass bug change to replace various 'parity' whiteboard flags with the new canonical keywords. (See bug 1443764 comment 13.)

Comment 28

[Konrad]

This lack of support of this properties are annoying like in old days IE6. I can understood it if there are no string engine support for creating spacing between glyphs, but it exist! Property "dx" prove that there are all necessary mechanisms to support it. "dx" can be used to simulate 'letter-spacing' an probably 'word-spacing'.

For
'letter-spacing: N;'
it can be simulated by:
'dx: 0 N N N ... N;' where number of N is length of string in <text> minus one.

In case of 'word-spacing' this is more complicated but doable.

Comment 29

[Emilio Cobos Álvarez (:emilio)]

Robert or Cam, could you summarize why is this hard? Like, rendering-wise I assume this is just a matter of removing these early-returns right?

I guess this is hard because this needs to be all exposed in the SVG DOM APIs?

Comment 30

[Emilio Cobos Álvarez (:emilio)]

Well, just gave that a shot and that's not enough itself. I missed one of the other early returns, but clearly that's not enough. Letter spacing is probably easy since you can just use the same mechanism as dx, and not handle it in nsTextRun. word-spacing however is (probably?) harder.

Comment 31

[Robert Longson [:longsonr]]

I think the DOM APIs may come out in the wash if you do it right.

Comment 32

[iliakan]

It was such a great surprise to see Firefox lacking support of this.
Migrated the site from PNG to SVG, and Firefox was the only browser who couldn't render SVGs correctly, because of this.

Hopefully will be implemented.

Comment 33

[Cameron McCormack (:heycam)]

The right way to handle this is to ensure we have an appropriate PropertyProvider object whenever we call into glyph measuring functions on text runs. I wrote a patch and it didn't seem too tricky in the end.

Comment 34

[Cameron McCormack (:heycam)]

Some trickiness would be needed to ensure getEndPositionOfChar and getExtentOfChar don't include any letter-spacing or word-spacing that comes after it. I haven't handled that. We'd need to add some new function or flags to measure advances on a text run that specifically exclude any final space. I'm inclined to leave that to a followup.

Comment 35

[Cameron McCormack (:heycam)]

https://treeherder.mozilla.org/#/jobs?repo=try&revision=9dcb01c6fe1b3777019cccfeddd10ef43b7a91a6

Comment 36

[Cameron McCormack (:heycam)]

(In reply to Cameron McCormack (:heycam) from comment #33)

The right way to handle this is to ensure we have an appropriate PropertyProvider object whenever we call into glyph measuring functions on text runs.

Robert's approach to explicit get the spacing information and apply it during SVG glyph positioning could also work, but I think it would be harder to ensure that we apply spacing in exactly the same way that CSS does. So I think it's easier to rely on nsTextFrame to position its glyphs with letter-spacing etc. applied, and then use those results when layering on the SVG glyph positioning.

Comment 37

[Cameron McCormack (:heycam)]

Attachment: Bug 371787 - Add support for letter-spacing and word-spacing in SVG text.

Comment 38

[Cameron McCormack (:heycam)]

https://treeherder.mozilla.org/#/jobs?repo=try&revision=d32ee233eee1a1b4b18ce58ddbff2931ad8540d5

Comment 39

[Cameron McCormack (:heycam)]

https://treeherder.mozilla.org/#/jobs?repo=try&revision=899a919ffcef1b8e71883488c1729669fea3e84a

Comment 40

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/ed9b896fd383
Add support for letter-spacing and word-spacing in SVG text. r=jfkthame,longsonr

Comment 41

[Cosmin Sabou [:CosminS]]

https://hg.mozilla.org/mozilla-central/rev/ed9b896fd383

Comment 42

[Xidorn Quan [:xidorn] UTC+11]

Since I raised w3c/csswg-drafts#4498, let me also ask the question here: how can author detect the existence of this feature?

Comment 43

[Cameron McCormack (:heycam)]

There's no pure CSS way to detect whether letter-spacing and word-spacing have an effect on SVG text (since @supports would return true for the properties in general). It was kind of just a bug that we didn't support these properties on SVG text.

If you have script available you can always create a <text> element with spacing, then look at the bounding box or something to tell if it has an effect.

Comment 44

[Cameron McCormack (:heycam)]

Release Note Request (optional, but appreciated)
[Why is this notable]: Support for making letter-spacing and word-spacing work on SVG text is a common author request.
[Affects Firefox for Android]: Yes, this is a platform feature.
[Suggested wording]: The letter-spacing and word-spacing CSS properties now work on SVG text.
[Links (documentation, blog post, etc)]: Maybe just https://developer.mozilla.org/en-US/docs/Web/CSS/letter-spacing and https://developer.mozilla.org/en-US/docs/Web/CSS/word-spacing.

Comment 45

[sjw]

There are more specific articles for SVG:
https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/letter-spacing
https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/word-spacing

Comment 46

[Julien Cristau [:jcristau]]

Is this worth a mention in the main (user-facing) release notes or is a developer note at https://developer.mozilla.org/en-US/docs/Mozilla/Firefox/Releases/72 sufficient?

Comment 47

[Cameron McCormack (:heycam)]

I think a developer note is sufficient.

Comment 48

[Cory]

This bug still appears to be present in Firefox 72, even though stated that it is fixed.

Comment 49

[Emilio Cobos Álvarez (:emilio)]

Yes, it was disabled in bug 1599173 because of a serious regression, and then re-enabled when fixed, which was bug 1600855 (and which unfortunately didn't make it on time for 72). So will be in 73.

Comment 50

[Cory]

(In reply to Emilio Cobos Álvarez (:emilio) from comment #49)

Yes, it was disabled in bug 1599173 because of a serious regression, and then re-enabled when fixed, which was bug 1600855 (and which unfortunately didn't make it on time for 72). So will be in 73.

Ok, thanks!

Comment 51

[stevenwisniewski]

thank you!

Comment 52

[Koji Ishii]

FYI, Gecko behaves differently for the last character, please see:
https://github.com/w3c/csswg-drafts/issues/1518#issuecomment-624458214

Comment 53

[Robert Longson [:longsonr]]

That's just bug 125390 with SVG text. The implementation is common between HTML and SVG.