CSS Transform offset varies with text length
- by Mr. Polywhirl
I have set up a demo that has 5 floating <div>s with rotated text of varying length. I am wondering if there is a way to have a CSS class that can handle centering of all text regardless of length. At the moment I have to create a class for each length of characters in my stylesheet. This could get too messy. I have also noticed that the offsets get screwd up is I increase or decrease the size of the wrapping <div>.
I will be adding these classes to divs through jQuery, but I still have to set up each class for cross-browser compatibility.
.transform3 {
-webkit-transform-origin: 65% 100%;
-moz-transform-origin: 65% 100%;
-ms-transform-origin: 65% 100%;
-o-transform-origin: 65% 100%;
transform-origin: 65% 100%;
}
.transform4 {
-webkit-transform-origin: 70% 110%;
-moz-transform-origin: 70% 110%;
-ms-transform-origin: 70% 110%;
-o-transform-origin: 70% 110%;
transform-origin: 70% 110%;
}
.transform5 {
-webkit-transform-origin: 80% 120%;
-moz-transform-origin: 80% 120%;
-ms-transform-origin: 80% 120%;
-o-transform-origin: 80% 120%;
transform-origin: 80% 120%;
}
.transform6 {
-webkit-transform-origin: 85% 136%;
-moz-transform-origin: 85% 136%;
-ms-transform-origin: 85% 136%;
-o-transform-origin: 85% 136%;
transform-origin: 85% 136%;
}
.transform7 {
-webkit-transform-origin: 90% 150%;
-moz-transform-origin: 90% 150%;
-ms-transform-origin: 90% 150%;
-o-transform-origin: 90% 150%;
transform-origin: 90% 150%;
}
Note: The offset values I set were eye-balled.
Update
Although I would like this handled with a stylesheet, I believe that I will have to calculate the transformations of the CSS in JavaScript.
I have created the following demo to demonstrate dynamic transformations. In this demo, the user can adjust the font-size of the .v_text class and as long as the length of the text does not exceed the .v_text_wrapper height, the text should be vertically aligned in the center, but be aware that I have to adjust the magicOffset value.
Well, I just noticed that this does not work in iOS...
