Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Whitespace kills SVG text #1236

Closed
fforw opened this issue Mar 9, 2014 · 9 comments
Closed

Whitespace kills SVG text #1236

fforw opened this issue Mar 9, 2014 · 9 comments
Labels

Comments

@fforw
Copy link
Contributor

fforw commented Mar 9, 2014

See this http://jsfiddle.net/XB98M/

Note the spaces around the {"bar"} entry that make it not being rendered as SVG text but as span after the SVG.

@syranide
Copy link
Contributor

This is currently a flaw of sorts in React that is used to get around the issue of not being able to create separate textnodes with innerHMTL nor being able to provide them with any kind of identification.

There are a number of different levels at which this could be attacked, @spicyj sumitted PR #742 that I believe concatenated adjancent string children but was rejected because it broke the determinism of the children array, or something like that. So it seems to me that if someone finds this important enough to fix now, that the solution would be to concatenate adjacent strings during rendering, but it likely isn't as easy as it sounds.

In your case, you simply have to put everything inside the braces for now.

@fforw
Copy link
Contributor Author

fforw commented Mar 10, 2014

In this case it wasn't so much that I really wanted my output to be padded with space, I just got to the second case by trying to make the code more pretty :\ and promptly fell into that trap.

@zpao
Copy link
Member

zpao commented Mar 10, 2014

fwiw, putting {"bar"} onto a new line gets parsed how you would expect. It's an awkward balance and svg definitely makes this trickier :( - check http://jsfiddle.net/wVQr3/

@syranide syranide added the SVG label Oct 8, 2014
@srcspider
Copy link

@zpao

The bug is actually not limited to just the text element. If you say have something simple like:

<g>
\t{pts}\t{lines}\t{xAxis}
</g>

the character escaping there is intentional since bug involves invisible characters

...everything will go boom as well.

Personally I'm not a fan of the magical span insertion. The way react did it previously where whitespace had to manually inserted was actually a nice "feature" since it removed the need for crappy font-size: 0 hacks and meant everything was always exactly as intended.

While its more or less harmless for html use cases for svg where text can only really be inserted with <text> tags I think React should just disable that magic altogheter; but I guess it's tricky to disable.

How about if the magic span insertion only happens for certain html tags, eg. span, p, h* and in all other cases react will strip out the whitespace and won't inject anything in the code. That should work out for all parties, people who want their whitespace just have to properly use html tags, people like me who, for the most part, don't want it ever can stick divs everywhere.

@natew
Copy link

natew commented Jun 16, 2015

Just want to comment here and say this is pretty tricky when going with flex box. Without spans your text will flow as it should, but once it's wrapped with a span, you no longer can preserve this at all.

Our default flexbox CSS reset uses flex-flow: column. Even when doing display: inline for spans, it will break text into lines once you use a variable. Not sure how to get around this, but is a pretty big "weirdness" of using React now.

@ghost
Copy link

ghost commented Nov 12, 2015

For anyone searching about this (like i was). Works in 0.14.0 😄
https://jsbin.com/toluqu/3/edit?html,js,output

@skcalanderson2
Copy link

Thank you thelamdaparty! I have been trying to get this to work all day. The tspan did the trick.

@kfix
Copy link

kfix commented Dec 23, 2015

@thelambdaparty @skcalanderson2 : I use that workaround too but its not a solution. I shouldn't have to template everything (ex: <tspan>{purely static string}</tspan>) to keep my SVG's from getting span'd and broken.

sophiebits added a commit to sophiebits/react that referenced this issue Dec 23, 2015
@sophiebits
Copy link
Collaborator

Should be better now due to #5753.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Development

Successfully merging a pull request may close this issue.

8 participants