Using the following plugin and code you could wrap text where there is \n :

Snap.plugin(function (Snap, Element, Paper, glob) {
    Paper.prototype.multitext = function (x, y, txt) {
        txt = txt.split("\n");
        var t = this.text(x, y, txt);
        t.selectAll("tspan:nth-child(n+2)").attr({
            dy: "1.2em",
            x: x
        });
        return t;
    };
});

// And you can use it like this:

var ttt = paper.multitext(100, 100, "Sample\nmultiline\ntext").attr({
    font: "18px Arial",
    textAnchor: "middle"
}); 

And it produces: ,output

              Smaple
             multiline
               text

How can I automate this process using a rect Width as the limit for the lines of a long phrase or paragraph ? I don't want to use the foreignobject in svg for the purpose that I need the text later on . A native svg solution please. Any ideas would be greatly appreciated.

Edit: Instead of splitting on \n how can we split on certain width of a line of a text?

Edit2: I have this code that uses the above plugin, why this wouldn't work?:

var phrase = "Etiam porttitor risus in ex blandit sodales. Ut cursus mi augue, sit amet interdum diam interdum sit amet. Nunc nec lectus ex.";
var textBoxWidth = 400;
var words = phrase.split(" ");
var newPhrase = words[0];

 var t1 = paper.multitext(10,50,newPhrase)
  .attr({
    fill: "none",
    stroke:"orange",
    "text-anchor":"start",
    "font-size":"18px",
    "font-family":"Arial"});
for(i=1;i<words.length;i++){
    t1.attr({"text":newPhrase + " " + words[i]});
    if(t1.getBBox().width<=textBoxWidth){
        newPhrase += " " + words[i];
    } else {
        newPhrase += " \n" + words[i]  ;
    } 

}

Using the following plugin and code you could wrap text where there is \n :

Snap.plugin(function (Snap, Element, Paper, glob) {
    Paper.prototype.multitext = function (x, y, txt) {
        txt = txt.split("\n");
        var t = this.text(x, y, txt);
        t.selectAll("tspan:nth-child(n+2)").attr({
            dy: "1.2em",
            x: x
        });
        return t;
    };
});

// And you can use it like this:

var ttt = paper.multitext(100, 100, "Sample\nmultiline\ntext").attr({
    font: "18px Arial",
    textAnchor: "middle"
}); 

And it produces: http://jsbin./panaxujuta/1/edit?html,output

              Smaple
             multiline
               text

How can I automate this process using a rect Width as the limit for the lines of a long phrase or paragraph ? I don't want to use the foreignobject in svg for the purpose that I need the text later on . A native svg solution please. Any ideas would be greatly appreciated.

Edit: Instead of splitting on \n how can we split on certain width of a line of a text?

Edit2: I have this code that uses the above plugin, why this wouldn't work?:

var phrase = "Etiam porttitor risus in ex blandit sodales. Ut cursus mi augue, sit amet interdum diam interdum sit amet. Nunc nec lectus ex.";
var textBoxWidth = 400;
var words = phrase.split(" ");
var newPhrase = words[0];

 var t1 = paper.multitext(10,50,newPhrase)
  .attr({
    fill: "none",
    stroke:"orange",
    "text-anchor":"start",
    "font-size":"18px",
    "font-family":"Arial"});
for(i=1;i<words.length;i++){
    t1.attr({"text":newPhrase + " " + words[i]});
    if(t1.getBBox().width<=textBoxWidth){
        newPhrase += " " + words[i];
    } else {
        newPhrase += " \n" + words[i]  ;
    } 

}

• javascript
• svg
• raphael
• word-wrap
• snap.svg

Share Improve this question Follow edited Dec 19, 2014 at 8:19 Bayan asked Dec 17, 2014 at 2:36 BayanBayan 2711 silver badge88 bronze badges 4

• Can you post the testing example on a jsfiddle – Ian Commented Dec 17, 2014 at 14:09
• Thank you @Ian, Ok here is a link to a jsbin that shows the: Sample multiline text, works fine with the pluging but not the auto Wrap text code!: jsbin./panaxujuta/1/edit?html,output – Bayan Commented Dec 18, 2014 at 9:01
• That sample site does not appear to be working – Thomas Commented Dec 19, 2014 at 2:44
• Thanks @ Tomas, for some reason the link on the Sample didn't work, so I added the link just right there! – Bayan Commented Dec 19, 2014 at 8:24

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 8

Thanks for posting this. I had some of the wrapping to length code, but was having trouble because I wasn't using the array version of text().

The issue is you have to know the font size before you can limit the string. I was able to make this based off your code and wrapping logic based off https://stackoverflow./a/9899369/9970. Its not perfect and could be faster if you cached the letter widths per font/size.

  Snap.plugin(function (Snap, Element, Paper, glob) {
     Paper.prototype.multitext = function (x, y, txt, max_width, attributes) {

        var svg = Snap();
        var abc = "abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ";
        var temp = svg.text(0, 0, abc);
        temp.attr(attributes);
        var letter_width = temp.getBBox().width / abc.length;
        svg.remove();

        var words = txt.split(" ");
        var width_so_far = 0, current_line=0, lines=[''];
        for (var i = 0; i < words.length; i++) {

           var l = words[i].length;
           if (width_so_far + (l * letter_width) > max_width) {
              lines.push('');
              current_line++;
              width_so_far = 0;
           }
           width_so_far += l * letter_width;
           lines[current_line] += words[i] + " ";
        }

        var t = this.text(x,y,lines).attr(attributes);
        t.selectAll("tspan:nth-child(n+2)").attr({
           dy: "1.2em",
           x: x
        });
        return t;
     };
  });

Used like so

var bobo = paper.multitext(50, 50, "bobo bobo bobo bobo bobo bobo bobo bobo bobo", 150,
    { "font-size": "30px" });