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/.
<script type="text/ecmascript" xlink:href="../resources/helper_functions.js" /> <script type="text/ecmascript" xlink:href="textFlow.js" />
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");
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.
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);
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.
Monday, 26-Feb-2007 23:14:05 CET
© carto:net (andreas neumann & andré m. winter)
original URL for reference: http://www.carto.net/papers/svg/textFlow/index.shtml