|
|
Rank: Member
Groups: Member
Joined: 8/24/2011
Posts: 10
|
Is there any way to get the text to rotate 90 degrees when using htmltopdf?
|
|
Rank: Administration
Groups: Administration
Joined: 5/27/2007
Posts: 24,084
|
Hi, No. You can not do that. You can rotate the "paper" instead. This usually means switching the paper from Portrait to Landscape: http://www.essentialobjects.com/forum/postst5556_HtML-to-PDF-LAnscape-.aspxHope this helps. Please feel free to let us know if you have any more questions. Thanks!
|
|
Rank: Member
Groups: Member
Joined: 8/24/2011
Posts: 10
|
Can you rotate text within a PDF with the ACM library? This vertical text is a deal breaker, so if it cannot be done, then we are back to square one.
Thanks.
|
|
Rank: Administration
Groups: Administration
Joined: 5/27/2007
Posts: 24,084
|
Hi, You can rotate your text in your HTML with CSS. The HTML to PDF converter will honor the CSS and rotate it accordingly. For example, the following text would rotate the text 7.5 degrees:
Code: CSS
.box_rotate
{
-moz-transform: rotate(7.5deg); /* FF3.5+ */
-o-transform: rotate(7.5deg); /* Opera 10.5 */
-webkit-transform: rotate(7.5deg); /* Saf3.1+, Chrome */
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=0.083); /* IE */
}
If you only concern about our converter, then you only need to keep "-webkit-transform". For example, the following style rotate the text 90 degrees in our converter:
Code: CSS
.box_rotate
{
/*rotate text for 90 degress in our converter*/
-webkit-transform: rotate(90deg);
}
Code: HTML/ASPX
<div class="box_rotate">
This text will be rotated.
</div>
Once the text has passed the converter and is in PDF, you won't be able to rotate it. I believe that is technically possible but no interface is provided for you to do so. Thanks!
|
|
Rank: Member
Groups: Member
Joined: 8/24/2011
Posts: 10
|
The CSS worked like a charm. Thanks a million!
|
|
Rank: Administration
Groups: Administration
Joined: 5/27/2007
Posts: 24,084
|
You are very welcome. Glad that it works for you!
|
|
Rank: Member
Groups: Member
Joined: 8/24/2011
Posts: 10
|
Ok, there is one issue with the rotate. I am putting this text in a tablecell, and the width of the cell is matching the width of the text before its rotated, and I cannot override the width of the cell. Also, I cannot get the text aligned on the top of the cell.
Code: HTML/ASPX
<table border="1" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td style="width:120px;height:76px;">
<p align="center">
</p>
<p align="center">
<strong>Board</strong></p>
<p align="center">
<strong>Action</strong></p>
</td>
<td style="width:18px;height:76px;">
<strong>Motion</strong>
</td>
<td style="width:18px;height:76px;">
<strong>Second</strong>
</td>
<td style="width:18px;height:76px;">
<strong>Aye</strong>
</td>
<td style="width:18px;height:76px;">
<strong>Nay</strong>
</td>
<td style="width:18px;height:76px;">
<strong>Abstain</strong>
</td>
</tr>
</tbody>
</table>
The top row starting with Motion and onward should be rotated 90 degrees, top aligned, and the cell width be about 10-15px. The rotate works fine, but I cannot get the text to be at the top (ive tried all different horizontal and vertical alignments), not can I get the width to be less than the original text.
|
|
Rank: Administration
Groups: Administration
Joined: 5/27/2007
Posts: 24,084
|
Hi,
I am not sure if I understand your question correctly, however it does appear that the rotation is applied on the text and the table separately. So it only works for simple text, not a complex document.
Another option is to for us to support full page rotation. That way you would render the HTML without rotation, but we would then give you the ability to "rotate" the whole page. This is similar to a screen rotation that you would common see on a smart phone. Obviously with this option alone you can not have some horizontal text and some vertical text. However it is possible to combine the CSS rotation with this rotation to create rather complex output. Will this feature be useful for your situation?
Thanks!
|
|
Rank: Newbie
Groups: Member
Joined: 8/8/2011
Posts: 3
|
You can also try the following:
Code: CSS
.rotate
{
-webkit-transform: rotate(90deg); /* Saf3.1+, Chrome */
display: inline-block;
width: 18px;
}
td
{
vertical-align: top;
}
The table:
Code: HTML/ASPX
<table border="1" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td style="width:120px;height:76px;">
<p align="center">
</p>
<p align="center">
<strong>Board</strong></p>
<p align="center">
<strong>Action</strong></p>
</td>
<td style="width:18px;height:76px;">
<strong class="rotate">Motion</strong>
</td>
<td style="width:18px;height:76px;">
<strong class="rotate">Second</strong>
</td>
<td style="width:18px;height:76px;">
<strong class="rotate">Aye</strong>
</td>
<td style="width:18px;height:76px;">
<strong class="rotate">Nay</strong>
</td>
<td style="width:18px;height:76px;">
<strong class="rotate">Abstain</strong>
</td>
</tr>
</tbody>
</table>
|
|
Rank: Member
Groups: Member
Joined: 8/24/2011
Posts: 10
|
How can I put the CSS file into the HTML in order for it to be picked up by EO.PDF? I have it in the <head>, but nothing changes on my PDF. I'd prefer not to inline CSS into my html, but if thats the only way, then so be it.
|
|
Rank: Newbie
Groups: Member
Joined: 8/8/2011
Posts: 3
|
Can you try the following document?
Code: HTML/ASPX
<!DOCTYPE html><html>
<head><title>Test template</title>
<style type="text/css">
.rotate
{
-webkit-transform: rotate(90deg); /* Saf3.1+, Chrome */
display: inline-block;
width: 18px;
}
td
{
vertical-align: top;
}
</style>
</head>
<body>
<table border="1" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td style="width:120px;height:76px;">
<p align="center">
</p>
<p align="center">
<strong>Board</strong></p>
<p align="center">
<strong>Action</strong></p>
</td>
<td style="width:18px;height:76px;">
<strong class="rotate">Motion</strong>
</td>
<td style="width:18px;height:76px;">
<strong class="rotate">Second</strong>
</td>
<td style="width:18px;height:76px;">
<strong class="rotate">Aye</strong>
</td>
<td style="width:18px;height:76px;">
<strong class="rotate">Nay</strong>
</td>
<td style="width:18px;height:76px;">
<strong class="rotate">Abstain</strong>
</td>
</tr>
</tbody>
</table>
</body>
</html>
Or did you mean you want it in an seperate file? Just link to it:
Code: HTML/ASPX
<link href="your-style-sheet.css" rel="stylesheet" type="text/css" />
|
|
Rank: Administration
Groups: Administration
Joined: 5/27/2007
Posts: 24,084
|
Hi Chris,
Thank you very much for sharing!
To mike: As to CSS in header or inline, it should not matter. You can use it either way and both should work. However if you call ConvertHtml and use your CSS in a separate file as Chris mentioned, then you must set HtmlToPdf.Options.BaseUrl correctly. If you do not set BaseUrl, the converter would not know where to find your CSS file. Note this only applies when you call ConvertHtml. When you call ConvertUrl, BaseUrl is automatically derived from the HTML page Url.
Thanks!
|
|
Rank: Member
Groups: Member
Joined: 8/24/2011
Posts: 10
|
Thanks admin and Chris. It was not working to put rotated text on the top of my tablecell, but it looks like the customer can live with it the way that it is.
|
|