How can I rotate both text and its container?

Question

I'm currently on a project, where I would like to rotate text in a container where the edges of the text should align to the edges of the container.

If I rotate it normally it would result in the following: http://jsfiddle.net/lumio/a3Z4C/
As you can see, the text flows out of the container, but I want to have it within it.
So not the complete text should be rotated, but the lines, which should then be aligned to the container.

Does anyone know a solution with CSS or JS?

Best wishes

Is it not enough to just put some padding on the container? http://jsfiddle.net/a3Z4C/4/ Or do you mean you would like the line returns to happen based on the edge of the box? — James Montagne, Feb 28 '12 at 15:38
Why not just put the transform on the container? http://jsfiddle.net/XWHsC/ — j08691, Feb 28 '12 at 15:50
@JamesMontagne: yes... the lines should based on the edge of the box :) — lumio, Feb 28 '12 at 16:05

score 1 · Answer 1 · answered Feb 28 '12 at 15:42

1

Are you dynamically calculating the rotation? If so, you might want to dynamically add some padding to the container. Not sure what the exact algorithm will be, but it'll be something like P = (D * N)

P = padding, D = degrees, N = the magic number to make it all work :)

answered Feb 28 '12 at 15:42

Matt

1,897
4
28
49

you're funny :D but N would be the number of lines, but I don't know how to calculate that number with JS :D Anyway... maybe there is something "better" – lumio Feb 28 '12 at 15:45
@Lumio: Number of lines = (Pixel height of container / Pixel height of the font you're using). I realize we're getting into a fair amount of hard-coded values, but I guess it's a proof of concept. – Matt Feb 28 '12 at 15:51
yes... I also thought of lines... so N = line-height - or should N be eqal to 42? :D Anyway... the problem would be another... the complete text would be rotated, but not the lines – lumio Feb 28 '12 at 16:04

score 0 · Answer 2 · answered Mar 11 '14 at 08:18

0

Okay there is one option for this. You can put the container inside of the other container. So no matter what you put inside of that container t will always keep inside of the parent

/jsfiddle.net/smitdesai/dsvUS/

answered Mar 11 '14 at 08:18

user3405120

1

score 0 · Answer 3 · answered Feb 28 '12 at 15:42

0

If you add in some padding to the container div the text flows nicely inside the box. I added at least 10px to your jsFiddle example and the text sits right inside the container. Howerver, it might look better to add a bit more padding like the following:

.container {
    width: 300px;
    background: silver;
    margin: 20px;
    padding: 10px;
}

answered Feb 28 '12 at 15:42

ItsMIllerTime65

95
1
11

Thanks for your reply, but what if you have another 3 paragraphs? ;) that solution won't work – lumio Feb 28 '12 at 15:46

How can I rotate both text and its container?

3 Answers3