Ever try placing sideways (ie, transform:rotated) text?
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
AdChoices