Documentation

Features

• automatic line breaks
• works with different text-anchor settings
• can create justified text (only works in UAs wwwproperly supporting the word-spacing attribute
• returns the dy values, so other elements can be placed relatively to the last line in the text block

Dependencies on external files and functions

1. helper_functions.js:
   • all the global variables at the top of the file
2. textFlow.js:
   • all functions in this file are necessary

Step by Step Instructions

Step 1: Download and link the necessary javascript files in your svg file

Download the files helper_functions.js and textFlow.js and place them in the same directory where your svg file resides in (or adopt pathes as appropriate). Link the javascript files using the following syntax:

	<script type="text/ecmascript" xlink:href="../resources/helper_functions.js" />
	<script type="text/ecmascript" xlink:href="textFlow.js" />

Step 2: Get a reference to a <text/> element

We first need a reference to a (preferably, but not necessarily) empty <text/>. The following code creates a new empty text node:

var textNodeLeftAligned = document.createElementNS(svgNS,"text");
textNodeLeftAligned.setAttributeNS(null,"x",55);
textNodeLeftAligned.setAttributeNS(null,"y",65);
textNodeLeftAligned.setAttributeNS(null,"font-size",10);
textNodeLeftAligned.setAttributeNS(null,"font-family","Arial,Helvetica");
document.documentElement.appendChild(textNodeLeftAligned);

Alternatively, you could reference an existing text element with the following statement:

var textNode = document.getElementById("idOfTextElement");

Step 3: Call the textFlow() function

You call the call the textFlow() function with the following parameter:

var dy = textFlow(myText,textToAppend,maxWidth,x,ddy,justified);

The parameters are used as follows:

• myText (string): the text to flow within the given rectangle (maxWidth)
• textToAppend (node reference): this is the <text/> node where the new <tspan/> elements will be appended.
• maxWidth (number (in viewBox units)): The maximal width the flowText will have
• x (number (in viewBox units)): the x coordinate of the text and all the following tspan elements. In case of text-anchor="end" use the x-coordinate of the right anchor point, in case of text-anchor="middle" use the x-coordinate of the center anchor point.
• ddy (number (in viewBox units)): the dy value that each new <tspan/> element will use.
• justified (boolean (true|false)): defines whether the text will be justified or not. In case of true (justification) each line (except the last one) will have the same width. This is achieved by adding extra word-space between the words.

The return value of the function indicates the full delta y value that was used to place the whole flow text. This value can be useful for the placement of subsequent graphics elements that should flow with the text, e.g. another paragraph of flowText or other graphics elements.

Example:

var myFlowText = "SVG is a language for describing two-dimensional graphics and graphical applications in XML. SVG 1.1 is a W3C Recommendation and forms the core of the current SVG developments. SVG 1.2 is the specification currently being developed as is available in draft form (comments welcome). The SVG Mobile Profiles: SVG Basic and SVG Tiny are targeted to resource-limited devices and are part of the 3GPP platform for third generation mobile phones. SVG Print is a set of guidelines to produce final-form documents in XML suitable for archiving and printing.";
var dy = textFlow(myFlowText,textNodeLeftAligned,290,55,15,false);

Known Limitations

Firefox 1.5 and Firefox 2, as well as Batik are very slow. Firefox 3 is fast enough. Further investigations will be done to why Batik is so slow. Maybe an alternative approach will be taken for Batik in a future version. All Firefox versions have alignment problems with text-anchor="end". A bug is already filed and hopefully fixed soon. Safari Webkit currently doesn't run the example. A bug is filed.

Version history

• 1.0 (2007-02-26): initial version