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

how to make text multi-line? #821

Open
echolove38 opened this issue Jul 22, 2022 · 7 comments
Open

how to make text multi-line? #821

echolove38 opened this issue Jul 22, 2022 · 7 comments

Comments

@echolove38
Copy link

how to make text multi-line

@jfhenon
Copy link
Collaborator

jfhenon commented Jul 22, 2022

how to make text multi-line

Hello, this is not yet supported.

@echolove38
Copy link
Author

how to make text multi-line

Hello, this is not yet supported.

ok, hope it will some day

@pmkrawczyk
Copy link
Contributor

@jfhenon we have been thinking about the same feature, and I have the following thought:

  1. Multiline text with advanced formatting with pure SVG/js is very difficult to implement
  2. There are excellent open-source HTML text editors (TMCE, Quill)
  3. There are pretty good libraries (e,g, https://github.com/felixfbecker/dom-to-svg) for converting HTML to SVG
  4. Perhaps it would be possible to combine the two?

So:

  • Upon click, launch external HTML text editor inside foreignObject
  • Upon end of editing, convert HTML to svg and add as an embedded SVG (or group) to the main SVG
  • Store HTML in data property for future editing (helpful for search engines)

What do you think?

@jfhenon
Copy link
Collaborator

jfhenon commented Jul 28, 2022

My opinion is that we indeed need multiline support. I'm not sure we want to add so many new dependencies for this. could we rather go for a simpler multiline support (same fonts, same color, same size but multiple lines) in the "standard" svgEdit?A more advanced editor could be proposed as an extension.

@pmkrawczyk
Copy link
Contributor

Agreed, extension is certainly the way to go.

The problem with implementing both is that the code will be completely different, and much more complicated in case of pure svg implementation (via tspan elements - see e.g. https://www.oreilly.com/library/view/svg-text-layout/9781491933817/ch04.html). Perhaps implementing pure-svg multiline-only text will not be too difficult, but adding local formatting certainly will, prohibiting future development. This could change with SVG 2.0.

All in all, I would like to give the HTML-editor route a try via an extension.

@cuixiping
Copy link
Member

As I commented at #838 (comment)

SVG 2 Flowed Text support this feature.
https://www.w3.org/TR/SVG/text.html#TextLayoutContentArea
http://tavmjong.free.fr/SVG/TEXT_FLOW/

In SVG 1.1, multi-line text can be implemented by multiple <tspan> elements. yes it's difficult.
https://www.oreilly.com/library/view/svg-text-layout/9781491933817/ch04.html

@echolove38
Copy link
Author

oh ? but how to integrate to svgedit

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

No branches or pull requests

4 participants