Saltar al contenido

¿Cómo puedo replicar un espacio de tabulación t en HTML?

Luego de investigar con especialistas en este tema, programadores de diversas ramas y profesores hemos dado con la respuesta a la pregunta y la compartimos en este post.

Solución:

Puede ingresar el carácter de tabulación (U+0009 TABULACIÓN DE CARACTERES, comúnmente conocido como TAB o HT) usando la referencia de carácter . Es equivalente al carácter de tabulación como tal. Por lo tanto, desde el punto de vista de HTML, no hay necesidad de “escapar” usando la referencia de carácter; pero puede hacerlo, por ejemplo, si su programa de edición no le permite ingresar el carácter convenientemente.

Por otro lado, el carácter de tabulación es en la mayoría de los contextos equivalente a un espacio normal en HTML. No “tabula”, es solo un espacio de palabras.

Sin embargo, el carácter de tabulación tiene un manejo especial en pre elementos y (aunque esto no tan bien descrito en las especificaciones) en textarea y xmp elemento (en este último no se pueden utilizar referencias de carácter, sólo el carácter de tabulación como tal). Esto se describe de forma un tanto engañosa en las especificaciones de HTML, por ejemplo, en HTML 4.01: “[Inside the pre element, ] el carácter de tabulación horizontal (decimal 9 en [ISO10646] y [ISO88591] ) suele ser interpretado por los agentes de usuario visuales como el menor número de espacios distintos de cero necesarios para alinear los caracteres a lo largo de las tabulaciones que son cada 8 caracteres. Desaconsejamos encarecidamente el uso de tabulaciones horizontales en texto con formato previo, ya que es una práctica común, al editar, establecer el espacio entre tabulaciones en otros valores, lo que genera documentos desalineados”.

Las advertencias son innecesarias, excepto en lo que respecta a la posible falta de coincidencia de las pestañas en su software de creación y la representación HTML en los navegadores. La verdadera razón para evitar la tabulación horizontal es que es una herramienta tosca y simplista en comparación con las tablas para presentar material tabular. Y al mostrar programas fuente de computadora, es mejor usar solo espacios dentro pre, dado que el tabulador predeterminado se detiene cada 8 caracteres, no es adecuado para ningún estilo de sangría de código normal.

Además, en CSS, puede especificar white-space: pre (o, con un soporte de navegador un poco más limitado, white-space: pre-wrap) para hacer un elemento HTML normal, como div o p, representado como pre, de modo que se conserven todos los espacios en blanco y la pestaña horizontal tenga el efecto de “tabulación”.

En el Módulo de Texto CSS Nivel 3 (borrador de trabajo de Última Convocatoria, es decir, avanzando hacia la madurez), también está el tab-size propiedad, que se puede utilizar para establecer la distancia entre tabulaciones, por ejemplo tab-size: 3. Es compatible con las versiones más recientes de la mayoría de los navegadores, pero no con IE (ni siquiera con IE 11).

     sería una solución alternativa si solo busca el espaciado.

HTML no tiene caracteres de escape (ya que no usa semántica de escape para caracteres reservados, sino que usa entidades SGML: &, <, > y ").

SGML no tiene una entidad con nombre para el carácter de tabulación como existe en la mayoría de los conjuntos de caracteres (es decir, 0x09 en ASCII y UTF-8), haciéndolo completamente innecesario (es decir, simplemente presione el Pestaña key en su teclado). Si está trabajando con un código que genera HTML (por ejemplo, una aplicación del lado del servidor, por ejemplo, ASP.NET, PHP o Perl, es posible que deba escapar de él en ese momento, pero solo porque el lenguaje del lado del servidor lo exige – no tiene nada que ver con HTML, así:

echo "
ttTABS!tt

";

Pero puede usar entidades SGML para representar cualquier carácter ISO-8859-1 por valor hexadecimal, por ejemplo para un carácter de tabulación.

Puedes añadir valor a nuestra información asistiendo con tu veteranía en las críticas.

¡Haz clic para puntuar esta entrada!
(Votos: 0 Promedio: 0)



Utiliza Nuestro Buscador

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *