StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
text
Body
copied!<p>This SVG stuff is baffling, isn't it ?</p> <p>Thankfully, you <em>can</em> achieve some good results, but it takes more work than using the HTML 5 . </p> <p>Here's a screenshot of my ASP.Net / SVG app, featuring a bit of "faked" word wrapping.</p> <p><img src="https://i.stack.imgur.com/LQprF.png" alt="enter image description here"></p> <p>The following function will create an SVG <strong>text</strong> element for you, broken into <strong>tspan</strong> pieces, where each line is no longer than 20 characters in length. </p> <pre><code><text x="600" y="400" font-size="12" fill="#FFFFFF" text-anchor="middle"> <tspan x="600" y="400">Here a realy long </tspan> <tspan x="600" y="416">title which needs </tspan> <tspan x="600" y="432">wrapping </tspan> </text> </code></pre> <p>It's not perfect, but it's simple, fast, and the users will never know the difference.</p> <p>My <strong>createSVGtext()</strong> JavaScript function takes three parameters: an x-position, y-position and the text to be displayed. The font, maximum-chars-per-line and text color are all hardcoded in my function, but this can be easily changed.</p> <p>To display the right-hand label shown in the screenshot above, you would call the function using:</p> <pre><code>var svgText = createSVGtext("Here a realy long title which needs wrapping", 600, 400); $('svg').append(svgText); </code></pre> <p>And here's the JavaScript function:</p> <pre><code>function createSVGtext(caption, x, y) { // This function attempts to create a new svg "text" element, chopping // it up into "tspan" pieces, if the caption is too long // var svgText = document.createElementNS('http://www.w3.org/2000/svg', 'text'); svgText.setAttributeNS(null, 'x', x); svgText.setAttributeNS(null, 'y', y); svgText.setAttributeNS(null, 'font-size', 12); svgText.setAttributeNS(null, 'fill', '#FFFFFF'); // White text svgText.setAttributeNS(null, 'text-anchor', 'middle'); // Center the text // The following two variables should really be passed as parameters var MAXIMUM_CHARS_PER_LINE = 20; var LINE_HEIGHT = 16; var words = caption.split(" "); var line = ""; for (var n = 0; n < words.length; n++) { var testLine = line + words[n] + " "; if (testLine.length > MAXIMUM_CHARS_PER_LINE) { // Add a new <tspan> element var svgTSpan = document.createElementNS('http://www.w3.org/2000/svg', 'tspan'); svgTSpan.setAttributeNS(null, 'x', x); svgTSpan.setAttributeNS(null, 'y', y); var tSpanTextNode = document.createTextNode(line); svgTSpan.appendChild(tSpanTextNode); svgText.appendChild(svgTSpan); line = words[n] + " "; y += LINE_HEIGHT; } else { line = testLine; } } var svgTSpan = document.createElementNS('http://www.w3.org/2000/svg', 'tspan'); svgTSpan.setAttributeNS(null, 'x', x); svgTSpan.setAttributeNS(null, 'y', y); var tSpanTextNode = document.createTextNode(line); svgTSpan.appendChild(tSpanTextNode); svgText.appendChild(svgTSpan); return svgText; } </code></pre> <p>The logic for word-wrapping is based on <a href="http://www.html5canvastutorials.com/tutorials/html5-canvas-wrap-text-tutorial/" rel="noreferrer">this HTML5 Canvas tutorial</a></p> <p>I hope you find this useful !</p> <p>Mike</p> <p><a href="http://www.MikesKnowledgeBase.com" rel="noreferrer">http://www.MikesKnowledgeBase.com</a></p> <p><strong>UPDATE</strong></p> <p>One thing I forgot to mention.</p> <p>That "Workflow diagram" screen that I've shown above was originally just written using an HTML 5 <strong>canvas</strong>. It worked beautifully, the icons could be dragged, popup menus could appear when you clicked on them, and even IE8 seemed happy with it.</p> <p>But I found that if the diagram became "too big" (eg 4000 x 4000 pixels), then the would fail to initialise in all browsers, nothing would appear - <strong>but</strong> - as far as the JavaScript code was concerned, everything was working fine.</p> <p>So, even with error-checking, my diagram was appearing blank, and I was unable to detect when this showstopper problem was occurring.</p> <pre><code>var canvasSupported = !!c.getContext; if (!canvasSupported) { // The user's browser doesn't support HTML 5 <Canvas> controls. prompt("Workflow", "Your browser doesn't support drawing on HTML 5 canvases."); return; } var context = c.getContext("2d"); if (context == null) { // The user's browser doesn't support HTML 5 <Canvas> controls. prompt("Workflow", "The canvas isn't drawable."); return; } // With larger diagrams, the error-checking above failed to notice that // the canvas wasn't being drawn. </code></pre> <p>So, this is why I've had to rewrite the JavaScript code to use SVG instead. It just seems to cope better with larger diagrams.</p>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload