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
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.
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.
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,
^ _ ^
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.
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.
Copy link to clipboard
Copied
You've apparently done a little research. Extend that reach to look up transform-origin.
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.
Copy link to clipboard
Copied
Have you tried using css writing-mode?
https://developer.mozilla.org/en-US/docs/Web/CSS/writing-mode