How to create a template with text center and rotate text

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.   
3 answers

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.


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


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.