CODEWITHSUNDEEP
svgd3.jsword-wraptext-size
karlitos
karlitos

Reputation: 1656

How to get exact DIV size with defined maximal-width to simulate text flow in SVG?

I am trying to achieve text flow in SVG using the foreignObject SVG element which encapsulates a DVI DOM-Element. My problem is which CSS parameters set, so I can use custom fon-maily style.

I use following steps.

0. For defined 'maximal-width' value :
1. Make a foreignObject at least max-width wide
2. Put a DIV element inside with some text and max-width : 'maximal-width' style.
3. Get it's size (width x height) and update the size of the foreignObject element in the end.
4. Make some SVG rectangle in the background with the same size as the text/foreignObject element.

Expected result is a wrapped text encapsulated in foreignObject element of same size with SVG rectangle in background which has also the same size.

BUT

I get problem when using display : inline/inline block together with different font-family settings.

I made some small example here http://jsfiddle.net/zm7Xb/3/ and I got propper results using Chrome, display : inline-block CSS with the default font. Using Helvetica results in a DIV element which is wider than the text inside. Using google-font results in even worse result.

Using display : inline fixes the width but results in false vertical size (height). Even when using default font.

Tested in firefox with same results.

I am not able to see where is the problem. Maybe related to this one svg appending text element - gives me wrong width ? And more important: what can I do to fix it ?

Upvotes: 0

Views: 3397

Answers (1)

Robert Longson
Robert Longson

Reputation: 124029

You are missing sizings in a number of places so things either have no size or default to 300 x 150 pixels. This is all per the appropriate specifications and Chrome at some point will implement this properly and match Firefox.

Firstly you need to add these styles to your code.

html, body {
    width: 100%;
    height: 100%;
}

#svg_container {
    width: 100%;
    height: 100%;
}

You also need to set a width/height on the svg element like so...

var svg = svgContainer.append("svg")
    .attr('width', "100%")
    .attr('height', "100%");

Which gives you this

This solves the missing second foreignObject in Firefox.

As to why you're not getting the sizes you expect, font loading is asynchronous so you're probably measuring the text before the font you want has loaded. There's no reliable way to tell if a font has loaded so the usual method is to check at intervals till the text size changes.

Upvotes: 2

Related Questions