I have an HTML box on one of my reports that displays as follows:

I am trying to figure out how to rotate the text 270 degrees so that it is vertical.  Below is the code that I have used.

<div align='center'><div class="appsText" style="padding:0px 0px 10px 0px;font-size:20px;color:#FFFFFF;background:#4f5b66"><b>Expense</b></br>

Any help is greatly appreciated.

I have probably misunderstood your question... but could you try this:

<div align='center'><div class="appsText" style="padding:0px 0px 10px 0px;font-size:20px;color:#FFFFFF;background:#4f5b66"><b>E<BR>x<BR>p<BR>e<BR>n<BR>s<BR>e</b></br>

Frode Staveland Nilsen thank you for responding.  That's close, but I was hoping to be able to display the HTML like the excel mock-up below:

Hi Doug,

try adding this into the style attribute of the div tag

transform:rotate(270);

Regards

Chris

@Christopher Wilson is on the right track. The correct syntax is transform:rotate(270deg);

Saw from the following website: CSS transform property 

<style>

div.a {
  transform: rotate(270deg);
}

</style>

I'm getting close.  I just can't get the padding right.

Code as of now:

<div align='center'><div class="appsText" style="padding:20px 60px 90px 40px;font-size:20px;transform:rotate(270deg);color:#000000;background:#C7C7C7">Expense</br>

Hi Doug,

Where is the closing </div> tag? You have the </ br> tag before any closing div tag. This means the </br> tag is being rotated too which might be what is causing your padding issues. Try moving the closing div tag </div> to appear before the </br> tag.

Regards,

Chris

Sent from my iPhone

Another option is the writing-mode option in your CSS.  Try adding 'writing-mode: vertical-lr;' to your style tag.

I had a similar problem to the original question but with a longer string of text. I found the text wrapped to the width of the box rather than the height using the rotate function but this more or less worked perfectly.  It wouldn't distinguish between lr or rl but I resolved by linking both solutions:

My code is:

<div style="writing-mode: vertical-lr; transform: rotate(180deg); font-size:17pt; padding:2.5px; padding-left:30px; padding-right:30px"><u>Click Here for xxxxxxx xxxxxxx xxxxxxx</u>

You could try something like below. You may need to play with the positioning a bit but this appeared to be working for me.

<div ><div class="appsText" style="transform: rotate(-90deg); vertical-align=bottom; padding:0px 0px 10px 0px;font-size:20px;color:#FFFFFF;background:#4f5b66; position: absolute; top: 50%; left: 50%"><b>Expense</b></br></div></div>

Cheers Mark