¿Cómo puedo mostrar mejor un carácter de espacio en blanco?

Una aplicación web que estoy escribiendo destaca los caracteres individuales que se encuentran en un teclado tradicional. Tengo un área muy limitada en la que se puede mostrar el carácter (que es básicamente el ancho de un carácter W en la fuente que estoy usando) lo que significa que no puedo mostrar la palabra «espacio» o «espacio en blanco».

¿Cómo puedo mostrar mejor el carácter de espacio en blanco?

Probé un par de opciones, pero no estoy seguro de si estas podrían generar confusión:

  • Ejemplo 1 Uso de subrayado. Esto se parece demasiado al carácter de subrayado.
  • Ejemplo 2 El símbolo de espacio (␠ (␠)). Ni siquiera sabía que esto existía hasta que comencé a buscar para obtener respuestas a esta pregunta, por lo que no estoy seguro de si esto es ampliamente reconocido.
  • Ejemplo 2 Un borde inferior tenue en un color diferente.
  • Ejemplo 3 Un carácter de bloque (█ (█)) como los que se usan en una terminal para representar el cursor.
  • Ejemplo 4 Un espacio en blanco sin estilo aplicado.

Supongo que vale la pena señalar que esto es puramente con fines de visualización; el usuario no tiene ninguna interacción con el carácter más que reconocer que está allí cuando lee la página (por lo que no estoy preguntando acerca de ¿Qué carácter puedo usar para representar la barra espaciadora ? ).

Comentarios

  • Pregunta fuertemente relacionada: Es el punto del medio ¿Cuál es la mejor manera de significar un espacio?
  • ¿Todos los caracteres se separarán visualmente? Es decir, ¿son todas cajas separadas en las que se encuentra el personaje? Si es así, ‘ simplemente no usaría ningún estilo, a menos que tenga alguna razón por la que un solo cuadro está vacío significa algo más (como sin entrada).
  • @ JamesDonnelly En realidad, no estaba ‘ t sugiriendo el punto del medio. Quizás debería haberme vinculado directamente a mi respuesta, donde digo que middot no es el mejor personaje y sugiero un » underbracket » o corchete indicador en blanco como Ben tiene a continuación.
  • Posible duplicado de ¿Qué carácter puedo usar para representar la barra espaciadora?
  • No veo esto como un duplicado. El duplicado propuesto pregunta cómo representar el uso de la barra espaciadora física . Esta pregunta pregunta cómo representar visualmente un carácter en blanco / espacio.

Respuesta

Interpunct

No es intrusivo y apenas se nota. Y los usuarios de Word que estén familiarizados con él, lo reconocerán fácilmente, por lo que tendrá cierta consistencia externa.

Basado en los comentarios, edité esta respuesta para notar que es necesario generar una diferencia entre el texto e interpunct, así que utilicé un tamaño de fuente un poco más grande y cambié el color de negro a azul claro, por lo que es menos notable. También hay algunos idiomas (como el catalán) que usan esto como un carácter.

Es importante notar que este carácter se usa incluso antes de la era de las computadoras (el idioma latino lo usaba).

Comentarios

  • muchos editores de texto centrados en la programación también usan esto para rastrear espacios en blanco, aunque en un color difuminado.
  • Esto es lo que Notepad ++ usa cuando lo pides para hacer visibles los caracteres invisibles (el botón Pilcrow).
  • Yo también disfruto de la interpunción, pero como señala Woodrow, un color difuminado realmente ayuda a que sea menos notorio. Creo que en su ejemplo de texto negro sobre blanco son bastante molestos.
  • Dentro del texto, esto funciona muy bien, pero en una clave independiente no estoy seguro de que sea tan claro.
  • Añadiendo a @agweber poing. La decoloración del color también es importante, porque algunos idiomas usan este símbolo como parte de su gramática (por ejemplo, catalán; il · lusi ó).

Respuesta

Mi destino siempre ha sido un espacio en blanco, ␣ (␣) o el carácter subyacente ⎵ (⎵), que es más ancho . Puede verlos aquí en w3.org . He usado mucho el soporte en mis cursos de programación para mostrar espacio en la salida del programa.

Por ejemplo, These␣do␣a␣pretty␣good␣job␣of␣conveying␣a␣space se convierte en:

ejemplo con espacio en blanco

Asegúrate de usar una fuente que implemente los glifos Unicode para que no se rompa si el sistema del usuario no los tiene, o podría verse así:

Ejemplo con una fuente que no contiene los glifos] 2

Comentarios

  • Estos █ no █ █ █ un █ bonito █ █ █ █ █ trabajo █ █ █ transporte █ un █ espacio. imgur.com/Uj8fZeKl.png . Tenga cuidado de no utilizar caracteres que pueden no existir en el sistema del usuario ‘, ya que, de hecho, se trata de una aplicación web. Si sigue esta ruta, por favor incluya la fuente con la aplicación.
  • @Tyzoid ¡Seguro! Si ‘ va a usar unicode, asegúrese de que la fuente que ‘ está usando implemente esos glifos. Dicho esto, ‘ no estoy seguro de que ‘ no sea razonable esperar que el usuario ‘ s sistemas para tener una fuente que implemente todos los símbolos Unicode. Por ejemplo, mi sistema está sirviendo esos glifos de STIX General.
  • @Ben Puede ser el caso en la mayoría de los casos, pero creo que no es razonable asumir que los usuarios ‘ tienen todos los símbolos Unicode disponibles. El mío no ‘ t, como lo demuestra la captura de pantalla de su respuesta. (Además, para beneficio de personas como yo, ¿puedes incluir una captura de pantalla de cómo debería verse el texto?)
  • La otra ventaja de esto es que puedes ver dónde tienes varios espacios en una fila. . Es decir, dices que hay 4 caracteres aquí: ⎵⎵⎵⎵ y tres aquí: ⎵⎵⎵, mucho más fácil que aquí: ____ vs. ___
  • También vale la pena decir que estos no son ‘ t aparece en la aplicación de Android SE.

Respuesta

Respuesta corta

Para representar una barra espaciadora de un teclado, U + 23B5 Corchete inferior (normal ⎵ negrita monoespaciado ). Como alternativa, U + 2423 Caja abierta (␣). En HTML parlace, ⎵ y &blank, respectivamente. Para representar espacios en el texto, use el punto intermedio, U + 2E31 Separador de palabras Punto medio (⸱) o U + 00B7 Punto medio (·) como alternativa.

Repetición mental y otros signos de puntuación:

  • U + 2E31: ⸱⸱⸱⸱Cuatro⸱espacios⸱antes, ⸱ahora⸱⸱dos, ⸱uno⸱al⸱final.⸱
  • U + 00B7: ···· Cuatro · espacios · Antes, · ahora ·· dos, · uno · al · final. ·
  • U + 23B5: ⎵⎵⎵⎵Cuatro⎵espacios⎵antes, ⎵ahora⎵⎵dos, ⎵uno⎵en⎵final .⎵
  • U + 2423: ␣␣␣␣Four␣spaces␣before, ␣now␣␣ two, ␣ one␣at␣ end.

Obras monoespaciadas mejor:

  • U + 2E31: ⸱⸱⸱⸱Four⸱spaces⸱before,⸱now⸱⸱two,⸱one⸱at⸱end.⸱
  • U + 00B7: ····Four·spaces·before,·now··two,·one·at·end.·
  • U + 23B5: ⎵⎵⎵⎵Four⎵spaces⎵before,⎵now⎵⎵two,⎵one⎵at⎵end.⎵
  • U + 2423: ␣␣␣␣Four␣spaces␣before,␣now␣␣two,␣one␣at␣end.␣

Respuesta larga

Para la barra espaciadora, U + 23B5 Corchete inferior, HTML ⎵ () es el camino a seguir. Es un símbolo que se utiliza en teclados y teclados virtuales de teléfonos móviles, pero tiene poca cobertura de fuentes. U + 2423 Open Box, HTML &blank (␣) fue mejor compatible, se ve mejor con otros puntuación, pero es feo de forma aislada: vs .

La representación visual de los espacios en el texto es una bestia más diversa. En los viejos tiempos de la consola, los manuales representaban los espacios como una combinación de by una barra inclinada (/). Hay un Unicode para eso, U +2422 Símbolo en blanco (␢), pero sin el mismo impacto de la representación anterior en la mayoría de las fuentes. Pero el aspecto antiguo o el nuevo no ayudan mucho. Uso de superposiciones para simular las formas antiguas y U + 2422 directamente:

  • U + 0338: Estosb̷dob̷notb̷dob̷ab̷prettyb̷goodb̷jobb̷ofb̷conveyingb̷ab̷space.

  • U + 2422: Estos␢no␢no␢hacen␢unbueno␢trabajo␢de␢transportar ␢a␢space.

Una solución moderna es utilizar el punto medio del separador de palabras U + 2E31 (⸱) o el punto medio U + 00B7 punto (·). El primero es recomendable, el segundo tiene un amplio soporte de fuentes.

Ejemplos:

  • Un⸱bueno⸱ trabajo⸱de⸱ mostrar⸱ espacios. (U + 2E31)
  • Un · bastante · buen · trabajo · de · mostrar · espacios. (U + 00B7)
  • A⸱pretty⸱good⸱job⸱of⸱displaying⸱a⸱space. (U + 2E31 mono espaciado) nota
  • A·pretty·good·job·of·displaying·spaces. (U + 00B7 mono espaciado)

Para notas históricas, usos y más alternativas, consulte https://en.wikipedia.org/wiki/Interpunct y https://en.wikipedia.org/wiki/Whitespace_character (enterrados en Descripción general / Definición y ambigüedad / Unicode / Sustitutos).


Si entiendo correctamente, su aplicación muestra texto como pulsaciones de teclas (o texto y teclas especiales).Si es así, con U-2423:

  • A p r e t t y g o o d j o b o f d i s p l a y i n g k e s .

  • A bastante buena trabajo de mostrando claves.

Con U-23B5:

  • A p r e t t y g o o d j o b o f d i s p l a y i n g k e y s .

  • Una bonita buena trabajo de mostrando claves.


nota En algunas fuentes monoespaciadas, ¡es un glifo de diferente ancho!

Comentarios

  • Hay U + 2422 Símbolo en blanco, como se ve en varias otras respuestas.
  • Gracias, edité para mencionar eso. No pude encontrar esto antes porque la nueva representación de » b slash » (o » b solidus «) no es como en los días de las máquinas de escribir. Dios, me siento viejo ahora.
  • Supongo que Lucida Sans Unicode (de las fuentes enumeradas en fileformat.info) coincide mejor con sus expectativas .
  • PS: U + 2E31 está semánticamente bien, pero mal soportado y (si lo es) usualmente se parece a U + 00B7, que puede tener un comportamiento de salto de línea menos deseable pero está disponible universalmente. U + 2027 también se ve igual (tal vez colocado un poco más arriba) pero es el carácter incorrecto para el trabajo, porque une las palabras a su alrededor, es para diccionarios. U + 2024/5 son un y dos puntos en la línea de base, lo que puede ser mejor que el amplio U + 2026 o período estándar U + 002E.

Respuesta

¿Puede usar ¿color? Wikipedia usa cuadros de color azul claro para mostrar los caracteres:

ingrese la descripción de la imagen aquí

Pero si está limitado a dos colores, sugeriría estos:

  • ˽ ⎵⎴ – Modificar el estante de letras, el soporte inferior o el soporte superior para representar el botón
  • ⬚ ◌ – Círculo o cuadrado punteado para representar el vacío
  • 👽 👾 🚀 – Una opción de comedia.

Comentarios

  • No estoy seguro de que esta sea una buena idea.
  • @PierreArlaud No ‘ ni siquiera mencioné esa mierda.
  • @PierreArlaud ¡Tu idea está llena de tonterías! Nos reímos de nuestros 💩 productores cuando ‘ la leímos.
  • con el color puede ‘ t mostrar fácilmente cuántos espacios entre las palabras cuando hay varios consecutivos

Responder

& en blanco; ␣

Wikipedia enumera los siguientes caracteres para este propósito:

Unicode space-illustrating characters (visible) Code Decimal Name Block Display Entity U+00B7 183 Middle dot Basic Latin · · U+237D 9085 Shouldered open box Misc Technical ⍽ - U+2420 9248 Symbol for space Control Pictures ␠ - U+2422 9250 Blank symbol Control Pictures ␢ - U+2423 9251 Open box Control Pictures ␣ ␣ 

Jukka Korpela (autor de » Explicación de Unicode «) tiene un sitio web que tiene esto que decir:

Espacios visibles

Hay algunos caracteres gráficos que se pueden utilizar símbolos de un espacio. Aunque a veces se denominan espacios visibles, no son espacios en absoluto, sino notaciones visibles que se utilizan para indicar la apariencia de espacios en manuales de instrucciones y descripciones de textos.

La siguiente tabla enumera algunos símbolos, en orden decreciente según su utilidad práctica . Sus formas varían según la fuente; especialmente el último varía mucho.

 ␣ U+2423 OPEN BOX ␢ U+2422 BLANK SYMBOL ␠ U+2420 SYMBOL FOR SPACE 

El símbolo ␢ tiene una larga historia de uso para este propósito en la programación informática temprana. Fue escrito a mano en hojas de codificación por programadores para indicar un carácter de espacio a los operadores de máquinas de tarjetas perforadas (que eran como un grupo de mecanografía).

Yo usaría ␣ & en blanco; particularmente porque hay una entidad HTML con un nombre tan obviamente relevante.

Comentarios

  • Entonces, si hay símbolos para mostrar el espacio, ¿hay símbolos para mostrando símbolos de espacio?

Respuesta

Siempre puedes usar una fuente monoespaciada, entonces el espacio se indicaría con un espacio del tamaño de un carbón :). Puede resaltar cada espacio (por ejemplo, <mark>&nbsp;</mark>) y establecer algunas reglas CSS para que sean del color apropiado.

Respuesta

Mire la URL de esta página. Los espacios entre las palabras del título se reemplazan por un guión. Es intuitivo, legible y familiar.

Comentarios

  • El problema es que - se verá como un -!
  • Estos son los guiones (U + 2011). Los guiones son (en dash, U + 2013) y (em dash U + 2014) . Además, algunas URL usan un símbolo más, + (U + 002B), mientras que otras escriben claramente %20 (U + 0020 es el Carácter Unicode para el espacio). Esto se denomina codificación porcentual, una parte del conjunto de URI.

Respuesta

Estoy acostumbrado a los espacios en blanco de Eclipse «, que se utilizan para mostrar espacios en blanco en el contexto del formato de código.

  • Espacio: U + 00B7 «punto central»: ·
  • Tabulador: U + 2192 «flecha hacia la derecha»: →

Si puede, mostrar caracteres de espacio en blanco en un color más claro que el texto normal ayuda a enfatizar que se trata de caracteres de espacio en blanco. Por ejemplo, si el texto normal es negro, use gris.

Comentarios

  • El punto del medio es la mejor solución para el espacio, pero para tabulación ocupa más de una columna en la mayoría de las fuentes monoespaciadas. Prefiero el pequeño triángulo negro que apunta a la derecha (U + 25B8) que se puede combinar con el punto del medio en vim para mostrar pestañas.

Respuesta

Cuando estaba aprendiendo redacción técnica en la universidad aquí en Nueva Zelanda, nos enseñaron a usar una casa (número Unicode: U + 2302, código HTML: & # 8962) o un triángulo hacia arriba (número Unicode: U + 25B3, código HTML: & # 9651) para indicar espacios.

Set-ExecutionPolicy⌂Unrestricted Set-ExecutionPolicy△Unrestricted 

Comentarios

  • uhh … Me cuesta mucho encontrar el espacio allí. Se parece demasiado a un carácter, así que tengo que leer la palabra dos veces para dividir las palabras en el lugar correcto …
  • @Falco, yo también. Supongo que depende del tipo de letra elegido. .
  • He visto que se usa para mostrar un separador de columna (o tabulador), pero no para espacios normales entre palabras.

Respuesta

Como se mencionó anteriormente, el espacio en blanco del programador tradicional es una letra b minúscula, superpuesta por una barra inclinada. Se usaban en hojas de codificación escritas a mano que pasaban los programadores a operadores de keypunch que no estaban familiarizados con el lenguaje de programación que se estaba utilizando y, por lo tanto, requerían una entrada inequívoca.

En una página web, esto se puede representar ingresando, en secuencia: una letra b minúscula, una etiqueta de intervalo que especifica un estilo margin-left de -.4em, una barra inclinada, una etiqueta de intervalo final

(Usar una clase CSS ahorraría escribir y generalmente es una mejor práctica).

Usar em como el La unidad de medida permite que el personaje escale si el fo nt se cambia el tamaño.

Respuesta

No estoy diciendo que esto sea superior, pero es un enfoque que se puede usar: para texto que es para mostrarse como caracteres (no una imagen) en una pantalla (no impresa): simplemente use la cadena real, con espacios según sea necesario, y dígale al usuario que coloque el cursor en la cadena y use una tecla de flecha para mover y contar el espacios (hago esto como lector cuando verifico algunas cadenas y contando longitudes). Esto tiene la ventaja de que la cadena se puede copiar y pegar, y evita cualquier problema de representación de caracteres y compatibilidad con el juego de caracteres.

Por ejemplo, :

Las fechas se pueden ingresar con varios espacios, como en este ejemplo, que tiene 2 espacios entre cada elemento «25 de diciembre de 2016». Coloque el cursor en la cadena y use las teclas de flecha derecha e izquierda para explorarla. Puede copiarla y pegarla en el programa.

(Nota: este sitio reemplaza múltiples espacios ingresados por uno solo así, irónicamente, t su ejemplo no funciona aquí. Ingresé 2 espacios consecutivos donde dije que sí.)

Deja una respuesta

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