¿Hay otros códigos de espacios en blanco como & nbsp para medios espacios, em-espacios, en-espacios, etc. útiles en HTML?


149

Preguntándose si hay otros códigos disponibles para usar en un boletín HTML.

Usaría el relleno o los márgenes de las celdas, pero soy nuevo en este tema de HTML / CSS y no puedo encontrar un cambio que afecte tanto a la línea del Título principal como al subtítulo debajo. Al ser un correo electrónico, dudo en revisar el CSS para obtenerlo, ya que no sé qué es lo que no les gusta a los clientes de correo electrónico en comparación con el marcado en línea.

Para el contexto, la plantilla que estoy usando es el tema Mute del recorte de Mailchimp:

    <!-- language: lang-html -->
<table cellspacing="0" cellpadding="0" border="0" align="center" width="626">
    <tbody>
        <tr>
            <td valign="middle" bgcolor="#546781" height="97" background="images/header-bg.jpg" style="vertical-align: middle;">
                <table cellspacing="0" cellpadding="0" border="0" align="center" width="555" height="97">
                    <tbody>
                        <tr>
                            <td valign="middle" width="160" style="vertical-align:middle; text-align: left;">
                                <img width="70" height="70" src="http://dl.dropbox.com/…….png" style="margin:0; margin-top: 4px; display: block;" alt="" />
                            </td>
                            <td valign="middle" style="vertical-align: middle; text-align: left;">
                                <h1 class="title" style="margin:0; padding:0; font-size:30px; font-weight: normal; color: #192c45 !important;">
                                    <singleline label="Title"><span>Title of Report</span></singleline>
                                </h1>
                                <h1 class="title" style="margin:0; padding:0; font-size:15px; font-weight: normal; color: #192c45 !important;">
                                    <singleline label="Title"><span>Small Subhead</span></singleline>
                                </h1>
                            </td>
                            <td width="55" valign="middle" style="vertical-align:middle; text-align: center;">
                                <h2 class="date" style="margin:0; padding:0; font-size:13px; font-weight: normal; color: #192c45 !important; text-transform: uppercase; font-weight: bold; line-height:1;">
                                    <currentmonthname />December
                                </h2>
                                <h2 class="date" style="margin:0; padding:0; font-size:23px; font-weight: normal; color: #192c45 !important; font-weight: bold;">
                                     <currentyear />2011
                                </h2>
                            </td>

                        </tr>
                    </tbody>
                </table>
            </td>
        </tr>

El correo electrónico completo como página web se puede ver aquí.

Respuestas:


381

Si muchos .

Incluyendo pero no limitado a:

  • espacio que no rompe: &#160;o&nbsp;
  • espacio estrecho sin interrupciones: &#8239;(no hay referencia de caracteres disponible)
  • en espacio: &#8194;o&ensp;
  • em espacio: &#8195; o&emsp;
  • Espacio 3 por em: &#8196; o&emsp13;
  • Espacio 4 por em: &#8197; o&emsp14;
  • Espacio de 6 por em: &#8198;(sin referencia de caracteres disponible)
  • espacio figura: &#8199; o&numsp;
  • espacio de puntuación: &#8200;  o&puncsp;
  • espacio reducido: &#8201;  o&thinsp;
  • espacio para el cabello: &#8202; o&hairsp;

span{background-color: red;}
<table>
<tr><td>non breaking space:</td><td> <span>&#160;</span> or <span>&nbsp;</span></td></tr>
<tr><td>narrow no-break space:</td><td> <span>&#8239;</span></td></tr>
<tr><td>en space:</td><td> <span>&#8194;</span> or <span>&ensp;</span></td></tr>
<tr><td>em space:</td><td> <span>&#8195;</span> or <span>&emsp;</span></td></tr>
<tr><td>3-per-em space:</td><td> <span>&#8196;</span> or <span>&emsp13;</span></td></tr>
<tr><td>4-per-em space:</td><td> <span>&#8197;</span> or <span>&emsp14;</span></td></tr>
<tr><td>6-per-em space:</td><td> <span>&#8198;</span></td></tr>
<tr><td>figure space:</td><td> <span>&#8199;</span> or <span>&numsp;</span></td></tr>
<tr><td>punctuation space:</td><td> <span>&#8200;</span> or <span>&puncsp;</td></tr>
<tr><td>thin space:</td><td> <span>&#8201;</span> or <span>&thinsp;</span></td></tr>
<tr><td>hair space:</td><td> <span>&#8202;</span> or <span>&hairsp;</span></td></tr>
</table>


3
Firefox representa todos los espacios anteriores con el mismo ancho, más ancho que un espacio en la fuente, excepto nbsp, donde se representa como un espacio e impone el carácter que no se rompe. Una verdadera pena. Hay casos en los que solo funcionará un personaje, por ejemplo, cuando el relleno se controla o se pasa a otra cosa con construcciones comobefore:
fyngyrz el

2
@fyngyrz Al menos en Firefox 54 en Linux, esto ya no es cierto. Sin embargo, también puede depender de la fuente; He probado esto en Stack Overflow, donde se usa la familia de fuentes Arial.
Solo estudiante el

55
Para cualquiera que solo quiera ver cómo se ven estos tipos de espacios en blanco jsfiddle.net/LcLg5u25
Vadim Ovchinnikov

2
el espacio de figuras $numsp;es muy útil para alinear números, porque el espacio se define para ser exactamente tan ancho como un número en la misma fuente.
Rudey

2
Firefox en Windows está bien ahora (v.61) BTW.
MSC

13

Hay códigos para otros caracteres espaciales, y los códigos como tales funcionan bien, pero los caracteres en sí mismos son caracteres heredados. Se han incluido en conjuntos de caracteres solo debido a su presencia en los datos de caracteres existentes, en lugar de usarse en documentos nuevos. Para algunas combinaciones de fuente y versión del navegador, pueden hacer que se muestre un glifo genérico de carácter no representable. Para más detalles, consulte mi página sobre espacios Unicode .

Por lo tanto, usar CSS es más seguro y le permite especificar la cantidad deseada de espacio, no solo los anchos específicos de los espacios de ancho fijo. Si solo desea agregar un espacio alrededor de sus elementos h2, como me parece, entonces configurar el relleno en esos elementos (cambiar el valor del relleno: 0 configuraciones que ya tiene) debería funcionar bien.


Gracias terminé usando el atributo en línea <h1 class = "title" style = "margin: 0; margin-left: 2px; padding: 0; font-size: 15px; font-weight: normal; color: # 192c45! Important ; "> supongo que es más seguro a pesar de que la familia de fuentes es Helvetica Neue etc
wide_eyed_pupil

Pero si son heredados y 'están incluidos en los conjuntos de caracteres solo debido a su presencia en los datos de caracteres existentes', eso significa que no se irán pronto. Realmente no te veo discutir. Supongo que cualquier persona 'lo suficientemente avanzada' como para buscar 'medios espacios' probablemente ya haya decidido que el margen o el relleno no son apropiados. Me decidí (&thinsp;4 PACK&thinsp;)por mis requisitos: usar margen o relleno sería una idea terrible para esto
Simon_Weaver

1
@Simon_Weaver, como describí, los caracteres de espacio de ancho fijo no funcionan de manera confiable. También son una herramienta contundente: un conjunto fijo de anchos, aunque los anchos reales dependen de la fuente, a diferencia de las configuraciones independientes de la fuente <span style="padding: 0 0.1em">4 PACK</span>, con libertad para establecer y ajustar los valores.
Jukka K. Korpela

1
Aunque es bastante antiguo, "The Trouble With EM 'n EN (and Other Shady Characters)" de Peter K Sheerin ( alistapart.com/article/emen ) sigue siendo una lectura útil sobre este tema. En particular, aunque esto puede haber mejorado en los últimos 14 años, el hecho de que no todos los tipos de letra f̶o̶n̶t̶s̶ representan los diversos espacios correctamente.
Dave Land

1
También hay ZERO WIDTH JOINER fileformat.info/info/unicode/char/200d/index.htm y ZERO WIDTH NON JOINERque tiendo a usar con más frecuencia que los espacios de ancho cero.
Reb.Cabin

9

No estoy seguro de si esto es a lo que se refiere, pero esta es la lista de entidades HTML que puede usar:

Lista de referencias de entidades de caracteres XML y HTML

Usando el contenido dentro de la columna 'Nombre' puede simplemente envolverlos en un &y;

Por ejemplo &nbsp;, &emsp;, etc.


Entonces, en el contexto del texto marcado (digamos dentro de '<p>' y '</p>' el '&' denota un nombre de glifo unicode, ¿verdad? ¿Cuál es el ';' para eso un carácter espacial no señala cuándo es analizado por el navegador?
wide_eyed_pupil

El punto y coma de cierre es opcional en cierto sentido, ya que el analizador HTML seguirá viendo espacios en blanco como el final de la referencia. Sin embargo, la especificación establece que "debe" terminar con un punto y coma ( w3.org/TR/html5/syntax.html#character-references )
isNaN1247

PS - Todavía agradecería que marca esta como la respuesta - si lo hace sentir esto ha respondido a su pregunta :)
isNaN1247

2

Usé este código decimal Unicode &#8204;y trabajé. más detalles


1
El ancho cero sin unión (que ha vinculado) no es un carácter de espacio. No ocupa espacio y no se trata como un separador de palabras. El único propósito que tiene es evitar que los caracteres adyacentes se unan en una ligadura, lo que a veces es útil en scripts no latinos.
duskwuff -inactive-

1

¿Qué pasa con el carácter de espacio en blanco codificado normal?

&#32;
Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.