Existem outros códigos de espaço em branco, como o & nbsp, para semi-espaços, em-espaços, en-espaços etc. úteis em HTML?


149

Pensando se existem outros códigos disponíveis para uso em um boletim informativo em HTML.

Eu usaria preenchimento de células ou margens, mas sou novo nessa coisa de HTML / CSS e não consigo encontrar uma alteração que afete a linha do título principal e a subcabeça abaixo dela. Sendo um e-mail, hesito em mexer no CSS para obtê-lo da mesma maneira - já que não sei o que os clientes de e-mail não gostam no caminho do CSS, em vez da marcação embutida.

Para o contexto, o modelo que estou usando é o tema Mute do snip do 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>

Todo o email como página da web pode ser visto aqui

Respostas:


381

Sim muitos .

Incluindo mas não limitado a:

  • espaço sem quebra: &#160;ou&nbsp;
  • espaço estreito no-break: &#8239;(nenhuma referência de caractere disponível)
  • en space: &#8194;ou&ensp;
  • em space: &#8195;ou&emsp;
  • Espaço de 3 por em: &#8196;ou&emsp13;
  • Espaço 4 por em: &#8197;ou&emsp14;
  • Espaço 6 por em: &#8198;(nenhuma referência de caractere disponível)
  • espaço da figura: &#8199;ou&numsp;
  • espaço de pontuação: &#8200; ou&puncsp;
  • espaço delgado: &#8201; ou&thinsp;
  • espaço para o cabelo: &#8202; ou&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
O Firefox renderiza todos os espaços acima com a mesma largura, maior que um espaço na fonte, exceto nbsp, onde é renderizado como um espaço e impõe o caractere ininterrupto. Uma verdadeira vergonha. Há casos em que apenas uma personagem vai fazer, por exemplo, quando o preenchimento está sendo controlado ou passado para algo mais com construções comobefore:
fyngyrz

2
@fyngyrz Pelo menos no Firefox 54 no Linux, isso não é mais verdade. Também pode depender da fonte; Eu testei isso no Stack Overflow, onde a família de fontes Arial é usada.
Apenas um aluno

5
Para quem só quer ver como este tipos de espaço em branco parecido com jsfiddle.net/LcLg5u25
Vadim Ovchinnikov

2
O espaço de figuras $numsp;é muito útil para alinhar números, porque o espaço é definido para ser exatamente tão largo quanto um número na mesma fonte.
Rudey

2
O Firefox no Windows está bom agora (v.61).
MSC

13

Existem códigos para outros caracteres de espaço, e os códigos, como tais, funcionam bem, mas os próprios caracteres são caracteres herdados. Eles foram incluídos nos conjuntos de caracteres apenas devido à presença nos dados de caracteres existentes, e não para uso em novos documentos. Para algumas combinações de fonte e versão do navegador, elas podem causar um glifo genérico de caractere irrepresentável. Para detalhes, consulte minha página sobre espaços Unicode .

Portanto, o uso de CSS é mais seguro e permite especificar qualquer quantidade desejada de espaçamento, não apenas as larguras específicas dos espaços de largura fixa. Se você quiser adicionar espaçamento adicional aos seus elementos h2, como me parece, definir o preenchimento nesses elementos (alterar o valor das configurações do preenchimento: 0 que você já possui) deve funcionar bem.


Obrigado, acabei usando o atributo inline <h1 class = "title" style = "margin: 0; margin-left: 2px; padding: 0; font-size: 15px; font-weight: normal; color: # 192c45! Important ; "> Acho que é mais seguro, mesmo que a família de fontes seja Helvetica Neue etc.
wide_eyed_pupil

Mas se eles são herdados e 'incluídos nos conjuntos de caracteres apenas devido à presença nos dados de caracteres existentes', isso significa que eles não irão embora tão cedo. Eu realmente não vejo você argumento. Suponho que alguém 'avançado' o suficiente para procurar 'meios espaços' provavelmente já decidiu que margem ou preenchimento não são apropriados. Eu resolvida (&thinsp;4 PACK&thinsp;)para os meus requisitos - usando margin ou padding seria uma péssima idéia para este
Simon_Weaver

1
@ Simon_Weaver, como descrevo, caracteres de espaço de largura fixa não funcionam de maneira confiável. Eles também são uma ferramenta direta: um conjunto fixo de larguras, embora as larguras reais sejam dependentes da fonte, em oposição a configurações independentes da fonte <span style="padding: 0 0.1em">4 PACK</span>, com liberdade para definir e ajustar os valores.
Jukka K. Korpela

1
Embora seja bastante antigo, "The Trouble With EM 'n EN (e outros personagens obscuros) de Peter K Sheerin" ( alistapart.com/article/emen ) ainda é uma leitura útil sobre este tópico. Em particular - embora isso possa ter melhorado nos últimos 14 anos - o fato de que nem todos os tipos de letra f̶o̶n̶t̶s̶ renderizam os vários espaços corretamente.
Dave Terra

1
Também existem ZERO WIDTH JOINER fileformat.info/info/unicode/char/200d/index.htm e ZERO WIDTH NON JOINEReu costumo usar com mais frequência do que os espaços de largura zero.
Reb.Cabin

9

Não tenho certeza se é a isso que você está se referindo, mas esta é a lista de entidades HTML que você pode usar:

Lista de referências de entidade de caracteres XML e HTML

Usando o conteúdo na coluna 'Nome', você pode envolvê-los em um &e;

Por exemplo &nbsp;, &emsp;etc.


Assim, no contexto de texto marcado (digamos dentro de '<p>' e '</p>', o '&' denota um nome de glifo unicode, certo? Qual é o ';' para que um caractere de espaço não sinalize quando é analisado pelo navegador? #
wide_eyed_pupil

O ponto e vírgula de fechamento é opcional em certo sentido, pois o analisador HTML ainda verá espaços em branco como o final da referência. No entanto, a especificação afirma que você "deve" terminar com um ponto-e-vírgula ( w3.org/TR/html5/syntax.html#character-references )
isNaN1247

PS - Eu ainda gostaria que se você marcar este como a resposta - se você fizer sentir isso tem respondido à sua pergunta :)
isNaN1247

2

Eu usei esse código decimal Unicode &#8204;e trabalhei. mais detalhes


1
O não marceneiro de largura zero (que você vinculou) não é um caractere de espaço. Ele não ocupa espaço e não é tratado como um separador de palavras. O único objetivo que ele tem é impedir que caracteres adjacentes sejam unidos a uma ligadura, o que às vezes é útil em scripts não latinos.
você precisa saber é o seguinte

1

E quanto ao caractere de espaço em branco codificado normal?

&#32;
Ao utilizar nosso site, você reconhece que leu e compreendeu nossa Política de Cookies e nossa Política de Privacidade.
Licensed under cc by-sa 3.0 with attribution required.