Rotate text -90deg and vertically align with div
Solution 1
In the end, I've had to give up on the CSS front and generate the titles as transparent PNGs using GD. Not ideal, but gives me a lot more flexibility in terms of positioning. If anyone is interested in the rotation script I'm using, it's below
define("DEFAULT_FONT", "fonts/BebasNeue-webfont.ttf");
define("DEFAULT_COLOR", "ed217c");
define("DEFAULT_SIZE", 24);
define("DEFAULT_ANGLE", 0);
define("DEFAULT_PADDING", 10);
define("DEFAULT_SPACING", 0);
$text = $_GET['text'];
if(isset($_GET['transform'])):
switch ($_GET['transform']){
case 'uc':
$text = strtoupper($_GET['text']);
break;
case 'lc':
$text = strtolower($_GET['text']);
break;
case 'ucf':
$text = ucfirst($_GET['text']);
break;
case 'ucw':
$text = ucwords($_GET['text']);
break;
}
endif;
$font = $_GET['font'] ? $_GET['font'] : DEFAULT_FONT;
$color = (strlen($_GET['color']) == 6 && ctype_alnum($_GET['color'])) ? "0x" . $_GET['color'] : "0x" . DEFAULT_COLOR;
$size = (is_numeric($_GET['size'])) ? $_GET['size'] : DEFAULT_SIZE;
$angle = (is_numeric($_GET['angle'])) ? $_GET['angle'] : DEFAULT_ANGLE;
$padding = (is_numeric($_GET['padding'])) ? $_GET['padding']*4 : DEFAULT_PADDING*4;
$spacing = (is_numeric($_GET['spacing'])) ? $_GET['spacing'] : DEFAULT_SPACING;
$text_dimensions = calculateTextDimensions($text, $font, $size, $angle, $spacing);
$image_width = $text_dimensions["width"] + $padding;
$image_height = $text_dimensions["height"] + $padding;
$new_image = imagecreatetruecolor($image_width, $image_height);
ImageFill($new_image, 0, 0, IMG_COLOR_TRANSPARENT);
imagesavealpha($new_image, true);
imagealphablending($new_image, false);
imagettftextSp($new_image, $size, $angle, $text_dimensions["left"] + ($image_width / 2) - ($text_dimensions["width"] / 2), $text_dimensions["top"] + ($image_height / 2) - ($text_dimensions["height"] / 2), $color, $font, $text, $spacing);
imagepng($new_image);
imagerotate($new_image, 90, 0);
imagedestroy($new_image);
function imagettftextSp($image, $size, $angle, $x, $y, $color, $font, $text, $spacing = 0)
{
if ($spacing == 0)
{
imagettftext($image, $size, $angle, $x, $y, $color, $font, $text);
}
else
{
$temp_x = $x;
for ($i = 0; $i < strlen($text); $i++)
{
$bbox = imagettftext($image, $size, $angle, $temp_x, $y, $color, $font, $text[$i]);
$temp_x += $spacing + ($bbox[2] - $bbox[0]);
}
}
}
function calculateTextDimensions($text, $font, $size, $angle, $spacing) {
$rect = imagettfbbox($size, $angle, $font, $text);
$minX = min(array($rect[0],$rect[2],$rect[4],$rect[6]));
$maxX = max(array($rect[0],$rect[2],$rect[4],$rect[6]));
$minY = min(array($rect[1],$rect[3],$rect[5],$rect[7]));
$maxY = max(array($rect[1],$rect[3],$rect[5],$rect[7]));
$spacing = ($spacing*(strlen($text)+2));
return array(
"left" => abs($minX) - 1,
"top" => abs($minY) - 1,
"width" => ($maxX - $minX)+$spacing,
"height" => $maxY - $minY,
"box" => $rect
);
}
header("content-type: image/png");
Modified from Jason Lau's awesome script, which can be found here.
Solution 2
Not sure why you had bottom: 0%; left: 0%;
in the first place, but removing them results in your desired goal I believe.
Here's an example.
CSS:
.page_block {
margin:0px;
padding:10px;
}
#header {
position: relative;
}
.verticaltext {
transform: rotate(-90deg);
transform-origin: right, top;
-ms-transform: rotate(-90deg);
-ms-transform-origin:right, top;
-webkit-transform: rotate(-90deg);
-webkit-transform-origin:right, top;
position: absolute;
color: #ed217c;
}
Solution 3
HTML
<div class="container">
<div class="vertical">Vertical Text Here</div>
<div>
<div>Horizontal Text Here</div>
...
<div>Horizontal Text Here</div>
</div>
</div>
CSS
.container{
display: grid;
grid-auto-rows: minmax(min-content, max-content);
grid-template-columns: auto 1fr;
}
.vertical{
transform: rotate(180deg);
writing-mode: vertical-lr;
text-align: center;
}
Explanation
To achieve -90 deg text
writing-mode: vertical-lr
writes text vertically but is basically equivalent to rotating the text 90 degrees. With transform: rotate(180deg)
we end up with the -90 degrees look we want.
To vertically align rotated text
I used grid
and grid-template-columns
to put the rotated text beside the div. This way the div can hold multiple lines or other things. Use text-align
to align the rotated text however you want. In this case it's center
.
note: You may not need: grid-auto-rows: minmax(min-content, max-content)
. If the rotated text's height does weird things, this can used to force wrap the rotated text to fit its content.
Solution 4
I've managed to achieve the same effect as Deruck but without changing the structure of the html.
body{
margin:0;
}
p{
margin: 0;
}
.page_block {
margin:0px;
}
.row{
position: relative;
}
.col-md-11{
margin-left:50px;
}
.verticaltext {
transform: rotate(-90deg);
-ms-transform: rotate(-90deg);
-webkit-transform: rotate(-90deg);
bottom: 45%;
position: absolute;
color: #ed217c;
}
Solution 5
There is a CSS property that rotates text and orients the containing blocks: writing-mode
Here is a JS Fiddle example.
terrorfall
Marketing Operations Manager for The Walt Disney Company
Updated on March 24, 2021Comments
-
terrorfall about 3 years
I'm attempting to vertically align text that has been rotated by -90deg and not having much luck. Code below
HTML:
<section class="page_block" style="background: <?php echo $background; ?>;"> <div class="row"> <div class="col-md-1"> <div id="header"> <h1 class="verticaltext"> <?php echo $page->post_title; ?> </h1> </div> </div> <div class="col-md-11"> <p><?php echo $page->post_content; ?></p> </div> </div> </section>
CSS:
.page_block { margin:0px; padding:10px; } #header { position: relative; } .verticaltext { transform: rotate(-90deg); transform-origin: right, top; -ms-transform: rotate(-90deg); -ms-transform-origin:right, top; -webkit-transform: rotate(-90deg); -webkit-transform-origin:right, top; position: absolute; bottom: 0%; left: 0%; color: #ed217c; }
The result is like. This is a Wordpress theme, with Twitter Bootstrap implemented as well as a full width slider. I have confirmed that both Bootstrap and the Slider do not contain conflicting CSS.