Tengo un área de texto en la que intento insertar pestañas del mismo tamaño.
Como puede ver en el ejemplo, la única diferencia en cada línea de testString es la posición de \t .
Sin embargo, en el área de texto resultante, el tamaño de las pestañas es diferente, aparentemente dependiendo de cuántos caracteres hay delante. Esto hace que el texto después de la pestaña no se alinee correctamente.
En mi mundo perfecto, todos los 5 en el área de texto estarían alineados verticalmente, ya que cada línea es técnicamente igual (cinco caracteres + una pestaña)
Soy consciente de la propiedad CSS tab-size , y aunque esto cambia el tamaño de las pestañas, el tamaño de la pestaña resultante en el área de texto todavía se basa en la cantidad de caracteres que hay delante.
No quiero insertar espacios en lugar de pestañas, porque quiero un solo retroceso/eliminación para eliminar toda la pestaña, pero si alguien ingresa varios espacios en sucesión, me gustaría retroceder/eliminar para borrar solo espacios individuales como de costumbre.
¿Hay algo que me estoy perdiendo? ¿Hay alguna solución para lograr esto? Mi investigación no ha arrojado resultados útiles, por lo que ahora me comunico aquí.
Gracias por tu ayuda.
testString = '1\t2345' + '\n' + '12\t345' + '\n' + '123\t45' + '\n' + '1234\t5' document.getElementById('text').value = testString <textarea cols="10" rows="4" id="text"></textarea>Puede acercarse al resultado solicitado en caso de que su caso de uso tenga un solo tipo de "separadores de espacios en blanco generales anchos" que no estén alineados en las tabulaciones en su área de texto. white-space: pre-line tabulan sus "tabulaciones" obedeciendo el comportamiento y hacen que todos los espacios y tabulaciones se colapsen en unidades de separación de palabras individuales. El ancho de estas "unidades" se puede ajustar con word-spacing :
<p contenteditable role="textbox" style=" white-space: pre-line; word-spacing: 1em; font-family: monospace, monospace; "> 4×Space: 1 2345 12 345 123 45 1234 5 1×Space: 1 2345 12 345 123 45 1234 5 1×Tab: 1 2345 12 345 123 45 1234 5 » « (ensp) » « (emsp) »　« (IDEOGRAPHIC) » « (space) »	« (tab) </p>Como se demostró, funciona para el ejemplo dado. Los inconvenientes son que:
  en su lugar (ver la parte inferior del fragmento anterior). Editar: me di cuenta de que usar contenteditable en lugar de textarea trae algunos aspectos adicionales (propios inconvenientes diferentes) en juego, especialmente con respecto a la inserción de espacios en blanco. Aquí se aplica el mismo estilo al área de textarea real para probar la experiencia de edición con los inconvenientes descritos anteriormente:
<textarea rows="25" style=" white-space: pre-line; word-spacing: 1em; font-family: monospace, monospace; "> 4×Space: 1 2345 12 345 123 45 1234 5 1×Space: 1 2345 12 345 123 45 1234 5 1×Tab: 1 2345 12 345 123 45 1234 5 » « (ensp) » « (emsp) »　« (IDEOGRAPHIC) » « (space) »	« (tab) </textarea>