Auto line-wrapping in SVG text

Question

I would like to display a  lt text gt  in SVG what would auto-line-wrap to the container  lt rect gt  the same way as HTML text fills  lt div gt  elements  Is there a way to do it  I don t want to position lines sparately by using  lt tspan gt s

User · Answer

The following code is working fine  Run the code snippet what it does   Maybe it can be cleaned up or make it automatically work with all text tags in SVG    x000D   x000D  function svg textMultiline     x000D   x000D    var x   0  x000D    var y   20  x000D    var width   360  x000D    var lineHeight   10  x000D     x000D     x000D   x000D       get the text    x000D    var element   document getElementById  test    x000D    var text   element innerHTML  x000D   x000D       split the words into array    x000D    var words   text split       x000D    var line       x000D   x000D       Make a tspan for testing    x000D    element innerHTML     lt tspan id  PROCESSING  gt busy lt  tspan  gt    x000D   x000D    for  var n   0  n  lt  words length  n      x000D      var testLine   line   words n         x000D      var testElem   document getElementById  PROCESSING    x000D          Add line in testElement    x000D      testElem innerHTML   testLine  x000D         Messure textElement    x000D      var metrics   testElem getBoundingClientRect    x000D      testWidth   metrics width  x000D   x000D      if  testWidth  gt  width  amp  amp  n  gt  0    x000D        element innerHTML      lt tspan x  0  dy      y      gt     line     lt  tspan gt    x000D        line   words n         x000D        else   x000D        line   testLine  x000D        x000D      x000D     x000D    element innerHTML      lt tspan x  0  dy      y      gt     line     lt  tspan gt    x000D    document getElementById  PROCESSING   remove    x000D     x000D    x000D   x000D   x000D  svg textMultiline    x000D  body   x000D    font-family  arial  x000D    font-size  20px  x000D    x000D  svg   x000D    background   dfdfdf  x000D    border 1px solid  aaa  x000D    x000D  svg text   x000D    fill  blue  x000D    stroke  red  x000D    stroke-width  0 3  x000D    stroke-linejoin  round  x000D    stroke-linecap  round  x000D    x000D   lt svg height  300  width  500  xmlns  http   www w3 org 2000 svg  version  1 1  gt  x000D   x000D     lt text id  test  y  0  gt GIETEN - Het college van Aa en Hunze is in de fout gegaan met het weigeren van een zorgproject in het failliete hotel Braams in Gieten  Dat stelt de PvdA-fractie in een brief aan het college  De partij wil opheldering over de kwestie en heeft schriftelijke x000D      vragen ingediend  Verkeerde route De PvdA vindt dat de gemeenteraad eerst gepolst had moeten worden  voordat het college het plan afwees   Volgens ons is de verkeerde route gekozen   zegt PvdA-raadslid Henk Santes  lt  text gt  x000D   x000D   lt  svg gt  x000D   x000D   x000D

User · Answer

This functionality can also be added using JavaScript  Carto net has an example   http   old carto net papers svg textFlow   Something else that also might be useful to are you are editable text areas   http   old carto net papers svg gui textbox

User · Answer

Here s an alternative    lt svg     gt     lt switch gt       lt g requiredFeatures  http   www w3 org Graphics SVG feature 1 2  TextFlow  gt         lt textArea width  200  height  auto  gt         Text goes here        lt  textArea gt       lt  g gt       lt foreignObject width  200  height  200        requiredFeatures  http   www w3 org TR SVG11 feature Extensibility  gt         lt p xmlns  http   www w3 org 1999 xhtml  gt Text goes here lt  p gt       lt  foreignObject gt       lt text x  20  y  20  gt No automatic linewrapping  lt  text gt     lt  switch gt   lt  svg gt    Noting that even though foreignObject may be reported as being supported with that featurestring  there s no guarantee that HTML can be displayed because that s not required by the SVG 1 1 specification  There is no featurestring for html-in-foreignobject support at the moment  However  it is still supported in many browsers  so it s likely to become required in the future  perhaps with a corresponding featurestring   Note that the  textArea  element in SVG Tiny 1 2 supports all the standard svg features  e g advanced filling etc  and that you can specify either of width or height as auto  meaning that the text can flow freely in that direction  ForeignObject acts as clipping viewport   Note  while the above example is valid SVG 1 1 content  in SVG 2 the  requiredFeatures  attribute has been removed  which means the  switch  element will try to render the first  g  element regardless of having support for SVG 1 2  textArea  elements  See SVG2 switch element spec

User · Answer

Building on  Mike Gledhill s code  I ve taken it a step further and added more parameters  If you have a SVG RECT and want text to wrap inside it  this may be handy   function wraptorect textnode  boxObject  padding  linePadding         var x pos   parseInt boxObject getAttribute  x         y pos   parseInt boxObject getAttribute  y         boxwidth   parseInt boxObject getAttribute  width         fz   parseInt window getComputedStyle textnode   font-size         We use this to calculate dy for each TSPAN       var line height   fz   linePadding      Clone the original text node to store and display the final wrapping text      var wrapping   textnode cloneNode false             False means any TSPANs in the textnode will be discarded    wrapping setAttributeNS null   x   x pos   padding      wrapping setAttributeNS null   y   y pos   padding       Make a copy of this node and hide it to progressively draw  measure and calculate line breaks      var testing   wrapping cloneNode false      testing setAttributeNS null   visibility    hidden        Comment this out to debug     var testingTSPAN   document createElementNS null   tspan       var testingTEXTNODE   document createTextNode textnode textContent      testingTSPAN appendChild testingTEXTNODE       testing appendChild testingTSPAN      var tester   document getElementsByTagName  svg   0  appendChild testing       var words   textnode textContent split          var line   line2          var linecounter   0     var testwidth      for  var n   0  n  lt  words length  n             line2   line   words n               testing textContent   line2        testwidth   testing getBBox   width         if   testwidth   2 padding   gt  boxwidth             testingTSPAN   document createElementNS  http   www w3 org 2000 svg    tspan            testingTSPAN setAttributeNS null   x   x pos   padding           testingTSPAN setAttributeNS null   dy   line height            testingTEXTNODE   document createTextNode line           testingTSPAN appendChild testingTEXTNODE           wrapping appendChild testingTSPAN            line   words n                 linecounter                  else           line   line2                     var testingTSPAN   document createElementNS  http   www w3 org 2000 svg    tspan        testingTSPAN setAttributeNS null   x   x pos   padding       testingTSPAN setAttributeNS null   dy   line height        var testingTEXTNODE   document createTextNode line       testingTSPAN appendChild testingTEXTNODE        wrapping appendChild testingTSPAN        testing parentNode removeChild testing       textnode parentNode replaceChild wrapping textnode        return linecounter     document getElementById  original   onmouseover   function           var container   document getElementById  destination        var numberoflines   wraptorect this container 20 1       console log numberoflines       In case you need it

User · Answer

Text wrapping is not part of SVG1 1  the currently implemented spec  You should rather use HTML via the  lt foreignObject  gt  element    lt svg     gt    lt switch gt   lt foreignObject x  20  y  90  width  150  height  200  gt   lt p xmlns  http   www w3 org 1999 xhtml  gt Text goes here lt  p gt   lt  foreignObject gt    lt text x  20  y  20  gt Your SVG viewer cannot display html  lt  text gt   lt  switch gt    lt  svg gt

User · Answer

The textPath may be good for some case    lt svg width  200  height  200      xmlns  http   www w3 org 2000 svg  xmlns xlink  http   www w3 org 1999 xlink  gt    lt defs gt     lt  -- define lines for text lies on -- gt     lt path id  path1  d  M10 30 H190 M10 60 H190 M10 90 H190 M10 120 H190  gt  lt  path gt    lt  defs gt    lt use xlink href   path1  x  0  y  35  stroke  blue  stroke-width  1    gt    lt text transform  translate 0 35   fill  red  font-size  20  gt     lt textPath xlink href   path1  gt This is a long long long text        lt  textPath gt    lt  text gt   lt  svg gt

User · Answer

I have posted the following walkthrough for adding some fake word-wrapping to an SVG  text  element here   SVG Word Wrap - Show stopper   You just need to add a simple JavaScript function  which splits your string into shorter  tspan  elements   Here s an example of what it looks like     Hope this helps

[xml] Auto line-wrapping in SVG text

Examples related to xml

Examples related to text

Examples related to svg

Examples related to word-wrap