function readOnly(count){ }
Sign Up ›
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
Learn More

Browse by Topic
ShowAll Questionssorted byDate Posted
+ Start a Discussion
Yishay Haspel 10Yishay Haspel 10 

writing-mode doesn't work in render as pdf

Hi,

We have a vf page with vertical table headers.
It save perfectly to PDF, but the renderAs=pdf doesn't align them vertically.
Did anybody got this problem? 
.vertical-heading p {
                 writing-mode: vertical-lr;
                -webkit-writing-mode: vertical-lr;
                -ms-writing-mode: vertical-lr;
                filter: flipH() flipV();
                margin: 0 auto;
            }

<table>
<thead>
<tr>
<th class="vertical-heading"><p>Demo</p></th>
</tr>
</thead>
</table>



Thanks,
Yishay
Yang WangYang Wang
facing the same issue.
NitishNitish
Hi Yishay,
Please make some changes in your code it will start working. Use your css code in <html></html> tag.
 
<apex:page renderAs="pdf" standardStylesheets="false" showHeader="false" applyBodyTag="false">
<html>
<style type="text/css">
  .vertical-heading p {
                 writing-mode: vertical-lr;
                -webkit-writing-mode: vertical-lr;
                -ms-writing-mode: vertical-lr;
                filter: flipH() flipV();
                margin: 0 auto;
            }
</style>
<table>
<thead>
<tr>
<th class="vertical-heading"><p>Demo</p></th>
</tr>
</thead>
</table>
</html>
</apex:page>
Akshay_DhimanAkshay_Dhiman
Hi Yishay Haspel. 
====================    VF Page   ========================
<apex:page controller="VF_Page_to_PDFControler2" renderAs="pdf" >
    <apex:form >
        <apex:pageBlock mode="maindetail">
            <apex:pageBlockSection columns="3">
                <apex:pageBlockSectionItem >
                    <h1 style="width:150px;"/>
                    {!$Organization.Name} <br/>
                    {!$Organization.Street} <br/>
                    {!$Organization.City} <br/>
                    {!$Organization.State} <br/>
                    {!$Organization.PostalCode} <br/>
                    {!$Organization.Country} <br/>
                </apex:pageBlockSectionItem>
                <apex:pageBlockSectionItem >
                    <h1 style="width:350px;"/>
                </apex:pageBlockSectionItem>
                <apex:pageBlockSectionItem >
                    <apex:image url="{!URLFOR($Resource.CALogo, 'CALogo.jpg')}" width="200" height="100" />
                </apex:pageBlockSectionItem>
            </apex:pageBlockSection>
            <hr/><br/>
            <apex:pageBlockSection columns="3">
                <apex:pageBlockSectionItem >
                  <h5 style="font-size:20px;color:blue;width:150px;">{!accAddress.name}</h5>
                </apex:pageBlockSectionItem>
                <apex:pageBlockSectionItem >
                    <h1 style="width:370px;"/>
                </apex:pageBlockSectionItem>
                <apex:pageBlockSectionItem >
                    {!accAddress.BillingCity }<br/>
                    {!accAddress.BillingState}<br/>
                    {!accAddress.BillingPostalCode}<br/>
                    {!accAddress.BillingCountry}
                </apex:pageBlockSectionItem>
                <br/><br/>
            </apex:pageBlockSection>
            <h3 style="background-Color:red;color:white;">{!conformation}</h3>
            <table border="1">
                <tr style="background-color:blue;">
                    <th  style="width:370px;">LastName</th>
                    <th style="width:370px;">Email</th>
                    <th style="width:370px;">BirthDate</th>
                    <th style="width:370px;">Fax</th>
                </tr>
                
                <apex:repeat value="{!ContactDetails}" var="con">
                    <tr>
                        <td style="width:370px;">{!con.lastname}</td>
                        <td style="width:370px;">{!con.email}</td>
                        <td style="width:370px;">{!con.Birthdate}</td>
                        <td  style="width:370px;">{!con.fax}</td>
                    </tr>
                </apex:repeat>
                
            </table>
            
        </apex:pageBlock>
    </apex:form>
</apex:page>

====================    Controler   ========================

public class VF_Page_to_PDFControler2 
{
    public List<Contact> ContactDetails{get;set;}
    public Account accAddress{get;set;}
    Public String conformation{get;set;}
    public VF_Page_to_PDFControler2()
    {
        ContactDetails=new List<Contact>();
        accAddress=new Account();
        //id myid= ApexPages.currentPage().getParameters().get('id');
       // accAddress=[select name,BillingCity,BillingCountry,BillingPostalCode,BillingState from account where id=:myid limit 1];
         accAddress=[select name,BillingCity,BillingCountry,BillingPostalCode,BillingState from account  limit 1];
       List<Contact> conList=new List<contact>([select lastname,Birthdate,email,fax from contact where accountid=:myid ]);
        if(conList.size()>0)
        {
             ContactDetails=conList;
             conformation='';
        }
        else{
            conformation='No Any Contacts';
        }
    }
    
}


Please mark as best answer if it helps you.

Thank you.
Akshay