Domando a tag PRE

Aldeia Numaboa

Um portal diferente em Português do Brasil

Informática da Aldeia

Tutoriais

Home

Informática

Tutoriais e Programação

Webmaster

Domando a tag PRE

Novo na Info

Na Aldeia

Há 103 visitantes online

3630 registros

0 hoje

14 nesta semana

4 neste mês

Boas vindas: flor

Estatística

Membros: 3639
Artigos: 1045
Links: 90
Leituras: 6680922

Login

Kanji da hora

好

Faça contato

Sáb

Jan

2009

14:05

Domando a tag PRE

(4 votos, média 4.3 de 5)

Escrito por vovó Vicki

Uma das tags que costumo usar com frequência é a <pre>. Durante muito tempo tomei um belo de um baile por não conseguir obter quebras de linha para evitar que textos longos dentro destas tags bagunçassem toda a formatação da página. Agora aprendi como fazer sorriso

O marcador <pre> é uma mão na roda quando se quer que o texto seja apresentado exatamente como escrevemos, respeitando todos os espaços. Para mim, uma das maiores vantagens é quando apresento trechos de código fonte e quero manter a identação das linhas. O HTML, quando encontra dois ou mais espaços, reconhece apenas o primeiro e despreza os restantes. A não ser que se use   para criar espaços adicionais, não tem como obter a identação desejada. Taí a vantagem de se usar a tag <pre>, que nos economiza muita digitação de nbsp e a chatice (e dificuldade) de contar os tais dos espaços. Por exemplo, compare

<pre>

for( $i=0; $i<10; $i++ ) {
   if( $teste == 0 ) {
      return false;
   } else {
      return true;
   }
}
</pre>

com

<pre>
for( $i=0; $i<10; $i++ ) {
   if( $teste == 0 ) {
      return false;
   } else {
      return true;
   }
}
</pre>

Acho que nem é preciso explicar, o visual já falou tudo. Até este ponto, tudo bem. Acontece que os diversos browsers "entendem" a tag <pre> de formas diferentes, especialmente quando se trata de quebra de linha. Tentei de tudo, mas vira e mexe tinha uma supresa: funcionava para o IE, mas não no Firefox 2 e no Opera; funcionava no Opera 6, mas não no Opera 7. Depois de muito fuçar e de colecionar algumas informações, cheguei numa "receita" que, até o momento, está funcionando. Passo-a para vocês:

overflow-x: auto; /* Cria barra de rolagem horizontal se necessário; para Firefox 2, o Firefox 3 não precisa */
white-space: -moz-pre-wrap !important; /* Mozilla, desde 1999; NÃO tire a observação !important; */
white-space: -pre-wrap; /* Opera 4-6 */
white-space: -o-pre-wrap; /* Opera 7 */
white-space: pre-wrap; /* css-3 */
word-wrap: break-word; /* Internet Explorer 5.5+ */

Você pode usar estas propriedades em folhas de estilo (CSS). O estilo pode ser incluído no cabeçalho de cada página ou estar num arquivo à parte que é incorporado às páginas. Por exemplo:

...
<head>
   ...
   <style type="text/css">
      .quebra {
         overflow-x: auto;
         white-space: -moz-pre-wrap !important;
         white-space: -pre-wrap;
         white-space: -o-pre-wrap;
         white-space: pre-wrap;
         word-wrap: break-word;
      }
   </style>
</head>

Depois, em cada marcador <pre> que você quiser, aplique a classe definida na folha de estilos:

<pre class="quebra">
... o texto que você quiser
</pre>

E isto é tudo, por enquanto... quem é que sabe quais serão as surpresas que novas versões de navegadores poderão nos trazer? Até lá, acho que isto quebra um galho.

Abraço da vó Vicki vovo Vicki