Log in / Register

Forum › Bugs

SVG Text Placement problem

Snerf
Using Prince 6r8 in php/centos, I generate a pdf file from the following html.

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Test Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
@page
{
        size: 9.25in 3.75in;
	margin: 0in;
	prince-image-resolution: 300dpi;
	prince-shrink-to-fit: auto;
}
img { max-width: none }
</style>
</head>
<body><div id="page1" style="position: relative; width: 925px; height: 375px; border:1px solid black;"><svg style="position: absolute; left:310px; top:4px;z-index:13; width:300px; height:100px;"><text fill="#000" transform="rotate(0 0,0)" x="0" y="30" style="font-family:Helvetica Thin;font-size:42px;">Test address ...</text></svg><svg style="position: absolute; left:510px; top:4px;z-index:13; width:300px; height:300px"><text fill="#000" transform="rotate(90 30,30)" text-anchor="start" x="0" y="0" style="font-size:42px;">Test address ...</text></svg></div>
</body></html>


In looking at the HTML file, you can see that the vertical 'test address' text begins right after the 3 dots. Also, the horizontal 'test address' text is located right near the top of the document.

Then you look at the PDF file generated. The horizontal text is spaced down about the height of the text, and the vertical text is moved to the right about the same, the width of the text.

Quite a difference between the two. Is the CSS style not being properly applied, not sure.

Thanks
mikeday
Without a viewBox attribute it can be difficult to judge the correct size of an SVG canvas. In Prince 8.1, basic text transformations can be achieved without using SVG at all, using CSS3 Transforms.
Snerf
Ok, I have added a viewbox, changed the coding a bit, and it results in the same issue, the html and the PDF file do not match up.

<svg viewBox="0 0 925 375" style="position:absolute;z-index:13;top:0px;left:0px;" xmlns="http://www.w3.org/2000/svg" xlink="http://www.w3.org/1999/xlink"><g><text fill="#fff" transform="rotate(90 100,0)" x="100" y="90" font-size="42">This is a test</text></g></svg>


The SVG code that the html uses/displays and the PDF file that is generated are not the same.
Snerf
Well, I thought I would take a quick look at the log for prince,and found this:

/_test/_temp/1.html:18: error: Tag svg invalid
/_test/_temp/1.html:18: error: Tag g invalid

This most certainly must have something to do with it.
mikeday
Actually these errors are coming from the HTML parser, which doesn't know about SVG yet. It still processes the tags, but complains about them first. If the document is XML, then there will be no warnings about unknown tags. We are working on a new HTML5 parser which happily accepts SVG and MathML tags in HTML documents.
mikeday
Unfortunately, the current HTML parser also lowercases all attribute names, which makes attributes with mixed-case names like "viewBox" not work. Can you try running Prince with "-i xml" on the command-line, or rename your file to have a .xml or .xhtml extension? That way it will be parsed with the XML parser, which is case-sensitive. The other option is to move the SVG image to a separate external .svg file.
Snerf
Converting it to an XML file seems to have done the trick for a basic document.
But I am curious, as I am not sure how to fix this, but I have a &nbsp; in the text box,and now the log says:

error: Entity 'nbsp' not defined

Is there a simple fix for this?

Thanks again, truly appreciate it.
Snerf
Never mind that, I found the answer in another post, something about the Document DTD or such, I will do some research and see what I can come up with.
mikeday
Right, specifying an XHTML DTD or just changing the entity to &#xA0; will do the trick.
Snerf
Wow, the XML parser is very picky, it does not like dirty html passed through it.
mikeday
Yes, XML must follow the rules. HTML is more lenient, but is not designed to include XML content, such as SVG or MathML. Ideally HTML5 unifies these two worlds, by handling sloppy markup and some forms of XML in the same parser. :)
Snerf
Ok.

So with the upcoming 8.1, it will allow for CSS3 transforms and better SVG/HTML5 ?

Will have to wait and see when that comes out then, is there an expected date for release?
I can then try out the new version , and if all is well, can proceed with upgrading my version.

Thanks again
mikeday
Definitely CSS3 Transforms. The HTML5 parser is experimental, but will be available through a command-line option, eg. "-i html5". We hope to have it ready for release soon.