¿Cómo obtener un carácter tabulador?

123

En HTML, no hay caracteres para una pestaña, pero no estoy seguro de por qué puedo copiar y pegar uno aquí:. (No puede ver el ancho completo, pero si hace clic para editar mi pregunta, verá el carácter). Si puedo copiar y pegar un carácter de tabulación, debería haber un equivalente unicode que pueda codificarse en html . Sé que no existe, pero este es un misterio que nunca he podido entender.

Entonces mi pregunta es: ¿por qué no hay un carácter unicode para una pestaña, incluso si puedo copiarla y pegarla?

html Abbey Graebner
fuente
66
Aquí hay un carácter de tabulación para usted: "". ¡Solo envíame un mensaje de texto si necesitas otros personajes! ¡Tengo espacios, guiones y letras griegas también!
loco
En Unix: Ctrl + Shift + U y luego 9 para el carácter de sangría.
neverMind9
StackOverflow comenta el texto más severamente que las preguntas o respuestas. ``, '' y "" fueron caracteres TAB pegados, citados de varias maneras.
MarkHu

Respuestas:

165

Claro que hay una entidad para pestañas:

	

(La pestaña tiene el carácter ASCII 9 o Unicode U + 0009).

Sin embargo, al igual que las pestañas literales (las que escribe en su editor de texto), los analizadores HTML tratan todos los caracteres de las pestañas como espacios en blanco y los contraen en un solo espacio, excepto aquellos dentro de un <pre>bloque, donde las pestañas literales se mostrarán como 8 espacios en un fuente monoespacio.

josh3736
fuente
1
Eso es interesante, pero si es un carácter unicode, entonces html no debería cambiarlo (colapsarlo), ¿verdad?
Abbey Graebner
2
Unicode no tiene su propio carácter de tabulación; U + 0009 es lo mismo que el carácter de tabulación que obtienes presionando Tab. (Creo que puede estar confundiendo entidades HTML con el juego de caracteres Unicode)
Josh3736
8
más generalmente puedes usar & # 9; en cualquier elemento con espacio en blanco estilo CSS: pre; como en jsfiddle.net/cancerbero_sgx/sp269/3
cancerbero
96

Tratar &emsp;

según los documentos:

Las entidades de caracteres &ensp;y &emsp;denotan un espacio en y un espacio em respectivamente, donde un espacio en es la mitad del tamaño en puntos y un espacio en em es igual al tamaño en puntos de la fuente actual. Para las fuentes de tono fijo, el agente de usuario puede tratar el espacio en blanco como equivalente a un carácter de espacio A, y el espacio em como equivalente a dos caracteres de espacio.

Enlace de documentos: https://www.w3.org/MarkUp/html3/specialchars.html

Abhishek Goel
fuente
48

ponlo entre <pre></pre>etiquetas y luego usa estos caracteres&#9;

no funcionaría sin las <pre></pre>etiquetas

Raymund
fuente
44
Bien, esto es genial, estaba tratando de usarlo &#9;solo, pero no funcionó. Gracias por mencionar <pre>!
Abbey Graebner
1
Excelente sugerencia ¿Por qué exactamente se comporta así?
pkanane
1
la etiqueta <pre> define texto preformateado, cualquier lugar de texto dentro de la etiqueta conservará espacios, saltos de línea, tabulación, etc. Por lo general, se mostrará en un tipo de fuente de ancho fijo como Courier
Raymund
2
Puede usar cualquier etiqueta html con una combinación de white-space: pre-wrap;owhite-space: pre;
Petr Hurtak
16

Publicar otra alternativa para ser más completo. Cuando probé las respuestas basadas en "pre", también agregaron saltos de línea verticales adicionales.

Cada pestaña se puede convertir en una secuencia de espacios que no se rompen y que no requieren ajuste. 

"&nbsp;&nbsp;&nbsp;&nbsp;"

Esto no se recomienda para uso repetido / extenso dentro de una página. Un enfoque de margen div / relleno parecería mucho más limpio.

crokusek
fuente
55
Si las pestañas se usan como una herramienta para alinear el texto a la derecha de las pestañas (donde el texto de fuente de ancho no fijo a la izquierda no es igual), la conversión a caracteres nbsp no resolverá el problema.
Steve Midgley
4

Yo uso <span style="display: inline-block; width: 2ch;">&#9;</span>para una pestaña de dos caracteres de ancho.

GrayFace
fuente
Esto no es lo mismo que las pestañas, solo agrega espacio en blanco para que no haya columnas con esto.
Salami
1

La pestaña es [HT], o el número de caracteres 9, en la biblioteca Unicode.

DanRedux
fuente
1

Como se mencionó, por razones de eficiencia, los espacios secuenciales se consolidan en un espacio que el navegador realmente muestra. Recuerde lo que significa el ML en HTML. Es un lenguaje de marcado, diseñado para controlar cómo se muestra el texto ... no espacios en blanco: p

Aún así, puede fingir que el navegador respeta las pestañas, ya que todo lo que hace TAB es anteponer 4 espacios, y eso es fácil con CSS. ya sea en línea como ...

 <div style="padding-left:4.00em;">Indenented text </div>

O como una clase regular en una hoja de estilo

.tabbed {padding-left:4.00em;}

Entonces el HTML podría verse así 

<p>regular paragraph regular paragraph regular paragraph</p>
<p class="tabbed">Indented text Indented text Indented text</p>
<p>regular paragraph regular paragraph regular paragraph</p>
Duane Lortie
fuente
1
Eso no es lo que hace una pestaña. El contenido de las pestañas se alinea: en una fila puede agregar 3 espacios y en otra 4. Conceptualmente, mueve el cursor a la siguiente parada de pestañas.
BrainSlugs83