enter image description here

I'm creating playing cards and search for SVG library to automatize the process of filling each card by text. Card is a rectangle, physically about 86x55 mm. I need to generate ~ 100 cards with unique text.

Features I need:

  • split long string into small strings (splitting by <tspan> or just adding newline)
  • center strings (make alignment-baseline=center if using <tspan>, dominant-baseline=middle, text-anchor=middle
  • auto resize text if it does not fit into rectangle
  • ideally (but not necessarily ) if a rectangle is visible, like <rect x="0" y="0" width="86" height="55" rx="0" ry="0" fill="none" stroke="#000000"></rect>, to paint border of card.

I've tried some libs, but all of them have problems. Please advice me other lib or give a working example with following libs.

Ready-to-use solutions I've already tried:

  1. d3plus.textwrap - does not work with dynamically created elements, so it's not possible to generate cards with javascript
  2. d3plus-text - bad fontResize, some text is outside of rectangle. Maybe because lib splits text into many <text> and one <tspan> inside each <text>, not one <text> with many child <tspan>s.
  3. raphael-paragraph - cut text if it not fit: instead Lorem Ipsum is simply dummy text of the printing and typesetting industry you may get Lorem Ipsum is simply dummy tex...

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.