svgedit icon indicating copy to clipboard operation
svgedit copied to clipboard

how to make text multi-line?

Open echolove38 opened this issue 2 years ago • 7 comments

how to make text multi-line

echolove38 avatar Jul 22 '22 03:07 echolove38

how to make text multi-line

Hello, this is not yet supported.

jfhenon avatar Jul 22 '22 07:07 jfhenon

how to make text multi-line

Hello, this is not yet supported.

ok, hope it will some day

echolove38 avatar Jul 25 '22 01:07 echolove38

@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?

pmkrawczyk avatar Jul 28 '22 15:07 pmkrawczyk

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.

jfhenon avatar Jul 28 '22 21:07 jfhenon

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.

pmkrawczyk avatar Jul 29 '22 09:07 pmkrawczyk

As I commented at https://github.com/SVG-Edit/svgedit/issues/838#issuecomment-1475551771

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

cuixiping avatar Mar 20 '23 03:03 cuixiping

oh ? but how to integrate to svgedit

echolove38 avatar Mar 20 '23 08:03 echolove38