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

[Under S.]

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

[Jon Fritz · Accepted solution]

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.

[WolfShade]

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,

^ _ ^

[Under S.]

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.

[Under S.]

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.

[ALsp]

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

[Under S.]

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.

[pziecina]

Have you tried using css writing-mode?

https://developer.mozilla.org/en-US/docs/Web/CSS/writing-mode