Znacznik pre w HTML-u

Stronę tą wyświetlono już: 229 razy

Wstawianie znacznika <pre> na stronie

Znacznik ten umożliwia wstawienie tekstu wraz z poprawną interpretacją znaków białych (spacji, tabulatorów, znaków nowej linii). Dane wypisywane w tym znaczniku są domyślnie czcionką o stałej szerokości znaków. Oto przykład użycia tego znacznika:

Listing 1
  1. <blockquote cite="Adam Mickiewicz - fragment Reduty Ordona"><pre>Nam strzelać nie kazano.
  2. - Wstąpiłem na działo
  3. I spojrzałem na pole;
  4. dwieście armat grzmiało.
  5. Artyleryji ruskiéj ciągną się szeregi,
  6. Prosto, długo, daleko, jako morza brzegi;
  7. I widziałem ich wodza;
  8. - przybiegł, mieczem skinął,
  9. I jak ptak jedno skrzydło wojska swego zwinął.
  10. Wylewa się z pod skrzydła ściśniona piechota
  11. Długą, czarną kolumną, jako lawa błota,
  12. Nasypana iskrami bagnetów. Jak sępy,
  13. Czarne chorągwie na śmierć prowadzą zastępy.
  14. Przeciw nim sterczy biała, wąska, zaostrzona,
  15. Jak głaz, bodzący morze, reduta Ordona.
  16. Sześć tylko miała harmat. Wciąż dymią i świecą;
  17. I nie tyle prędkich słów gniewne usta miecą,
  18. Nie tyle przejdzie uczuć przez duszę w rozpaczy,
  19. Ile z tych dział leciało bomb, kul i kartaczy.</pre></blockquote>

Jak widać, w powyższym przykładzie wykorzystano znacznik <pre> do wyświetlenia fragmentu Reduty Ordona. Oto wynik:

Nam strzelać nie kazano.
- Wstąpiłem na działo
I spojrzałem na pole;
dwieście armat grzmiało.
Artyleryji ruskiéj ciągną się szeregi,
Prosto, długo, daleko, jako morza brzegi;
I widziałem ich wodza;
- przybiegł, mieczem skinął,
I jak ptak jedno skrzydło wojska swego zwinął.
Wylewa się z pod skrzydła ściśniona piechota
Długą, czarną kolumną, jako lawa błota,
Nasypana iskrami bagnetów. Jak sępy,
Czarne chorągwie na śmierć prowadzą zastępy.
Przeciw nim sterczy biała, wąska, zaostrzona,
Jak głaz, bodzący morze, reduta Ordona.
Sześć tylko miała harmat. Wciąż dymią i świecą;
I nie tyle prędkich słów gniewne usta miecą,
Nie tyle przejdzie uczuć przez duszę w rozpaczy,
Ile z tych dział leciało bomb, kul i kartaczy.

Znacznik ten można zastąpić zwykłym znacznikiem nowego akapitu z odpowiednio ustawionym stylem traktowania białych znaków.

Style dla znacznika <pre>

Oto najczęściej przydatne style dla tego znacznika:

Listing 2
  1. pre{
  2. white-space: normal|nowrap|pre|pre-line|pre-wrap|initial|inherit; /* steruje, w jaki sposób interpretowane są białe znaki i jak zwijany jest tekst */
  3. color: #ff0000; /* kolor czcionki */
  4. background: #ffffaa; /* kolor tła */
  5. padding: 0px;
  6. margin: 0px;
  7. }

Styl white-space przyjmuje następujące wartości:

  • normal - sekwencja białych znaków zamieniana jest na pojedynczy biały znak, a teks będzie zwijany, gdy jest to konieczne (domyślna wartość dla znacznika <p>);
  • nowrap - sekwencja białych znaków zamieniana jest na pojedynczy biały znak a tekst nigdy nie będzie zwijany do następnej linii.
  • pre - białe znaki są zachowywane a tekst będzie zwijany w miejscu wystąpienia znaku nowej linii;
  • pre-line - sekwencja białych znaków zamieniana jest na pojedynczy biały znak, tekst będzie zwijany gdy zajdzie taka konieczność (pomija znak nowej linii \n);
  • pre-wrap - białe znaki są zachowywane przez przeglądarkę, tekst będzie zwijany gdy zajdzie taka konieczność i w miejscu wystąpienia znaku nowej linii \n;
  • initial - ustawia domyślną wartość dla tego elementu;
  • inherit - ustawia wartość, jaką przyjmuje rodzic tego elementu.

Komentarze