Właściwości tekstu. Dodał Administrator środa, 10 marzec :04

Transkrypt

1 Tematy: Poziome wyrównanie tekstu Pionowe wyrównanie tekstu Wcięcie testu Dekoracja tekstu Przekształcanie tekstu Odstępy między literami Odstępy między wyrazami Odstępy między liniami Pusta przestrzeń Tekst, a dokładniej bloki tekstu na naszej stronie mogą być formatowane przez kaskadowe arkusze stylów. Już pierwsza specyfikacja zawierała szeroki zestaw poleceń związanych z wyglądem bloków tekstu na stronie. Mamy możliwość określania: - wyrównania tekstu, - odstępu pomiędzy wyrazami i literami, - wcięcia tekstu, - dekoracji tekstu, - odstępu pomiędzy wierszami, - właściwości spacji w tekście. Poziome wyrównanie tekstu text-align left right center justify inherit wyrównanie do lewej strony p text-align:left; Tak 1 / 17

2 Opera, Mozilla Firefox, MS Internet Explorer, Chrome, Safari Blok tekstu, podobnie jak to ma miejsce w dowolnym edytorze tekstu, może być wyrównany do strony lewej, prawej, do środka lub do prawej i lewej strony jednocześnie opcja ta nosi nazwę justowania. Odpowiednie polecenia, które należy wpisać do arkusza, wyglądają następująco: <p style="text-align:left">ten akapit jest wyrównany do lewej strony.</p> <p style="text-align:right">ten akapit jest wyrównany do prawej strony.</p> <p style="text-align:center">ten akapit jest wyśrodkowany.</p> <p style="text-align:justify">ten akapit jest wyrównany do lewej i prawej strony.</p> Poniżej znajduje się efekt działania powyższego kodu. <h3>przykład działania: text-align:left</h3> <p style="text-align:left">lorem ipsum dolor sit amet, consectetur adipiscing elit.</p> <h3>przykład działania: text-align:right</h3> <p style="text-align:right">lorem ipsum dolor sit amet, consectetur adipiscing elit.</p> <h3>przykład działania: text-align:center</h3> <p style="text-align:center">lorem ipsum dolor sit amet, consectetur adipiscing elit.</p> <h3>przykład działania: text-align:justify</h3> <p style="text-align:justify">lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer tempus convallis malesuada. Sed eu mattis dolor. Donec in lacinia diam. Nulla felis risus, ultricies nec placerat vel, venenatis in purus. Sed sem nisl, scelerisque non accumsan a, dapibus ac lacus. Vivamus eu imperdiet ligula. Duis porttitor lacus et dui feugiat rhoncus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Aliquam posuere lacus et augue suscipit dignissim. Pellentesque sollicitudin dolor at massa sollicitudin non vulputate odio congue. Aenean eu justo sit amet augue accumsan aliquam. Nam scelerisque sodales odio. Vivamus ut mattis sapien. Sed rhoncus nisi nec arcu facilisis rhoncus. </p> Polecenie text-align służy do wyrównania elementów blokowych, takich jak: <P>, <DIV> czy <BLOCKQUOTE>, <PRE> oraz elementy od <H1> do <H6> i <HR>. Do wyrównania całej tabeli lub obrazka wykorzystujemy inne 2 / 17

3 polecenia. Pionowe wyrównanie tekstu vertical-align baseline sub super bottom text-bottom middle top text-top wartość liczbowa wartość procentowa inherit wyrównanie do dołu p vertical-align: super; Tak Opera, Mozilla Firefox, MS Internet Explorer, Chrome, Safari Za pomocą kaskadowych arkuszy stylów możemy pozycjonować elementy w pionie. Innymi słowy, można np. spróbować wyśrodkować w pionie dowolny tekst na stronie WWW. Taki rodzaj formatowania umożliwia polecenie vertical-align. <p>pozycjonowanie pionowe<span style="vertical-align:baseline;"> - vertical-align:baseline</span></p> <p>pozycjonowanie pionowe<span style="vertical-align:sub;"> - vertical-align:sub</span></p> <p>pozycjonowanie pionowe<span style="vertical-align:super;"> - vertical-align:super</span></p> <p>pozycjonowanie pionowe<span style="vertical-align:bottom;"> - vertical-align:bottom</span></p> <p>pozycjonowanie pionowe<span style="vertical-align:text-bottom;"> - vertical-align:text-bottom</span></p> <p>pozycjonowanie pionowe<span style="vertical-align:middle;"> - vertical-align:middle</span></p> <p>pozycjonowanie pionowe<span style="vertical-align:top;"> - vertical-align:top</span></p> <p>pozycjonowanie pionowe<span style="vertical-align:text-top;"> - vertical-align:text-top</span></p> 3 / 17

4 Poniżej zamieściłem prosty przykład działania pozycjonowania pionowego. <div class="przyklad" style="font-size:25pt;"> <p>pozycjonowanie pionowe<span style="vertical-align:baseline; font-size:10pt; color:red;"> - vertical-align:baseline</span></p> <p>pozycjonowanie pionowe<span style="vertical-align:sub; font-size:10pt; color:red;"> - vertical-align:sub</span></p> <p>pozycjonowanie pionowe<span style="vertical-align:super; font-size:10pt; color:red;"> - vertical-align:super</span></p> <p>pozycjonowanie pionowe<span style="vertical-align:bottom; font-size:10pt; color:red;"> - vertical-align:bottom</span></p> <p>pozycjonowanie pionowe<span style="vertical-align:text-bottom; font-size:10pt; color:red;"> - vertical-align:text-bottom</span></p> <p>pozycjonowanie pionowe<span style="vertical-align:middle; font-size:10pt; color:red;"> - vertical-align:middle</span></p> <p>pozycjonowanie pionowe<span style="vertical-align:top; font-size:10pt; color:red;"> - vertical-align:top</span></p> <p>pozycjonowanie pionowe<span style="vertical-align:text-top; font-size:10pt; color:red;"> - vertical-align:text-top</span></p> Pionowe pozycjonowanie musi być zastosowane wewnątrz innego elementu i tylko wtedy działa poprawnie. Jeżeli w kodzie strony zostanie umieszczony jeden akapit i nic więcej, następnie wpiszemy styl pozycjonujący wspomniany element na środku okna w pionie, to taka konstrukcja niestety nie zadziała. Natomiast jeżeli akapit będzie znajdował się wewnątrz tabeli zajmującej całą wysokość okna, to tekst znajdzie się na środku. Przyjrzyjmy się poniższemu przykładowi. <table border="1" width="300" height="300"> 4 / 17

5 <tr> </tr> <td> <p style="vertical-align:middle;">przykładowy tekst.</p> </td> </table> <table border="1" width="300" height="300"> <tr> </tr> <td> <p style="text-align:center;vertical-align:middle;">przykładowy tekst.</p> </td> </table> Wcięcie tekstu text-indent wartość liczbowa wartość procentowa inherit 0 p text-indent:3pt; 5 / 17

6 Tak Opera, Mozilla Firefox, MS Internet Explorer, Chrome, Safari Kolejną operacją na tekście, którą możemy przeprowadzić za pomocą kaskadowych arkuszy stylów, jest jego wcięcie. Mam tutaj na myśli wcięcie pierwszej linii bloku tekstu, jak to możemy spotkać w niektórych książkach czy artykułach. Dzięki takiemu formatowaniu dokument wygląda znacznie bardziej interesująco i profesjonalnie. <p style="text-indent:1cm;"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer tempus convallis malesuada. Sed eu mattis dolor. Donec in lacinia diam. Nulla felis risus, ultricies nec placerat vel, venenatis in purus. Sed sem nisl, scelerisque non accumsan a, dapibus ac lacus. Vivamus eu imperdiet ligula. Duis porttitor lacus et dui feugiat rhoncus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Aliquam posuere lacus et augue suscipit dignissim. Pellentesque sollicitudin dolor at massa sollicitudin non vulputate odio congue. Aenean eu justo sit amet augue accumsan aliquam. Nam scelerisque sodales odio. Vivamus ut mattis sapien. Sed rhoncus nisi nec arcu facilisis rhoncus. </p> <p style="text-indent:1cm;"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer tempus convallis malesuada. Sed eu mattis dolor. Donec in lacinia diam. Nulla felis risus, ultricies nec placerat vel, venenatis in purus. Sed sem nisl, scelerisque non accumsan a, dapibus ac lacus. Vivamus eu imperdiet ligula. Duis porttitor lacus et dui feugiat rhoncus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Aliquam posuere lacus et augue suscipit dignissim. Pellentesque sollicitudin dolor at massa sollicitudin non vulputate odio congue. Aenean eu justo sit amet augue accumsan aliquam. Nam scelerisque sodales odio. Vivamus ut mattis sapien. Sed rhoncus nisi nec arcu facilisis rhoncus. </p> Specyfikacja CSS dopuszcza możliwość definiowania wcięcia dla tekstu o wartości ujemnej. P text-indent:-1cm; 6 / 17

7 <div class="przyklad" style="margin-left:2cm;"> <p style="text-indent:-1cm;"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer tempus convallis malesuada. Sed eu mattis dolor. Donec in lacinia diam. Nulla felis risus, ultricies nec placerat vel, venenatis in purus. Sed sem nisl, scelerisque non accumsan a, dapibus ac lacus. Vivamus eu imperdiet ligula. Duis porttitor lacus et dui feugiat rhoncus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Aliquam posuere lacus et augue suscipit dignissim. Pellentesque sollicitudin dolor at massa sollicitudin non vulputate odio congue. Aenean eu justo sit amet augue accumsan aliquam. Nam scelerisque sodales odio. Vivamus ut mattis sapien. Sed rhoncus nisi nec arcu facilisis rhoncus. </p> Pamiętaj o tym, że definicja ujemnej wartości wcięcia tekstu w dokumencie o domyślnych marginesach spowoduje we wszystkich przeglądarkach obcięcie wystającego fragmentu pierwszej linii. Będzie to spowodowane tym, że tekst nie zmieści się w oknie przeglądarki. Rozwiązaniem tego problemu może być określenie marginesów dla tworzonego dokumentu. Opis odpowiednich poleceń związanych z marginesami znajduje się w dalszej części kursu. Dekoracja tekstu text-decoration none underline overline line-through blink inherit none p text-decoration:underline; Nie Pełna obsługa: Opera, Mozilla Firefox, Częściowa obsługa: Internet Explorer, Chrome i Safari (nie działa blink) Kaskadowe arkusze stylów pozwalają dowolnie dekorować tekst. Specyfikacja przypisała to zadanie do polecenia 7 / 17

8 text-decoration i określa kilka sposobów dekoracji. Dopuszczalne metody dekoracji tekstu to podkreślenie, nadkreślenie, przekreślenie oraz miganie, które nie działa w przeglądarkach MS Internet Explorer. <h1 style="text-decoration:underline;">podkreślony nagłówek</h1> <h1 style="text-decoration:overline;">nadkreślony nagłówek</h1> <h1 style="text-decoration:line-through;">przekreślony nagłówek</h1> <h1 style="text-decoration:blink;">migający nagłówek</h1> <h1 style="text-decoration:underline;">podkreślony nagłówek</h1> <h1 style="text-decoration:overline;">nadkreślony nagłówek</h1> <h1 style="text-decoration:line-through;">przekreślony nagłówek</h1> <h1 style="text-decoration:blink;">migający nagłówek</h1> Dekoracja tekstu bardzo często bywa wykorzystywana do usuwania podkreśleń z odsyłaczy, np. A text-decoration:none; A:hover text-decoration:underline; color:red; <html> <head> <style type="text/css"> 8 / 17

9 A text-decoration:none; A:hover text-decoration:underline; color:red; </style> </head> <body> <a href=" Danowski</a> </body> </html> Przekształcanie tekstu text-transform capitalize uppercase lowercase none inherit none p text-transform: uppercase; Tak 9 / 17

10 Opera, Mozilla Firefox, MS Internet Explorer, Chrome, Safari Podczas składania stron WWW od czasu do czasu bywa tak, że wpiszemy tekst, po czym chcemy go wyróżnić, np. przez zamianę wszystkich małych liter na duże. W przypadku popularnych edytorów tekstu, takich jak MS Word, niezbędne narzędzie jest wbudowane w sam program, dzięki czemu raz wprowadzonego tekstu nie musimy przepisywać, by go zmienić. Twórcy stron w swoim przyborniku mają kaskadowe arkusze stylów, które pozwalają nie tylko na zmianę wielkości liter, ale też na uzyskanie kapitalików. <p style="text-transform:none;">przykładowy tekst bez transformacji.</p> <p style="text-transform:lowercase;">przykładowy tekst poddany transformacji.</p> <p style="text-transform:uppercase;">przykładowy tekst poddany transformacji.</p> <p style="text-transform:capitalize;">przykładowy tekst poddany transformacji.</p> <div class="przyklad" style="margin-left:2cm;color:red;"> <h3 style="margin-left:-2cm;color:black;">przykład działania: text-transform:none</h3> <p style="text-transform:none;">przykładowy tekst bez transformacji.</p> <h3 style="margin-left:-2cm;color:black;">przykład działania: text-transform:lowercase</h3> <p style="text-transform:lowercase;">przykładowy tekst poddany transformacji.</p> <h3 style="margin-left:-2cm;color:black;">przykład działania: text-transform:uppercase</h3> <p style="text-transform:uppercase;">przykładowy tekst poddany transformacji.</p> <h3 style="margin-left:-2cm;color:black;">przykład działania: text-transform:capitalize</h3> <p style="text-transform:capitalize;">przykładowy tekst poddany transformacji.</p> Odstępy pomiędzy literami letter-spacing normal długość inherit 10 / 17

11 normal pletter-spacing:3pt; Tak Opera, Mozilla Firefox, MS Internet Explorer, Chrome, Safari Kolejnym ciekawym rozwiązaniem oferowanym przez kaskadowe arkusze stylów jest możliwość sterowania odstępami pomiędzy literami, z których składa się słowo. Do określania odstępów pomiędzy literami służy polecenie letter-spacing. <p style="letter-spacing:3pt;">przykładowy tekst z większymi odstępami pomiędzy literami.</p> <p style="letter-spacing:3pt;">przykładowy tekst z większymi odstępami pomiędzy literami.</p> Odstępy pomiędzy literami mogą przybrać wartości ujemne. <p style="letter-spacing:-3pt;">przykładowy tekst z większymi odstępami pomiędzy literami.</p> <p style="letter-spacing:-1pt;">przykładowy tekst z większymi odstępami pomiędzy literami.</p> Do określania odstępów pomiędzy literami możemy używać dowolnych jednostek, które zostały omówione we wstępie do kursu, dlatego też nic nie stoi na przeszkodzie, by utworzyć definicje stylów widoczne poniżej. P 11 / 17

12 letter-spacing:1cm; DIV letter-spacing:10px; Regulacja odstępów pomiędzy literami powinna być przeprowadzana z głową, gdyż zbyt duża wartość może spowodować bałagan na stronie. Również sam tekst na tym ucierpi i stanie się nieczytelny, gdy odstęp pomiędzy literami zbliży się do odstępów pomiędzy poszczególnymi wyrazami. Specyfikacja kaskadowych arkuszy stylów pozwala nam w dowolnym momencie na wyłączenie dziedziczonego stylu odpowiadającego za regulację odstępów. H1 letter-spacing:normal; Odstępy pomiędzy wyrazami word-spacing normal długość inherit normal pword-spacing:3pt; Tak Opera, Mozilla Firefox, MS Internet Explorer, Chrome, Safari 12 / 17

13 Wiemy już, że kaskadowe arkusze stylów pozwalają na regulację odstępów pomiędzy literami, a teraz zobaczymy, w jaki sposób można regulować odstępy pomiędzy wyrazami wchodzącymi w skład bloku. <p style="word-spacing:3pt;">przykładowy tekst z większymi odstępami pomiędzy wyrazami.</p> <p style="word-spacing:3pt;">przykładowy tekst z większymi odstępami pomiędzy wyrazami.</p> Odstępy pomiędzy wyrazami mogą przybrać wartości ujemne. <p style="word-spacing:-3pt;">przykładowy tekst z mniejszymi odstępami pomiędzy wyrazami.</p> <p style="word-spacing:-3pt;">przykładowy tekst z większymi odstępami pomiędzy wyrazami.</p> Do określania odstępów pomiędzy wyrazami możemy używać dowolnych jednostek, które zostały omówione we wstępie do kursu, dlatego też nic nie stoi na przeszkodzie, by utworzyć definicje stylów widoczne poniżej. P word-spacing:1cm; DIV word-spacing:10px; Regulacja odstępów pomiędzy wyrazami powinna być przeprowadzana z głową, gdyż zbyt duża wartość może spowodować bałagan na stronie. Również sam tekst na tym ucierpi i stanie się nieczytelny, gdy odstęp pomiędzy wyrazami zbliży się do odstępów pomiędzy poszczególnymi literami. Specyfikacja kaskadowych arkuszy stylów pozwala nam na wyłączenie w dowolnym momencie dziedziczonego stylu odpowiadającego za regulację odstępów. 13 / 17

14 H1 word-spacing:normal; Odstęp między liniami line-height normal wielokrotność wysokości czcionki procent wysokości czcionki inherit normal pline-height:100%; Tak Opera, Mozilla Firefox, MS Internet Explorer, Chrome, Safari Kaskadowe arkusze stylów pozwalają na regulację odstępu pomiędzy poszczególnymi wierszami tekstu wchodzącymi w skład bloku. Dzięki tej przydatnej funkcji możemy rozluźnić publikowany tekst na stronie, co spowoduje, iż będzie on zajmował więcej miejsca i stanie się bardziej przejrzysty. <p style="line-height:200%;">przykładowy tekst z większymi odstępami pomiędzy wierszami. Przykładowy tekst z większymi odstępami pomiędzy wierszami. Przykładowy tekst z większymi odstępami pomiędzy wierszami.</p> <p style="line-height:200%;width:300px;">przykładowy tekst z większymi odstępami pomiędzy wierszami. Przykładowy tekst z większymi odstępami pomiędzy wierszami. Przykładowy tekst z większymi odstępami pomiędzy wierszami.</p> 14 / 17

15 Do określania szerokości odstępów pomiędzy wierszami można używać jednostek procentowych, liczbowych oraz długości. Jeżeli zdecydujemy się na wielkości procentowe, należy pamiętać o tym, że są one obliczane względem wielkości czcionki. Jeżeli czcionka ma 14 punktów i ustawimy odstęp 200%, to w praktyce wyniesie on 28 punktów. Odstęp pomiędzy wierszami jest liczony w następujący sposób. Zdefiniowana wartość odstępu jest dzielona na pół i dodawana nad linią i pod linią. Jeżeli określimy wysokość przerwy pomiędzy liniami na jeden centymetr, to w praktyce nad linią zostanie dodane pół centymetra i tyle samo pod nią. Oczywiście przerwa będzie wynosiła nadal jeden centymetr, gdyż w bloku tekstu odstęp pod linią będzie się sumował z odstępem nad linią znajdującą się poniżej. Podczas określania szerokości przerwy pomiędzy wierszami nie można używać wartości ujemnych, gdyż taka definicja nie działa we wszystkich przeglądarkach. Dodatkowo występują jeszcze inne problemy, gdy zdefiniujemy nieduże wartości przerwy, np. 0,1. Dokładniej mówiąc, chodzi o to, że tekst nachodzi na siebie i staje się nieczytelny. <p style="line-height:0.1px;width:300px;">przykładowy tekst z większymi odstępami pomiędzy wierszami. Przykładowy tekst z większymi odstępami pomiędzy wierszami. Przykładowy tekst z większymi odstępami pomiędzy wierszami.</p> Pusta przestrzeń white-space normal pre nowrap pre-wrap pre-line inherit normal pwhite-space:nowrap; Tak 15 / 17

16 Opera, Mozilla Firefox, MS Internet Explorer, Chrome, Safari Z formatowaniem spacji wstawianych do dokumentu związana jest bardzo ciekawa i przydatna opcja. Pamiętamy, iż język XHTML/HTML ignorował dodatkowe spacje wyświetlał zawsze tylko jedną. Wymuszenie spacji w języku XHTML/HTML polegało na umieszczeniu twardej spacji. Rozwiązanie to nie należało do najwygodniejszych, ale czasami z konieczności było stosowane. Innym rozwiązaniem było zamknięcie bloku tekstu w archaicznym znaczniku <PRE></PRE>, który wymuszał na przeglądarce, by pokazała tekst dokładnie tak, jak go wprowadziliśmy do dokumentu. Kaskadowe arkusze stylów wprowadzają bardzo wygodne rozwiązanie pozwalające bezproblemowo manipulować spacją. Wartość normal przeglądarka automatycznie pomija dodatkowe spacje. Działa w każdej przeglądarce. <p style="white-space:normal;">przykładowy tekst z dodatkowymi spacjami wstawionymi pomiędzy słowa.</p> Wartość pre przeglądarka automatycznie uznaje i pokazuje wszystkie dodatkowe spacje. Działa w każdej nowej przeglądarce, ale w przeszłości starsze wersje MS Internet Explorer nie obsługiwały tego stylu. <p style="white-space:pre;">przykładowy tekst z dodatkowymi spacjami wstawionymi pomiędzy słowa.</p> Wartość nowrap przeglądarka blokuje automatyczne łamanie wiesza aż do chwili, gdy napotka znacznik <br />. Działa w każdej przeglądarce. <p style="white-space:nowrap;">przykładowy tekst z dodatkowymi spacjami wstawionymi pomiędzy słowa.<br /> Przykładowy tekst z dodatkowymi spacjami wstawionymi pomiędzy słowa. </p> Wartość pre-wrap przeglądarka zachowuje wszystkie dodatkowe spacje, a łamanie wiersza następuje tylko w sytuacji, gdy jest to potrzebne. Styl ten działa w każdej nowej przeglądarce, ale w przeszłości takie formatowanie obsługiwała jedynie Opera. <p style="white-space:pre-wrap;">przykładowy tekst z dodatkowymi spacjami wstawionymi pomiędzy słowa. Przykładowy tekst z dodatkowymi spacjami wstawionymi pomiędzy słowa. Przykładowy tekst z dodatkowymi spacjami wstawionymi pomiędzy słowa.</p> Przeglądarka ignoruje dodatkowe spacje. Dodatkowo tekst jest łamany w sposób automatyczny w zależności od potrzeby i w miejscach oznaczonych za pomocą znacznika <br />. <p style="white-space:pre-line;">przykładowy tekst z dodatkowymi spacjami wstawionymi pomiędzy słowa. Przykładowy tekst z dodatkowymi spacjami wstawionymi pomiędzy słowa. Przykładowy tekst z dodatkowymi spacjami wstawionymi pomiędzy słowa.</p> <h3>przykład działania white-space:normal</h3> <p style="white-space:normal;">przykładowy tekst z dodatkowymi spacjami wstawionymi pomiędzy słowa.</p> <h3>przykład działania white-space:pre</h3> 16 / 17

17 <p style="white-space:pre ;">Przykładowy tekst z dodatkowymi spacjami wstawionymi pomiędzy słowa.</p> <h3>przykład działania white-space:nowrap</h3> <p style="white-space:nowrap;">przykładowy tekst z dodatkowymi spacjami wstawionymi pomiędzy słowa. Przykładowy tekst z dodatkowymi spacjami wstawionymi pomiędzy słowa. Przykładowy tekst z dodatkowymi spacjami wstawionymi pomiędzy słowa.<br>przykładowy tekst z dodatkowymi spacjami wstawionymi pomiędzy słowa.</p> <h3>przykład działania white-space:pre-wrap</h3> <p style="white-space:pre-wrap;">przykładowy tekst z dodatkowymi spacjami wstawionymi pomiędzy słowa. Przykładowy tekst z dodatkowymi spacjami wstawionymi pomiędzy słowa. Przykładowy tekst z dodatkowymi spacjami wstawionymi pomiędzy słowa. Przykładowy tekst z dodatkowymi spacjami wstawionymi pomiędzy słowa.</p> <h3>przykład działania white-space:pre-line</h3> <p style="white-space:pre-line;">przykładowy tekst z dodatkowymi spacjami wstawionymi pomiędzy słowa. Przykładowy tekst z dodatkowymi spacjami wstawionymi pomiędzy słowa. Przykładowy tekst z dodatkowymi spacjami wstawionymi pomiędzy słowa. Przykładowy tekst z dodatkowymi spacjami wstawionymi pomiędzy słowa.</p> 17 / 17