Share
A principios de esta mañana, necesitaba crear un texto vertical para un proyecto en el que estoy trabajando. Después de probar un par de ideas, me puse a Twitter para descubrir qué tipo de pensamientos tenían nuestros seguidores sobre el tema. Hubo muchas respuestas e ideas excelentes que repasaremos hoy.!
* Nota: consulte el "Método 6" a continuación para obtener más detalles sobre el uso adecuado.Suscríbete a nuestra página de YouTube para ver todos los videos tutoriales.!
Prefiero ver este video en Screenr?
Accentsconagua
Por lo tanto, una forma posible (aunque no recomendada) de lograr texto vertical es agregar
norte
mi
T
T
U
T
S
No uses este método. Es cojo y descuidado.
Con este método, envolvemos cada letra en un lapso y luego establecemos su monitor a bloquear dentro de nuestro CSS.
Texto vertical norte mi T T U T S
El problema con esta solución, que no es el marcado aterrador, es que es un proceso manual. Si el texto se genera dinámicamente desde un CMS, no tiene suerte. No uses este método.
Mi instinto inicial fue agregar dinámicamente el lapso Etiquetas con JavaScript. De esa manera, resolvemos los problemas mencionados en el método dos..
Js bin REDES
Este método es definitivamente una mejora. Arriba, nosotros división el texto en una matriz, y luego envolver cada letra en una lapso. Si bien podríamos usar algo como un para declaración, o $ .map Para filtrar a través de la matriz, una solución mucho mejor y más rápida es unir y envolver manualmente el texto al mismo tiempo..
Aunque mejor, esta solución no es recomendable..
Alejémonos de JavaScript si podemos. ¿Qué sucede si aplicamos un ancho al elemento contenedor y forzamos el texto para que se ajuste? Eso podría funcionar.
Js bin REDES
En este escenario, aplicamos un ancho muy estrecho a la h1 etiqueta, y luego hacer su tamaño de fuente igual a ese valor exacto. Finalmente, estableciendo ajuste de línea igual a palabra de descanso, Podemos forzar cada letra en su propia línea. sin embargo, word-wrap: break-word es parte de la especificación CSS3 y no cumple con todos los navegadores.
Excluyendo los navegadores más antiguos, esto aparentemente resuelve nuestro problema ... pero no del todo. La demostración anterior parece funcionar, pero es demasiado arriesgado jugar con valores de píxeles. Intentemos algo tan simple como convertir las letras mayúsculas en minúsculas.
¡Ay! con este método, debemos ser muy cuidadosos cuando se trata de los valores específicos que establecemos. No recomendado.
espaciado de letras Como precaución, y para extender el método cuatro, ¿por qué no aplicamos bastante grande? espaciado de letras para solucionar este problema?
Js bin Nettuts
Eso parece solucionar el problema, aunque, de nuevo, estamos usando un poco de CSS3 aquí.
ems Alternativamente, hay una solución de una sola línea. Recuerda cuando aprendimos que aplicando. desbordamiento: oculto ¿A un elemento padre milagrosamente haría que contenga sus flotadores? ¡Este método es algo así! La clave es usar ems, y coloca un espacio entre cada letra.
Js bin N e t t t s s
Bastante limpio, ¿verdad? Y, de esta manera, puede aplicar cualquier tamaño de fuente que desee. Porque estamos usando ems - que es igual a la altura x de la fuente elegida - entonces tenemos mucha más flexibilidad.
Pero, una vez más, a veces más de una letra terminará en una línea. Tienes que estar seguro; Es por eso que he aplicado arbitrariamente grande espaciado de letras para asegurarse de que nunca haya más de una letra en una línea.
Según tengo entendido en este momento, esta es la mejor solución, la más compatible con todos los navegadores.
Espacio en blanco Una última forma de lograr este efecto es tomar ventaja de la espacio en blanco propiedad.
J E F F R E Y
Configurando espacio en blanco a pre, que instruye al texto a comportarse como si estuviera dentro de un pre etiqueta. Como tal, respeta cualquier espacio que haya agregado..
¿No debería haber una regla CSS3 para llevar a cabo esta tarea? ¿Y si pudiera poner algo en la línea de: fuente-pantalla: bloque de letras; lo que instruiría a cada letra para que sea representada como un bloque de clases?
¿Qué piensas? ¿Tienes alguna otra alternativa que deberíamos considerar? Mucha gente sugirió usar la rotación de texto para realizar la tarea, pero es importante recordar que esto también gira el texto noventa grados, lo cual no es lo que estamos tratando de lograr..
