Não quebrando não espaço em HTML

https://stackoverflow.com/questions/93171

01-07-2019
|

Pergunta

Eu tenho um aplicativo da Web de boliche que permite a entrada de informações de quadro a quadro bastante detalhada. Uma coisa que permite é rastrear quais pinos foram derrubados em cada bola. Para exibir essas informações, faço parecer um rack de pinos:

o o o o
 o o o
  o o
   o

As imagens são usadas para representar os pinos. Então, para a fila de trás, eu tenho 4 tags IMG, depois uma tag BR. Funciona muito bem ... principalmente. O problema está em pequenos navegadores, como o iemobile. Nesse caso, onde houver 10 ou 11 colunas de maio em uma mesa, e pode haver um rack de pinos em cada coluna, ou seja, tentará encolher o tamanho da coluna para caber na tela, e eu acabo com algo assim :

o o o
  o
o o o
 o o
  o

o o
o o
o o
 o
o o
 o

A estrutura é:

<tr>
    <td>
        <!-- some whitespace -->
        <div class="..."><img .../><img .../><img .../><img .../><br/>...</div>
        <!-- some whitespace -->
    </td>
</tr>

Não há espaço em branco dentro da div. Se você olhar para esta página Em um navegador comum, ele deve ser exibido bem. Se você olhar no iemobile, não.

Alguma dica ou sugestão? Talvez algum tipo de que isso não adicione um espaço?

Acompanhamento/resumo

Eu recebi e tentei várias boas sugestões, incluindo:

Gerar dinamicamente a imagem inteira no servidor. Boa solução, mas realmente não atende à minha necessidade (hospedada no GAE) e um pouco mais de código do que eu gostaria de escrever. Essas imagens também podem ser armazenadas em cache após a primeira geração.
Use a declaração de espaço branco CSS. Boas soluções baseadas em padrões, falha miseravelmente na visão iemobile.

O que acabei fazendo

enforca a cabeça e murmura algo

Sim, está certo, um GIF transparente no topo da div, dimensionado para a largura de que preciso. O código final (simplificado) parece:

<table class="game">
    <tr class="analysis leave">
        <!-- ... -->
        <td> <div class="smallpins"><img class="spacer" src="http://seasrc.th.net/gif/cleardot.gif" /><br/><img src="/img/pinsmall.gif"/><img src="/img/nopinsmall.gif"/><img src="/img/nopinsmall.gif"/><img src="/img/nopinsmall.gif"/><br/><img src="/img/pinsmall.gif"/><img src="/img/pinsmall.gif"/><img src="/img/nopinsmall.gif"/><br/><img src="/img/nopinsmall.gif"/><img src="/img/nopinsmall.gif"/><br/><img src="/img/nopinsmall.gif"/></div> </td>
        <!-- ... -->
    </tr>
</table>

E CSS:

div.smallpins {
    background: url(/img/lane.gif) repeat;
    text-align: center;
    padding:0;
    white-space: nowrap;
}
div.smallpins img {
    width:1em;
    height:1em;
}
div.smallpins img.spacer {
    width:4.5em;
    height:0px;
}
table.game tr.leave td{
    padding:0;
    margin:0;
}
table.game tr.leave .smallpins {
    min-width:4em;
    white-space: nowrap;
    background: none;
}

PS Não, eu não estarei procurando o ponto claro de outra pessoa na minha solução final :)

Solução

Você pode experimentar a opção "Nowrap" CSS na div.

{white-space: nowrap;}

Não tenho certeza de quão amplamente é suportado.

Outras dicas

Já resolvi esse tipo de problema criando dinamicamente a imagem inteira (com a disposição de pinos apropriada) como uma única imagem.Se você estiver usando ASP.NET, isso é muito fácil de fazer com chamadas GDI.Você apenas cria a imagem dinamicamente com posicionamento de alfinete e, em seguida, veicula a página como uma única imagem.Tira todos os problemas de alinhamento de cena (trocadilho intencional).

Por que não ter uma imagem de todos os resultados possíveis para os pins?Sem mexer com layouts para navegadores, uma imagem é uma imagem

Gere-os instantaneamente, armazenando em cache as imagens criadas para reutilização.

O que faria mais sentido é mudar a imagem exibida instantaneamente:

<div id="pin-images">
    <img src="fivepins.jpg" />
    <img src="fourpins.jpg" />
    <img src="threepins.jpg" />
    <img src="twopins.jpg" />
    <img src="onepin.jpg" />
</div>

Já que você está usando imagens de qualquer maneira, por que não gerar uma imagem representando todo o layout na hora?Você pode usar algo como GD ou ImagemMagick para fazer o truque.

Adicione um "nowrap" na sua tag td...

Já que você busca compatibilidade máxima, já pensou em gerar uma única imagem representando o quadro?

Se estiver usando PHP, você pode usar GD para criar dinamicamente imagens representando os frames com base na mesma entrada que usaria para criar o HTML em sua pergunta.A maior vantagem de fazer isso é que qualquer navegador que possa exibir um PNG ou GIF poderá exibir seu quadro.

Isso já está aqui há algum tempo, mas eu estava passando por isso e encontrei este post.Não importa o que eu fizesse, não conseguia colocar as imagens em sequência.Não importa o que acontecesse, eles iriam embrulhar.Eu tentei de tudo.

Então descobri que existe uma configuração no cliente onde eles podem selecionar a visualização como 1) Coluna única, 2) Visualização da área de trabalho e 3) Ajustar janela.De acordo com o MSDN, o padrão é caber na janela.Mas o telefone móvel IE da minha esposa estava padronizado para coluna única.ENTÃO NÃO IMPORTA O QUE SEJA, isso agruparia tudo em uma única coluna.Se eu mudasse para qualquer uma das outras 2 opções, parecia bom.

Bem, você pode definir isso com uma meta tag:

<meta name="MobileOptimized" content="320">

definirá a largura da página para 320px.Não sei como fazer isso ir para o modo automático, se alguém souber, por favor poste.

Isso NÃO funciona em blackberry anteriores à v4.6 - você fica preso a uma única coluna, a menos que o usuário mude manualmente para a visualização da área de trabalho.Com 4.6 ou posterior, o seguinte deve funcionar, mas não testei:

<meta name="viewport" content="width=320">

Você pode precisar de um espaço real imediatamente após o ponto e vírgula em

Experimente com o <div> tag na mesma linha que <td>...</td>

Posso ter entendido mal o que você procura, mas acho que você pode fazer o que eu fiz para logotipos em um mapa.

O bloco de fundo do mapa é desenhado e cada imagem é instruída a flutuar para a esquerda e recebe algumas margens interessantes para que sejam posicionadas como eu quero (veja a fonte para ver como isso é feito).

Use o caractere de junção de palavras, U+2060 (ou seja, ⁠)

Talvez este seja apenas um caso em que você poderia usar tabelas para impor o layout.Não é o ideal e sei que você não deve usar tabelas para coisas que não são tabulares, mas você poderia fazer algo assim.

<table>
<tr>
<td><img src="Pin.jpg"></td>
<td>&nbsp;</td>
<td><img src="Pin.jpg"></td>
<td>&nbsp;></td>
<td><img src="Pin.jpg"></td>
<td>&nbsp;</td>
<td><img src="Pin.jpg"></td>
</tr>
<tr>
<td>&nbsp;</td>
<td><img src="Pin.jpg"></td>
<td>&nbsp;</td>
<td><img src="Pin.jpg"></td>
<td>&nbsp;</td>
<td><img src="Pin.jpg"></td>
<td>&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td><img src="Pin.jpg"></td>
<td>&nbsp;</td>
<td><img src="Pin.jpg"></td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td><img src="Pin.jpg"></td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
</table>

Você tentou definir uma largura para a coluna?Como <td width="123px"> ou <td style="width:123px">.E talvez também para o div?

Aí está o nobr etiqueta HTML;não tenho certeza de quão bem suportado isso é.
Você poderia usar css estouro: visível e espaços ininterruptos entre seus elementos (imagens), mas nenhum outro espaço em branco no html para essas linhas.

Tenha imagens separadas para cada arranjo possível de cada linha.

Isso exigiria apenas 30 imagens (16+8+4+2)

Você pode substituir img por span e usar uma imagem de fundo com cada span, dependendo da classe CSS:

<p class="..."><span class="pin"></span><span>&nbsp;</span><span class="pin"></span>...
<p class="..."><span class="pin"></span><span>&nbsp;</span><span class="pin"></span>...
<p class="..."><span class="pin"></span><span>&nbsp;</span><span class="pin"></span>...
<p class="..."><span class="pin"></span><span>&nbsp;</span><span class="pin"></span>...

(pessoalmente acho melhor ter 4 linhas com uma tag p em vez de uma única div com br)

O em CSS você pode ter algo assim:

p.smallpins {
    margin: 0;
    padding: 0;
    height: 11px;
    font-size: 1px;
}
p.smallpins span {
    width: 11px;
    background-image: url(nopinsmall.gif);
    background-repeat: ...
    background-position: ...
}
p.smallpins span.pin {
    background-image: url(pinsmall.gif);
}

Não seria mais fácil se você fizesse assim?

<div id="container">
  <div id="row1">
    <img/><img/><img/><img/>
  </div>
  <div id="row2">
    <img/><img/><img/>
  </div>
  <div id="row3">
    <img/><img/>
  </div>
  <div id="row4">
    <img/>
  </div>
</div>

Por onde seu CSS lidaria com o alinhamento?

.container div{
  text-align:center;
}

Licenciado em: CC-BY-SA com atribuição

Não afiliado a StackOverflow