Rotated text in topics and posts

For support and discussion related to templates, themes, and imagesets in phpBB 3.1.
Anti-Spam Guide
Locked
User avatar
stevemaury
Support Team Member
Support Team Member
Posts: 52768
Joined: Thu Nov 02, 2006 12:21 am
Location: The U.P.
Name: Steve
Contact:

Rotated text in topics and posts

Post by stevemaury »

In Prosilver, I want all user-input text in posts, including the first post, to be rotated -90 degrees. I have this CSS, and it does rotate the text, but the text appears outside the message box:

Code: Select all

/* 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);
Where in content.css does this need to go and how can I keep the text inside the message box?
I can stop all your spam. I can upgrade or update your Board. PM or email me. (Paid support)
User avatar
Arty
Former Team Member
Posts: 16654
Joined: Wed Mar 06, 2002 2:36 pm
Name: Vjacheslav Trushkin
Contact:

Re: Rotated text in topics and posts

Post by Arty »

First your code is outdated. All browsers support unprefixed version of transform, so you need to add unprefixed version. Then remove -moz- and -o- versions because they stopped existing few years ago.

Problem with transform is it doesn't change bounding box. So if content is 100x20 pixels, container dimensions remains 100x20 after transform instead of changing to 20x100, thus content is rendered outside of box.

Because of that issue you must have fixed width and height of item to rotate it and you need a second container. Something like this

Code: Select all

<div class="transform-container"><div class="transform-content">Text to transform</div></div>
If content is 100x20 pixels, after transformation width and height are flipped, so it requires 20x100 space. Therefore container must be 20x100, content must be 100x20:

Code: Select all

.transform-container { width: 20px; height: 100px; }
.transform-content { width: 100px; height: 20px; }
Then you need to position content above container and rotate it:

Code: Select all

.transform-container { position: relative; }
.transform-content { position: absolute; left: 0; top: 100px; transform: rotate(-90deg); transform-origin: left top; }
Transformation is done relatively to top left corner, therefore after transformation text is displayed above container. To fix that top value must be equal to container height.

Full code:

Code: Select all

.transform-container { position: relative; width: 20px; height: 100px; }
.transform-content { width: 100px; height: 20px; position: absolute; left: 0; top: 100px; 
    -ms-transform: rotate(-90deg); -ms-transform-origin: left top; 
    -webkit-transform: rotate(-90deg); -webkit-transform-origin: left top; 
    transform: rotate(-90deg); transform-origin: left top; 
}
Note that I removed filter for IE9 in that code because it behaves differently.

User input is dynamic, therefore it changes width/height, so it probably won't work. Unfortunately there aren't any other ways to rotate text via css.
Vjacheslav Trushkin / Arty.
Free phpBB 3.1 styles | New project: Iconify - modern SVG framework
User avatar
stevemaury
Support Team Member
Support Team Member
Posts: 52768
Joined: Thu Nov 02, 2006 12:21 am
Location: The U.P.
Name: Steve
Contact:

Re: Rotated text in topics and posts

Post by stevemaury »

Thanks, Arty.
I can stop all your spam. I can upgrade or update your Board. PM or email me. (Paid support)
Locked

Return to “[3.1.x] Styles Support & Discussion”