Forum Bugs

Rotated text via inline SVG

AndyH
Hi Prince XML team,

We are evaluating your superb product with a view to using it for all of our dynamic PDF report generation; on the whole, we have been impressed by everything that we have seen (two of the things that we particularly need are RTL support and Chinese text rendering - these seem to work 100% as we would expect them to).

We have a need to have vertical text providing row headings (often with a rowspan set) in tables, though, and this has provided us with more difficulty. As far as we can tell, you intend to support CSS text rotation at some point in the future but, in the meantime, we have been trying to get vertical (rotated) text using inline SVG; this has thrown up a couple of issues that seem to exist with the positioning and sizing of inline SVGs (this would provide a problem for us in its own right, since we rely on dynamic SVG imagery in many of our reports) ... we are still hopeful that it's just something we are doing wrong, but here are the two main results that were not expected (I've cut these down to minimal case scenarios):

1. SVGs seem to force a 2.5px "margin-bottom" (but setting margin:0 does not fix it)
Example inline-styled HTML:
<html>
<body>
<table>
<tr>
<td style="background-color:#FF0000">
<svg width="10mm" height="10mm" style="background-color:#00FF00">
</svg>
</td>
</tr>
</table>
</body>
</html>
Result:
Example1.png

We would not expect to see any red showing through from the table-cell - and yet 2.5px seem to be automatically added (measured against a 1px border)

2. SVGs do not seem to respect % heights (or unspecified heights); we would like a way to specify the SVG width and have the height be 100% of its container; we thought that this might do it:
<html>
<body>
<table>
<tr>
<td style="background-color:#FF0000;width:10mm;height:20mm">
<svg width="10mm" height="100%" style="background-color:#00FF00">
</svg>
</td>
</tr>
</table>
</body>
</html>
Result:
Example2.png

We would not expect to see any red showing through from the table-cell
(issue 1. is apparent here too, in the incorrect vertical alignment)

Please let us know if these represent a bug or a problem with our code or, indeed, with our expectations,

Thanks in advance,

Andy

P.S. Whilst I'm here, there seems to be something odd about the recognition of installed Windows fonts if they are OpenType (although we can work around this by pointing to the Windows/Fonts directory directly, this is not ideal as C:/Windows/Fonts is not necessarily where the fonts will be)
  1. Example1.png2.8 kB
  2. Example2.png2.9 kB
mikeday
The red underline is because the SVG is being rendered as an inline element, with baseline alignment. If you add a lowercase "g" or "y" inside the table cell before the SVG element then it will make sense. You can avoid this behaviour by treating it as a block with "display: block", or changing the vertical alignment, eg. "vertical-align: top".

Regarding the height issue, I think at the moment percentages are all resolved relative to width. That may not be correct behaviour in this case, I'm not quite sure.
AndyH
Hi Mike,

Thank you very much for your quick and useful reply; the display:block sorted out our first problem.

I'm emailing you directly about the second issue since I'm not sure that the BB is the best place for the discussion,

Thanks again,

Andy