Highlighted

Ever try placing sideways (ie, transform:rotated) text?

Contributor ,
Nov 06, 2018

Copy link to clipboard

Copied

A design I'm working on requires a couple of words to be displayed sideways, along the margin. The text also needs to be oversized (8em).

I tried it with the following code :

div.text {

transform: rotate(-90deg);

position: absolute;

font-family: "Six Caps";

text-align: right;

font-size: 9em;

text-transform: uppercase;

z-index: 1;

top: 0; Left: 0;

}

However, I quickly realized that simply PLACING oversized text is a nightmare, because it'll explode out of the containing div in unpredictable ways (half the word will bust out of its container; and not in any particular direction, either -- all 4 of them).

So I had to compensate by changing this :

div.text {

transform: rotate(-90deg);

position: absolute;

font-family: "Six Caps";

text-align: right;

font-size: 9em;

text-transform: uppercase;

z-index: 1;

margin: 148px 0 0 -100px;

}

This pushes the overflow back into view on top, while eliminating a margin I couldn't find any explanation for on the left.

But ROTATING that div to boot? Forget about it. At least, I did.

I suppose I can use a PNG with the word sideways on transparent bg, since I'm only trying to place one or two words at a time... but I'm trying to see if there's an easy way to do it with HTML/CSS only first.

So in conclusion...

The goal : to place a word sideways in my layout so that it's always top-left justified in the container regardless of length.

The problem : oversized words keep busting out of their container in unpredictable ways; so while the container may be respecting your rules, the word being displayed isn't... making it seemingly impossible to create a catch-all class that will accomplish the goal.

Potential solution : If there was a way to force the container to wrap around the containing text regardless of how oversized it is, it would probably fix everything.

Thx

Adobe Community Professional
Correct answer by Jon Fritz II | Adobe Community Professional

Is there any real reason the word would need to be an actual HTML word?

Seems like it might be a bit simpler to use an image instead.

Views

306

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more

Ever try placing sideways (ie, transform:rotated) text?

Contributor ,
Nov 06, 2018

Copy link to clipboard

Copied

A design I'm working on requires a couple of words to be displayed sideways, along the margin. The text also needs to be oversized (8em).

I tried it with the following code :

div.text {

transform: rotate(-90deg);

position: absolute;

font-family: "Six Caps";

text-align: right;

font-size: 9em;

text-transform: uppercase;

z-index: 1;

top: 0; Left: 0;

}

However, I quickly realized that simply PLACING oversized text is a nightmare, because it'll explode out of the containing div in unpredictable ways (half the word will bust out of its container; and not in any particular direction, either -- all 4 of them).

So I had to compensate by changing this :

div.text {

transform: rotate(-90deg);

position: absolute;

font-family: "Six Caps";

text-align: right;

font-size: 9em;

text-transform: uppercase;

z-index: 1;

margin: 148px 0 0 -100px;

}

This pushes the overflow back into view on top, while eliminating a margin I couldn't find any explanation for on the left.

But ROTATING that div to boot? Forget about it. At least, I did.

I suppose I can use a PNG with the word sideways on transparent bg, since I'm only trying to place one or two words at a time... but I'm trying to see if there's an easy way to do it with HTML/CSS only first.

So in conclusion...

The goal : to place a word sideways in my layout so that it's always top-left justified in the container regardless of length.

The problem : oversized words keep busting out of their container in unpredictable ways; so while the container may be respecting your rules, the word being displayed isn't... making it seemingly impossible to create a catch-all class that will accomplish the goal.

Potential solution : If there was a way to force the container to wrap around the containing text regardless of how oversized it is, it would probably fix everything.

Thx

Adobe Community Professional
Correct answer by Jon Fritz II | Adobe Community Professional

Is there any real reason the word would need to be an actual HTML word?

Seems like it might be a bit simpler to use an image instead.

Views

307

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Nov 06, 2018 0
Adobe Community Professional ,
Nov 06, 2018

Copy link to clipboard

Copied

Is there any real reason the word would need to be an actual HTML word?

Seems like it might be a bit simpler to use an image instead.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Nov 06, 2018 1
LEGEND ,
Nov 06, 2018

Copy link to clipboard

Copied

I don't know about the OP, but for me it would be nice to know that a lousy piece of technology didn't just kick my butt. 

V/r,

^ _ ^

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Nov 06, 2018 1
Under_S_ LATEST
Contributor ,
Nov 07, 2018

Copy link to clipboard

Copied

WolfShade  wrote

I don't know about the OP, but for me it would be nice to know that a lousy piece of technology didn't just kick my butt. 

V/r,

^ _ ^

Until HTML/CSS can calculate exactly how many pixels of space any given font at any given size occupies, I'm afraid this is a battle I'd rather put of 'til the technology has caught up. Picking my battles is what allows me to actually finish anything.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Nov 07, 2018 1
Contributor ,
Nov 06, 2018

Copy link to clipboard

Copied

https://forums.adobe.com/people/Jon+Fritz+II  wrote

Is there any real reason the word would need to be an actual HTML word?

Seems like it might be a bit simpler to use an image instead.

None, besides the extra disk check.

If a forum legend like yourself is recommending the image solution, I'm not even going to sweat the HTML sideways text anymore. Since I took a several-year break from HTML, I just figured I was doing something wrong (that there was an easy way to make the div wrap around the text regardless of size, therefore making it child's play to place in a layout).

A transparent PNG it is, then. Thanks

EDIT: Oops, other people have replied since this; I will check those out in a sec.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Nov 06, 2018 0
Mentor ,
Nov 06, 2018

Copy link to clipboard

Copied

You've apparently done a little research. Extend that reach to look up transform-origin.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Nov 06, 2018 0
Contributor ,
Nov 06, 2018

Copy link to clipboard

Copied

ALsp  wrote

You've apparently done a little research. Extend that reach to look up transform-origin.

Just took a quick peek... this looks like it would allow me to rotate the text on another axis than just the center... which is great for animation control... but strictly for "PLACEMENT", I'm not seeing how this helps me create a container that wraps tightly around text (I could then just top-left justify the container, easy-peasy). It would need to know exactly how many pixels the text is occupying, and it doesn't seem like HTML/CSS works that way.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Nov 06, 2018 0
LEGEND ,
Nov 06, 2018

Copy link to clipboard

Copied

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Nov 06, 2018 1