Rotar los textos usando CSS

1. Use la propiedad transform de CSS para rotar texto
2. Utilice la propiedad escritura-modo de CSS para rotar textos

En este artículo, usaremos CSS para rotar los textos HTML. Muchos idiomas, como el chino, el japonés o el coreano, usan el texto girado con frecuencia.

Además, al diseñar páginas web, es posible que los desarrolladores necesiten rotar el texto algunos grados para que la interfaz de usuario sea más atractiva. Aquí, hemos utilizado dos métodos diferentes para rotar los textos.

Use la propiedad transform de CSS para rotar texto

En el siguiente ejemplo, hemos creado el elemento div y le hemos dado el nombre de clase element-text para su identificación. Dentro del elemento div, hemos creado el elemento <span> y hemos agregado el texto dentro de él.

Código de ejemplo:

<div class="example-text">
    <span>Rotated texts.</span>
</div>

Ahora, para rotar todos los textos del elemento <div>, hemos accedido al div usando su nombre de clase en CSS.

A continuación, aplicamos la propiedad de CSS transformar: rotar (-90 grados) al elemento div para rotar todo el contenido. Sin embargo, hemos usado -webkit-transform: rotate(-90deg); para rotar texto en el navegador Chrome, -moz-transform: rotar (-90 grados); para rotar texto en el navegador Firefox, y lo mismo que -o-transform: rotar (-90 grados); para Ópera.

Además, hemos aplicado CSS adicional para establecer la posición del elemento div en la parte superior. Aquí, Posición: absoluta significa que la posición del elemento div cambiará en relación con su padre, que es el cuerpo del documento en sí.

.example-text {
    -webkit-transform: rotate(-80deg);
    -moz-transform: rotate(-80deg);
    -o-transform: rotate(-80deg);
    position: absolute;
    top: 40px;
}

En el siguiente resultado, los usuarios pueden ver que el texto se gira 90 grados en el sentido contrario a las agujas del reloj.

Si pasamos el valor de grado positivo como argumento del método rotar(), gira el contenido o los textos en el sentido de las agujas del reloj que los usuarios pueden aprender a través del ejemplo a continuación.

.example-text {
    -webkit-transform: rotate(80deg);
    -moz-transform: rotate(80deg);
    -o-transform: rotate(80deg);
    position: absolute;
    top: 40px;
}

<div class="example-text">
    <span>Rotated texts.</span>
</div>

Utilice la propiedad escritura-modo de CSS para rotar textos

La propiedad CSS writing-mode nos ayuda a cambiar la orientación del texto. Al usarlo, podemos rotar el texto 90 o -90 grados.

Podemos usar verticle-rl como un valor de la propiedad write-mode para rotar el texto de manera que el usuario pueda leer el texto de derecha a izquierda y de arriba a abajo.

En el siguiente ejemplo, hemos creado la etiqueta HTML <p>, que contiene texto que hemos rotado usando la propiedad CSS writing-mode: vertical-rl.

Código de ejemplo:

<p class="text">These text rotated by writing-mode: vertical-rl; CSS property. Read it from top to bottom and left to right.</p>

.text{
    writing-mode: vertical-rl;
    height: 200px;
}

Si usamos verticle-lr como un valor de la propiedad write-mode, gira el texto de modo que el texto se puede leer de izquierda a derecha y de arriba a abajo.

.text{
    writing-mode: vertical-lr;
    height: 200px;
}

<p class="text">These text rotated by writing-mode: vertical-rl; CSS property. Read it from top to bottom and left to right.</p>

El resultado anterior permite a los usuarios leer el texto de izquierda a derecha y de arriba a abajo.

Hemos aprendido diferentes métodos para rotar el texto. El primer método permite a los programadores rotar el texto en cualquier número de grados.

Con el segundo método, los programadores pueden rotar el texto 90 grados y hacerlo legible de izquierda a derecha o de derecha a izquierda. Por lo tanto, se recomienda utilizar el primer método.