¿Cómo puedo dibujar texto vertical con CSS cross-browser?


243

Quiero rotar una sola palabra de texto en 90 grados, con compatibilidad entre navegadores (> = IE6,> = Firefox 2, cualquier versión de Chrome, Safari u Opera). ¿Cómo se puede hacer esto?


44
No hay CSS puro que pueda usar con compatibilidad cruzada. Lo que tengo es todo lo que hay. Estás mejor con una imagen.
Robert K

1
El crossbrowser de texto vertical no es tan difícil. En dns4.nl hay una solución que funciona incluso en la ópera. Lo probé con todas las versiones, es decir, mozilla y safari (también corona). el enlace es: dns4.nl/pagina/html_code/vertikale_tekst.html . comentario para xkcd150 :> El problema es que depende del elemento del lienzo. - xkcd150 20 de septiembre a las 10:13 No, el procedimiento no se basa en el elemento del lienzo.

Aquí hay un tutorial que explica cómo hacer todo tipo de transformaciones de texto incluso en IE (incluida la solución a su problema) :) useragentman.com/blog/2010/03/09/… ¡ Espero que ayude!
Juanma Guerrero

Aquí hay un desglose de la técnica que utilicé: scottgale.com/blog/css-vertical-text/2010/03/01

Podría rotar con éxito siguiendo las instrucciones que figuran en esta página, pero no pude imprimir la página. El texto se imprime al revés. Este sitio web fue muy útil para mí: sevenwires.com/play/UpsideDownLetters.html
Nahuel

Respuestas:


213

Se actualizó esta respuesta con información reciente (de CSS Tricks ). Felicitaciones a Matt y Douglas por señalar la implementación del filtro.

.rotate {
  -webkit-transform: rotate(-90deg);
  -moz-transform: rotate(-90deg);
  -ms-transform: rotate(-90deg);
  -o-transform: rotate(-90deg);
  transform: rotate(-90deg);

  /* also accepts left, right, top, bottom coordinates; not required, but a good idea for styling */
  -webkit-transform-origin: 50% 50%;
  -moz-transform-origin: 50% 50%;
  -ms-transform-origin: 50% 50%;
  -o-transform-origin: 50% 50%;
  transform-origin: 50% 50%;

  /* Should be unset in IE9+ I think. */
  filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
}

Vieja respuesta:

Para FF 3.5 o Safari / Webkit 3.1, consulte: -moz-transform (y -webkit-transform). IE tiene un filtro Matrix (v5.5 +), pero no estoy seguro de cómo usarlo. Opera aún no tiene capacidades de transformación.

.rot-neg-90 {
  /* rotate -90 deg, not sure if a negative number is supported so I used 270 */
  -moz-transform: rotate(270deg);
  -moz-transform-origin: 50% 50%;
  -webkit-transform: rotate(270deg);
  -webkit-transform-origin: 50% 50%;
  /* IE support too convoluted for the time I've got on my hands... */
}

+1 para el ícono del oso fantasma;) Tuve muchos problemas para hacer que esto funcionara, terminé teniendo que cambiar mi estructura DOM y evitar un margen negativo. Una versión de IE que es más simple de usar pero que no se ve bien cuando se imprime la página: modo de escritura: tb-rl; filtro: flipv fliph;
RMorrisey

12
Microsoft "filtro: progid: DXImageTransform.Microsoft.BasicImage (rotación = 3);"
Matt

1
Por desgracia, IE9 (en el modo de estándares!) Se aplica tanto a estilos * los -ms-Transformar-, y el filtro. En la vista de compatibilidad, solo aplica el filtro.
Romløk

3
Asegúrese de que su texto es un elemento de bloque es decir, el uso de visualización: inline-block o similares
James Westgate

2
Aquí hay algunos filtros para la bondad de IE8 e IE9. El primero es IE8, el segundo es el modo estándar IE8 y el # 3 elimina el filtro para IE9 +. Arrrgh, no puedo obtener comentarios de stackoverflow para dejar de filtrar mis hacks CSS, así que mira jsfiddle.net/GrPyj/9
Justin Grant

73

Estoy usando el siguiente código para escribir texto vertical en una página. Firefox 3.5+, webkit, opera 10.5+ e IE

.rot-neg-90 {
    -moz-transform:rotate(-270deg); 
    -moz-transform-origin: bottom left;
    -webkit-transform: rotate(-270deg);
    -webkit-transform-origin: bottom left;
    -o-transform: rotate(-270deg);
    -o-transform-origin:  bottom left;
    filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1);
}

Funciona en Chrome 5. No funciona en el modo "peculiaridades" de IE 8; hace trabajo en "modo estándar de IE8".
Asaf Bartov

Gracias por hacérmelo saber. Publíquelo aquí, si encuentra una manera de tener Texto vertical en IE en modo peculiaridades.
Choesang

15

Otra solución es usar un nodo de texto SVG que sea compatible con la mayoría de los navegadores .

<svg width="50" height="300">
    <text x="28" y="150" transform="rotate(-90, 28, 150)" style="text-anchor:middle; font-size:14px">This text is vertical</text>
</svg>

Demostración: https://jsfiddle.net/bkymb5kr/

Más sobre el texto SVG: http://tutorials.jenkov.com/svg/text-element.html


gran solución, mucho mejor que las anteriores - no hay problemas con el posicionamiento del texto después de rotar
Picard

9

El módulo de modos de escritura CSS introduce flujos ortogonales con texto vertical.

Simplemente use la writing-modepropiedad con el valor deseado.

span { margin: 20px; }
#vertical-lr { writing-mode: vertical-lr; }
#vertical-rl { writing-mode: vertical-rl; }
#sideways-lr { writing-mode: sideways-lr; }
#sideways-rl { writing-mode: sideways-rl; }
<span id="vertical-lr">
  ↑ (1) vertical-lr 至<br />
  ↑ (2) vertical-lr 至<br />
  ↑ (3) vertical-lr 至
</span>
<span id="vertical-rl">
  ↓ (1) vertical-rl 至<br />
  ↓ (2) vertical-rl 至<br />
  ↓ (3) vertical-rl 至
</span>
<span id="sideways-lr">
  ↓ (1) sideways-lr 至<br />
  ↓ (2) sideways-lr 至<br />
  ↓ (3) sideways-lr 至
</span>
<span id="sideways-rl">
  ↓ (1) sideways-rl 至<br />
  ↓ (2) sideways-rl 至<br />
  ↓ (3) sideways-rl 至
</span>


2
sideways-rl a partir de ahora no es ampliamente compatible, recomendaría vertical-rl y rotar a 180 grados
godblessstrawberry

6

Adapte esto de http://snook.ca/archives/html_and_css/css-text-rotation :

<style>
    Girar-90
    {
        bloqueo de pantalla;
        posición: absoluta;
        derecha: -5px;
        arriba: 15px;
        -webkit-transform: rotar (-90deg);
        -moz-transform: rotar (-90deg);
    }
</style>
<! - [si IE]>
    <style>
        .Rotate-90 {
            filtro: progid: DXImageTransform.Microsoft.BasicImage (rotación = 3);
            derecha: -15px; arriba: 5px;
        }
    </style>
    <! [endif] ->

5

He tenido problemas para intentar hacerlo en CSS puro, dependiendo de la fuente puede parecer un poco basura. Como alternativa, puede usar SVG / VML para hacerlo. Hay bibliotecas que ayudan a cruzar el navegador con facilidad, por ejemplo, Raphael y ExtJS . En ExtJS4 el código se ve así:

    var drawComp = Ext.create('Ext.draw.Component', {
        renderTo: Ext.getBody(), //or whatever..
        height: 100, width: 100 //ditto..
    });
    var text = Ext.create('Ext.draw.Component', {
        type: "text",
        text: "The text to draw",
        rotate: {
            x: 0, y: 0, degrees: 270
        },
        x: -50, y: 10 //or whatever to fit (you could calculate these)..
    });
    text.show(true);

Esto funcionará en IE6 + y en todos los navegadores modernos, sin embargo, desafortunadamente creo que necesita al menos FF3.0.


1
Amar a la diferenciación entre IE6 + y todos los navegadores modernos - se lee como si estuviera diciendo cualquier versión de IE no es moderno :)
ClarkeyBoy

1
@ClarkeyBoy Yo diría que solo IE10 está casi al día con otros navegadores, y solo porque el procesamiento forzado de la CPU y el diseño de la cuadrícula. Realmente no se puede llamar IE un navegador moderno, porque se actualiza x3-x10 veces más lento que cualquier otro navegador.
skmasq

La mejor opción es usar un archivo SVG o este JS, ya que es posible que el uso de la propiedad de transformación CSS no sea compatible con sus páginas diseñadas de manera receptiva.
b01

5

Si usa Bootstrap 3, puede usar uno de sus mixins:

.rotate(degrees);

Ejemplo:

.rotate(-90deg);

1
Todavía funciona, pero tenga en
yishaiz

4

Mi solución que funcionaría en Chrome, Firefox, IE9, IE10 (cambie los grados según sus requisitos):

.rotate-text {
  -webkit-transform: rotate(270deg);
  -moz-transform: rotate(270deg);
  -ms-transform: rotate(270deg);
  -o-transform: rotate(270deg);
  transform: rotate(270deg);
  filter: none; /*Mandatory for IE9 to show the vertical text correctly*/      
}

Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.