5 comments

1. 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;
   }
   

   Log in to Reply

2. 

   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.

   Log in to Reply

3. There is a CSS property that rotates text and orients the containing blocks: writing-mode

   Here is a JS Fiddle example.

   Log in to Reply

4. I’ve managed to achieve the same effect as Deruck but without changing the structure of the html.

   JSFiddle

   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;
   }
   

   Log in to Reply

5. 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.

   Log in to Reply