ariutta / cross-platform-text

JS library for creating text in SVG, Canvas and possibly other formats in the future.

cross-platform-text

JS library for creating text in SVG, Canvas and possibly other formats in the future. Handles both single- and multi-line text.

Usage

1. Create Instance

var myInstance1 = crossPlatformText.getInstance({
  targetSelector:'#my-svg1', // (CSS selector) required
  format: 'svg' // ('svg' or 'canvas') required if 'targetSelector' does not reference an SVG or Canvas element
});

targetSelector references an SVG, Canvas or HTML element (such as a div). If it references an HTML element, the library will create a new SVG or Canvas element inside the HTML element, as specified by format.

For an existing SVG, the library will look for a g element with the class viewport. If it does not exist, the library will create it.

2. Render text

var myText1 = myInstance1.render({
    x:50, // (px) required
    y:200, // (px) required
    width:100, // (px) required
    height:20, // (px) required
    textContent:'My text\nhas two lines' // (string) required
  });

API

Supported arguments for render(arguments):

• x: x value of transform:translate, relative to upper left corner
• y: y value of transform:translate, relative to upper left corner
• width
• height
• textContent
• color : color of element behind the text
• containerSelector : references a container for the text (parent element for text)
• id: for the text element
• fill : color of the text and any decorations
• fillOpacity : opacity of the text and any decorations
• fontSize
• fontFamily
• fontStyle
• fontWeight
• overflowX
• overflowY
• padding
• rotation: rotate value for transform:rotate, with origin centered within the provided x/y and width/height
• textAlign : horizontal alignment of the text within the provided width
• textOverflow
• verticalAlign : vertical alignment of the text within the provided height
• whiteSpace