How to create a template with text center and rotate text

0
Hello,  I am trying to create a document template that will have User Name and this should be in center and rotate the name on 45/90 degree.  I have tried the below code to rotate but its not working -ms-transform: rotate(90deg); -webkit-transform: rotate(90deg); transform: rotate(90deg);   is there any best way to move text in center and rotate it by 45 degree.    here is my template.   
asked
4 answers
3

You can create a class, or add the styles inline the elements, with the following:

.class-name {
  text-align: center;
  -ms-transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -o-transform: rotate(45deg);
}

This will work across different browsers. They will essentially ignore the ones they don’t support and use only the one it does. Check it out here on JSFiddle.

answered
0

What browser are you testing this in?

If you are using Internet Explorer it does not use degrees but numbers

/* Safari */ -webkit-transform: rotate(-90deg);

/* Firefox */ -moz-transform: rotate(-90deg);

/* IE */ -ms-transform: rotate(-90deg);

/* Opera */ -o-transform: rotate(-90deg);

/* Internet Explorer */ filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3); 0, 1, 2, or 3 = 0, 90, 180 or 270

answered
0

Unfortunately, I don’t think it’s possible out of the box with a Document Template. While custom styles can be applied, it’s much more limited than what’s possible from a webbrowser. A “reference-orientation” is mentioned if you search for possibilities to rotate text in FOP documents (the library being used by the document template), but I haven’t been succesful in applying it.  

answered
0

Hi all,

Reading these responses I managed to get the idea of the .css code needed.
However the implementation did not work for me.

What it did work is to follow the steps:
1. create a container
2. insert the text box in the container
3. in the "Edit container">Appearance>common>Style I added the following css code:

transform-origin: 0 0;
transform: rotate(90deg);


And it worked for me, hope it helps.

answered