Share
En esta sugerencia rápida, le mostraré cómo mostrar el texto en una página web que va de arriba a abajo, en lugar de de izquierda a derecha (o de derecha a izquierda). Hay dos enfoques, uno es mejor que el otro, así que saltemos y echemos un vistazo!
Si estás familiarizado con CSS, puedes pensar instintivamente que transformar Sería la mejor manera de abordar este problema, pero permítame mostrarle por qué no es lo ideal. Comenzaremos con algo de contenido (algunos encabezados y un párrafo), luego aplicaremos un transformar, junto con un origen transformado para que rote desde el punto correcto, luego un desplazamiento para mantenerlo en la pantalla:
Este enfoque funciona en términos de rotación del texto, pero el flujo de documentos no se ve afectado, por lo que h2 En nuestro caso, ahora se encuentra encima del contenido debajo de él. Aún así, nos da un resultado abstracto bastante fresco..
Nuestro segundo enfoque mantendrá el flujo de documentos para que permanezca fiel a las dimensiones de la h2, independientemente de la dirección del texto. Usaremos la propiedad de modo escritura, como esta:
h2 modo de escritura: vertical-rl;
En este caso le hemos dado un valor de vertical-rl, que aplica una dirección de visualización vertical y una dirección de texto de derecha a izquierda. Echar un vistazo:
Mucho mejor. También notará que el cursor también cambia, lo que no ocurre con la transformación CSS.
Es posible que hayas notado que hemos usado un valor de rl (de derecha a izquierda), mientras que estamos acostumbrados a leer el script latino de izquierda a derecha. Pero eso es porque hemos cambiado el Dirección del flujo del bloque. si damos nuestro h2 un valor de altura establecido, verá el ajuste de texto y se dará cuenta de que en este caso realmente necesitamos las líneas para leer desde la derecha de la página a la izquierda:
Esto nos lleva a la necesidad de definir qué bits de toda esta alineación deben fluir y en qué direcciones. Los scripts basados en latín fluyen de arriba a abajo (esta es la Dirección del flujo del bloque). Su texto se lee de izquierda a derecha (esta es la Dirección de flujo en línea). Y sus personajes tienen una línea de base en la parte inferior mientras apuntan hacia arriba (esta es la Dirección del personaje). Me gusta esto:
Otros scripts, como el basado en el árabe, el basado en Han (como el chino y el japonés) y el basado en el mongol, pueden mostrar texto usando estos tres flujos en cualquier combinación de direcciones.
La especificación del modo de escritura se diseñó para admitir todos los distintos scripts y sistemas de escritura del mundo. Mencionamos sistemas basados en Mongolia, por ejemplo, cualquiera de ellos se muestra verticalmente, pero fluye de izquierda a derecha.
Otros valores de modo de escritura, que puede utilizar hoy, incluyen:
Accentsconagua
vertical-lr donde el texto se ejecuta verticalmente pero comienza a la izquierda del contenedor corriendo a la derecha.horizontal-tb donde el texto permanece horizontal, pero fluye de arriba a abajo. Esto (lo habrás notado) es el comportamiento por defecto..Aquí hay una cosa más para echarle un vistazo: un poema chino, usando vertical-rl modo de escritura. Su contenido está flotando a la derecha, de modo que comience a la derecha de la página y lea hacia la izquierda. Pero lo que quizás notarás es que los personajes aún están orientados en posición vertical. Los caracteres latinos estarían orientados de manera diferente con estas mismas reglas. Esto es deliberado:
"El estándar de Unicode asigna una propiedad a cada personaje y los navegadores pueden usar esto para determinar la orientación predeterminada de un personaje determinado". - W3C
Puede adaptar aún más la orientación de los caracteres utilizando el orientación del texto propiedad.
El modo de escritura CSS tiene un excelente soporte de navegador en el momento de la escritura, aunque algunos aspectos aún están en desarrollo. Todo lo que me ves hacer en este tutorial se puede utilizar en producción ahora mismo..
Ya sea que use esto para obtener resultados prácticos o estéticos, veamos qué ha hecho en los comentarios.!
