Header Ads Widget

Ticker

6/recent/ticker-posts

¿Por qué la orientación vertical del texto es una pesadilla para la compatibilidad entre navegadores?

 La necesidad de una orientación vertical del texto puede no parecer evidente al principio y su uso más bien limitado únicamente como un aspecto de diseño para páginas web. Sin embargo, muchos idiomas asiáticos como el mandarín o el japonés pueden escribirse verticalmente, fluyendo de derecha a izquierda o en el caso del mongol de izquierda a derecha. En dichos lenguajes, aunque la dirección del flujo de bloques es lateral, de izquierda a derecha o de derecha a izquierda, las letras o los caracteres de una línea fluyen verticalmente de arriba a abajo. Otro uso común de la orientación vertical del texto puede ser en los encabezados de las tablas. Aquí es donde la propiedad de orientación del texto se vuelve indispensable.

Orientación de texto CSS

El método en el que nos centraremos en este blog es mediante el uso de la orientación de texto CSS. 'texto-orientación' es una propiedad CSS que define la orientación de los caracteres dentro de una línea. Recuerde que la orientación del texto debe usarse junto con la propiedad del modo de escritura. Solo se puede usar cuando el modo de escritura está configurado en vertical (ya sea vertical-rl o vertical-lr). No funcionará si el modo de escritura está configurado en horizontal (horizontal-tb).

Sintaxis:

orientación del texto: mixto | en posición vertical | oblicuo;

De forma predeterminada, la orientación del texto está configurada para mezclarse.

  • Mixto: los guiones horizontales se rotarán 90 grados en el sentido de las agujas del reloj mientras que los guiones verticales no se verán afectados.
  • Vertical: todos los caracteres permanecerán en orientación vertical incluso si el flujo de bloques es vertical
  • De lado: todo el texto (guiones horizontales y verticales) se rotará hacia los lados, 90 grados en el sentido de las agujas del reloj.

Soporte del navegador

Dirígete a caniuse y busca 'Orientación de texto CSS' para obtener una visión en profundidad de qué navegadores y la versión específica del navegador admiten esta función.

Compatibilidad entre navegadores de la propiedad de orientación de texto CSS - caniuse

Compatibilidad entre navegadores

Recuerde que la orientación de texto en CSS3 es una característica relativamente nueva y podría sufrir cambios de sintaxis y alteraciones en el futuro. Aunque es compatible con los principales navegadores como Chrome, Firefox, Opera y Safari, las principales excepciones son Microsoft Edge e Internet Explorer. Es prudente utilizar algún tipo de respaldo para estos navegadores no compatibles, lo que facilitará aún más nuestro esfuerzo para realizar pruebas en varios navegadores .

También puede ver la orientación del texto CSS en acción mientras se dirige a realizar pruebas en varios navegadores para reconocer la compatibilidad del navegador con la orientación vertical del texto en los experimentos LambdaTest . No solo muestra un ejemplo en vivo de esta función con código, sino también la lista de todos los principales navegadores que admiten y no admiten la función en particular, sino que también puede detectar el navegador y el sistema operativo actuales del usuario.

Compatibilidad entre navegadores

Antes de usar la orientación de texto, primero debemos examinar la propiedad del modo de escritura y comprender los conceptos de flujo de bloques y dirección de flujo en línea.

Modo de escritura

La propiedad 'modo de escritura' especifica si las líneas se establecen en orientación de texto horizontal o vertical. Además, la dirección en el bloque de texto progresa: de izquierda a derecha o de derecha a izquierda. El modo de escritura puede tener 3 valores: horizontal-tb, vertical-lr o vertical-rl.

modo de escritura: horizontal-tb | vertical-rl | vertical-lr;

Nota: Hay 2 valores experimentales más que no deben usarse en el código de producción: 'sideways-rl' o 'sideways-lr'. Además, los valores antiguos como lr, lr-tb, tb, tb-rl, rl han quedado obsoletos.

El modo de escritura presenta 2 conceptos clave:

  • Dirección del flujo del bloque: especifica la dirección en la que se apilan las cajas a nivel de bloque dentro de un contenedor. Puede ser de arriba a abajo, de izquierda a derecha o de derecha a izquierda.
  • Dirección de flujo en línea: especifica la dirección en la que fluye el contenido dentro de la línea de texto y dónde comienza una nueva línea. Puede ser horizontal o vertical.
Compatibilidad entre navegadores
Compatibilidad entre navegadores

Para lograr una orientación de texto vertical, establezca la propiedad del modo de escritura en vertical-lr (o vertical-rl) y establezca la orientación del texto en vertical.

Compatibilidad entre navegadores

¿Se pregunta sobre LambdaTest?

LambdaTest es una nube de pruebas de navegadores cruzados que le ayuda a realizar pruebas de compatibilidad de navegadores sin esfuerzo en más de 2000 navegadores y versiones de navegadores. Puede realizar pruebas manuales entre navegadores interactuando directamente con navegadores reales a través de una máquina virtual alojada en sus servidores en la nube. También puede realizar pruebas automatizadas entre navegadores utilizando su cuadrícula de selenio en línea a través de un marco de automatización de pruebas de su elección.


Creación de texto vertical con la propiedad "orientación del texto"

Para crear texto con orientación vertical, debe establecer la orientación del texto en CSS en vertical junto con el modo de escritura establecido en vertical-lr . Como comentamos anteriormente, la orientación del texto CSS solo funcionará si la propiedad del modo de escritura se establece en vertical (ya sea vertical-rl o vertical-lr) y no horizontal (horizontal-tb).

01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
dieciséis
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Vertical oriented text</title>
    <style>
        .vertical-text {
            writing-mode: vertical-lr;
            text-orientation: upright;
            background-color:red;
        }
  
        @supports(text-orientation:upright){
            .vertical-text{
                background-color: greenyellow;
            }
        }
  
    </style>
</head>
  
<body>
    <h1>CSS text-orientation property is supported by Google Chrome, Firefox, Opera and Safari</h1>
    <span class="vertical-text">
        Vertical Text using text-orientation
    </span>
  
</body>
</html>

Podemos utilizar LambdaTest como una herramienta de prueba en varios navegadores para interactuar con su sitio web en vivo utilizando su función de prueba en tiempo real. Las pruebas en tiempo real presentarían su sitio web en una máquina virtual alojada por servidores en la nube LambdaTest. También puede realizar pruebas de captura de pantalla automatizadas para capturar múltiples capturas de pantalla de una sola vez desde nuestra página web en diferentes navegadores de escritorio y móviles para solucionar problemas de compatibilidad del navegador . Puede hacer todo eso en sus páginas web alojadas localmente utilizando Lambda Tunnel, que ayuda a establecer una conexión SSH (Secure Shell) entre su máquina y sus servidores en la nube.

Compatibilidad entre navegadores
Compatibilidad entre navegadores

Métodos alternativos a la orientación de texto CSS

1.Palabras

La propiedad CSS 'word-break' define cómo se produce un salto de línea cada vez que el texto llega al final de la línea y desborda su contenedor.

Salto de
palabra de sintaxis : normal | romper-todo | mantener-todo | romper-palabra;

  • normal: regla predeterminada para un salto de línea.
  • break-all: para evitar el desbordamiento del contenedor, la palabra se rompe en cualquier letra.
  • keep-all: igual que de costumbre, pero para chino, japonés y coreano; no utilice ningún salto de palabra.
  • palabra de interrupción: en ausencia de puntos de interrupción en una línea, el trabajo se puede interrumpir en cualquier punto arbitrario.

Soporte del navegador

Compatibilidad entre navegadores

A diferencia de la orientación de texto, la propiedad de separación de palabras es compatible con todos los navegadores, incluido Microsoft Edge y todas las versiones de Internet Explorer.

Creación de texto vertical con la propiedad Word-Break

Podemos establecer la propiedad word-break para romper todos los valores y reducir el ancho del contenedor a 0px. Esto obligaría a que todas las palabras se rompan en cada letra y aparezcan de forma vertical. También configure el espacio en blanco para que se ajuste previamente para asegurarse de que los espacios en blanco (espacio en blanco) sean visibles para que se pueda hacer la distinción entre palabras.

01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
dieciséis
17
18
19
20
21
22
23
24
25
26
27
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Vertical oriented text</title>
    <style>
       h2 {
          margin-left: 10%;
           width: 50%;
           text-align: center;
       }
       .vertical-text {
           margin-left: 100px;
           width: 0px;
           word-break: break-all;
           white-space: pre-wrap;
           color: rgb(121, 202, 0);
       }
   </style>
</head>
<body>
    <h2>Using css word-break property as fallback to text-orientation. word-break is supported by all browsers including Edge and IE</h2>
   <p class="vertical-text">word-break css property</p>
</body>
</html>
Compatibilidad entre navegadores

2.Word-wrap / overflow-wrap

Las fuerzas de ajuste de palabras de CSS permiten que las palabras largas se dividan y envuelvan en la siguiente línea para evitar que se desborden. La propiedad de ajuste de palabras ahora también se denomina overflow-wrap . Todos los navegadores admiten la sintaxis de ajuste de palabras, incluidos Edge e IE, mientras que Chrome y Opera admiten la nueva sintaxis de ajuste de desbordamiento.

Sintaxis

ajuste de palabras: normal | palabra de interrupción | inicial | heredar;

  • normal: divide las palabras solo en los puntos de separación normales.
  • break-word: cualquier palabra se puede dividir en un punto arbitrario.
  • Inicial: se establece en un valor predeterminado.
  • Heredar: transfiere esta propiedad de un elemento principal a un elemento secundario.

Soporte del navegador

Compatibilidad entre navegadores

Al igual que el salto de palabras, la propiedad de ajuste de palabras también es compatible con todos los navegadores, incluido Microsoft Edge y todas las versiones de Internet Explorer.

Crear texto vertical con propiedad de ajuste de palabra

Podemos usar la misma estrategia que usamos en el caso de la propiedad de separación de palabras para reducir el ancho del contenedor a 0px y forzar que cada palabra se rompa en cada letra y aparezca en una orientación vertical mientras cada carácter individual permanece en posición vertical. Una vez más, configure el espacio en blanco para ajustar previamente para asegurarse de que los espacios en blanco (espacio en blanco) sean visibles para que se pueda hacer la distinción entre palabras.

01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
dieciséis
17
18
19
20
21
22
23
24
25
26
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Vertical oriented text</title>
    <style>
        h2 {
            text-align: center;
        }
  
        .vertical-text {
            margin-left: 100px;
            width: 0px;
            word-wrap: break-word;
            white-space: pre-wrap;
            color: rgb(121, 202, 0);
        }
    </style>
</head>
<body>
    <h2>Using css word-wrap property as fallback to text-orientation. word-wrap is supported by all browsers including Edge and IE</h2>
    <p class="vertical-text">word-wrap css property</p>
</body>
</html>
Compatibilidad entre navegadores

3. Etiqueta <br>

El método más primitivo para lograr la orientación vertical del texto es mediante el uso de etiquetas break <br>. Sin embargo, este método no es muy práctico y no debe utilizarse si la cadena de texto es demasiado larga.

1
2
3
<p>
    V <br> E <br> R <br> T <br> I <br> C <br> A <br> L <br> <br> T <br> E <br> X <br> T
</p>

4. <span> envoltura

Otro método popular es envolver cada letra del texto que se desea orientar verticalmente dentro de una etiqueta span y usar CSS para asignar display: block a cada contenedor span. Nuevamente, al igual que con la etiqueta <br>, este método no es práctico para cadenas de texto grandes.

01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
dieciséis
17
18
19
<head>
    <style>
        p span {
            display: block;
        }
    </style>
</head>
<body>
    <p>
        <span> V </span>
        <span> E </span>
      <span> R </span>
        <span> T </span>
        <span> I </span>
        <span> C </span>
        <span> A </span>
        <span> L </span>
    </p>
</body>

5. Usando JavaScript

Un enfoque mucho mejor es usar una sola línea de código javascript para agregar dinámicamente un contenedor de tramo alrededor de cada letra del texto en cuestión que necesita una orientación vertical en lugar de agregar tramos manualmente en HTML. El texto se divide en una matriz y cada elemento de la matriz está envuelto por una etiqueta de intervalo.

01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
dieciséis
<head>
    <style>
        h1 span {
            display: block;
        }
    </style>
</head>
  
<body>
    <h1> VERTICAL </h1>
  
    <script>
        var text = document.getElementsByTagName('h1')[0];
        text.innerHTML = '<span>' + text.innerHTML.split('').join('</span><span>') + '</span>';
    </script>
</body>

Conclusión

Crear texto con orientación vertical siempre ha sido un desafío en CSS desde tiempos inmemoriales. Ninguna solución o arreglo puede prometer un resultado inmaculado. Sin embargo, la introducción de la nueva propiedad de orientación de texto CSS3 ha resuelto completamente ese enigma. Una advertencia es apropiada para los desarrolladores que planean implementar esta función en la versión de producción de sus proyectos. La orientación del texto es una propiedad relativamente nueva y podría sufrir cambios de sintaxis en el futuro, y los desarrolladores no deben olvidar codificar las alternativas necesarias para Microsoft Edge e Internet Explorer para garantizar la compatibilidad entre navegadores. Si tiene en mente otras alternativas a la orientación de texto, hágamelo saber en los comentarios a continuación.

Publicar un comentario

0 Comentarios