main page - page initiale - hauptseite - página principal projects - projets - projekte - proyectos authors - auteurs - autoren - autores papers - exposés - berichte - papeles help - aide - hilfe - ayuda

carto:papers:svg:examples:interactivity and svg gui:text flow

TextFlow (Version 1.0, 2007-02-26 - see history at the end of the page)

Example provided by Andreas Neumann

This ECMAScript function (textFlow) should assist SVG developers to create flow text until widespread support of SVG 1.2 viewers with flowText support is available. The developer specifies a text node, the maximal width of the text block and dy values. The script creates <tspan/> elements as needed and does automatic line breaks onec a line is full. It can work with different text-anchor settings and can generate justified text, by changing the word-spacing attribute to evenly widen word-spacing to reach the same width for each line. This example shows the textFlow with various text-anchors and justified text.

The textFlow function is free to use. If you do any substantial improvements, please send back your improvements to the author. The GUI elements and script code of carto.net are licensed under the terms of the LGPL license and you need to distribute the license with your code. Additionally, you should create a link to carto.net in your project's "about page" or impressum. If you plan to use the GUI elements or script code in a commercial product, please check back with the author to investigate arrangements. The original URL for the textFlow function is http://www.carto.net/papers/svg/textFlow/.

Documentation

Features

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:

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




Last modified: Monday, 26-Feb-2007 23:14:05 CET
© carto:net (andreas neumann & andré m. winter)
original URL for reference: http://www.carto.net/svg/textFlow/index.shtml
del.icio.us Add this page to del.icio.us