Gire el texto -90 grados y alinee verticalmente con div

5 minutos de lectura

avatar de usuario
caída del terror

Estoy intentando alinear verticalmente el texto que se ha girado -90 grados y no tengo mucha suerte. Código a continuación

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

El resultado es me gusta. Este es un tema de WordPress, con Twitter Bootstrap implementado, así como un control deslizante de ancho completo. He confirmado que tanto Bootstrap como Slider no contienen CSS en conflicto.

  • ¿Cómo quieres que se alinee el texto? ¿Centro?

    – matewka

    02/01/2014 a las 10:00

  • si por favor seria genial

    – caída del terror

    2 de enero de 2014 a las 10:03

No estoy seguro de por qué tuviste bottom: 0%; left: 0%; en primer lugar, pero creo que eliminarlos da como resultado el objetivo deseado.

Aquí hay un ejemplo.

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

  • Me temo que no, el texto no se encuentra en el centro del div. Ver captura de pantalla aquí i.imgur.com/ufHBsIw.jpg

    – caída del terror

    2 de enero de 2014 a las 10:09


  • Tuve que cambiar ligeramente/significativamente tu HTML y CSS en ese, así que presta mucha atención.

    – Deryck

    2 de enero de 2014 a las 10:21

  • No ayuda, ya que está cambiando todo el diseño, el encabezado se encuentra en 1 columna a la izquierda y el contenido ocupa las otras 11 columnas. Su solución destruye cualquier capacidad de respuesta que se haya implementado a través de Bootstrap.

    – caída del terror

    2 de enero de 2014 a las 10:29

  • ¿Podría explicar exactamente cuál era el problema? No estoy muy seguro y solo logré la solución a través de prueba y error, por lo que agradecería una explicación.

    – Edward G Jones

    7 de enero de 2014 a las 11:28

ingrese la descripción de la imagen aquí

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

Explicación

Para lograr texto de -90 grados

writing-mode: vertical-lr escribe texto verticalmente pero es básicamente equivalente a rotar el texto 90 grados. Con transform: rotate(180deg) terminamos con el aspecto de -90 grados que queremos.

Para alinear verticalmente el texto girado

solía grid y grid-template-columns para poner el texto girado al lado del div. De esta forma, el div puede contener varias líneas u otras cosas. Usar text-align para alinear el texto girado como quieras. en este caso es center.

Nota: Es posible que no necesite: grid-auto-rows: minmax(min-content, max-content). Si la altura del texto rotado hace cosas extrañas, esto puede usarse para forzar el ajuste del texto rotado para que se ajuste a su contenido.

Hay una propiedad CSS que rota el texto y orienta los bloques que lo contienen: writing-mode

Aquí hay un Ejemplo de violín JS.

avatar de usuario
Edward G Jones

Logré lograr el mismo efecto que Deruck pero sin cambiar la estructura del 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;
}

Al final, tuve que renunciar al frente de CSS y generar los títulos como PNG transparentes usando GD. No es ideal, pero me da mucha más flexibilidad en términos de posicionamiento. Si alguien está interesado en el script de rotación que estoy usando, está debajo

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");

Modificado del increíble guión de Jason Lau, que se puede encontrar aquí.

¿Ha sido útil esta solución?