20. Formatowanie tekstu w CSS

W poprzednim rozdziale, Czcionki, fonty, kroje pisma w CSS, zostały opisane techniki i własności CSS służące do definiowania i zmieniania różnych właściwości samego pisma, a więc na przykład jego kroju czy grubości i rozmiaru liter.

W tym rozdziale przyjmujemy nieco szerszą perspektywę i zajmujemy się tekstem w ogólniejszym ujęciu, na poziomie całych wyrazów, zdań i akapitów. Opisane tu własności i techniki, podobnie jak te przedstawione w poprzednim rozdziale, pozwalają uczynić tekst czytelniejszym, atrakcyjniejszym i bardziej przystępnym dla odbiorcy.

Zaczniemy od najprostszego tematu, czyli od ustawiania koloru tekstu na stronach internetowych.

Ustawianie koloru tekstu

Definiowanie koloru tekstu w CSS jest bardzo proste, choć dostępne są także zaawansowane narzędzia i techniki definiowania kolorów. Własnością służącą do ustawiania koloru tekstu jest color, ale należy pamiętać, że jej zastosowanie tak naprawdę jest szersze. Nie ogranicza się ono tylko do treści tekstowej stron internetowych, choć do tego używa się jej najczęściej.

W rzeczywistości za pomocą własności color ustawia się kolor pierwszego planu, a więc tekstu i jego elementów ozdobnych, takich jak podkreślenie czy przekreślenie, oraz wartość słowa kluczowego currentcolor aktywnego w danym kontekście i wykorzystywanego jako wartość domyślna przez inne własności określające kolory, takie jak outline-color czy text-emphasis-color. Spójrz na poniższy przykład:

p {
  color: red;
  outline: 1px solid;
}

W tym przypadku akapity będą miały czerwony obrys, ponieważ użyta tu własność zbiorcza outline określa tylko styl (outline-style) i grubość (outline-width) obrysu. To oznacza, że trzecia obejmowana przez nią własność indywidualna (outline-color) przyjmuje wartość domyślną currentcolor, która reprezentuje ustawienie własności color.

Szczególnym przypadkiem w kwestii ustawiania koloru tekstu są fonty kolorowe, które mają specjalne palety kolorów obsługiwane za pomocą własności font-palette i reguły @font-palette-values. Spójrz na poniższy przykład:

@import url('https://fonts.googleapis.com/css2?family=Nabla');
p {
  color: brown;
  outline: 1px solid;
}

Nabla to jeden z fontów kolorowych dostępnych w serwisie Google Fonts. Choć kolor pierwszego planu został ustawiony na brązowy, to napis wyrenderowany przy użyciu tego fontu ze standardowymi ustawieniami będzie miał kolor żółty. Natomiast własność outline normalnie przyjmie wartość ustawioną przez własność color i utworzy brązowy obrys wokół akapitu. Widać to na poniższej ilustracji.

Wysokość wiersza

Wysokość wiersza w CSS to wysokość pola śródliniowego obejmującego fragment tekstu. Przy braku jakichkolwiek innych ustawień to właśnie ona (w połączeniu z liczbą wierszy) decyduje o tym, jaką wysokość ma dany element, choć intuicyjnie można myśleć, że jest to wielkość zależna od rozmiaru tekstu. W rzeczywistości jednak, jeśli wysokość wiersza jest mniejsza od wysokości tekstu, to tekst po prostu wychodzi poza ramy elementu.

Najłatwiej jest to zaobserwować przez ustawienie wysokości wiersza „na sztywno”. Jeśli na przykład rozmiar tekstu ustawimy na 20 pikseli, to przy domyślnym ustawieniu własności line-height, która w większości przeglądarek wynosi około 1.2, wysokość wiersza wyniesie 24 piksele (1,2 × 20). Dzięki temu kolejne linie tekstu nie nachodzą na siebie i są rozdzielone czteropikselowym odstępem (między linią dolną pisma jednego wiersza, a linią górną pisma wiersza następującego po nim), jak widać na poniższej ilustracji:

Do wygenerowania tej ilustracji została użyta poniższa reguła CSS:

p {
  outline: 1px solid red;
  font-size: 20px;
  line-height: 1.2;
}

Każdy z wierszy tekstu w tym przykładzie ma wysokość 24 piksele, a rozmiar pisma wynosi 20 pikseli, dzięki czemu tekst z jednego wiersza nie zachodzi na tekst z poprzedniego. Gdybyśmy jednak zmienili rozmiar tekstu, a wysokość wiersza ustawili „na sztywno” (liczba bez jednostki długości jako wartość własności line-height oznacza mnożnik rozmiaru tekstu), to otrzymalibyśmy całkiem inny efekt. Spójrz na poniższą regułę CSS:

p {
  outline: 1px solid red;
  font-size: 35px;
  line-height: 24px;
}

Tutaj rozmiar tekstu został ustawiony na 35 pikseli, a wysokość wiersza na 24 piksele. W efekcie kolejne wiersze tekstu powinny nachodzić na siebie, mimo że rozmiar samego elementu pozostaje bez zmian (przy założeniu, że nadal są dokładnie dwa wiersze tekstu). Widać to na poniższej ilustracji:

Na tej ilustracji wyraźnie widać, że mniejsza od rozmiaru pisma wysokość wiersza spowodowała zachodzenie na siebie kolejnych linijek tekstu oraz że tekst ten nie mieści się całkowicie w elemencie, którego wysokość wynosi 48 pikseli.

Gdyby wysokość wiersza została ustawiona na 0, to element miałby zerową wysokość, znajdujący się w nim tekst w całości znajdowałby się poza jego granicami i byłby nieczytelny, ponieważ kolejne linijki tekstu byłyby nałożone na siebie:

Cnoty, panie studencie, nie da się dzielić na kawałki: albo jest, albo jej nie ma.

Ustawianie wysokości wiersza

Własność line-height, która służy do ustawiania wysokości wiersza w CSS, przyjmuje różne typy wartości – słowa kluczowe, liczby bez jednostki, liczby z jednostką oraz wartości procentowe.

Zalecanym sposobem ustawiania wysokości wiersza w CSS jest używanie liczby bez jednostki, ponieważ daje ona najbardziej przewidywalny efekt w przypadku dziedziczenia. Wartość ta jest dziedziczona przez elementy potomne w niezmienionej formie. Natomiast liczby z jednostką długości i wartości procentowe są dziedziczone jako wartość obliczona, co może mieć niespodziewane skutki. Spójrz na poniższy przykład.

<style>
aside {
  font-size: 18px;
  line-height: 1.5;
}

h1 {
  font-size: 30px;
}
</style>
...
<aside>
  <h1>Cnoty, panie studencie, nie da się dzielić na kawałki: albo jest, albo jej nie ma.</h1>
</aside>

W tym przypadku element h1 odziedziczy wartość 1.5 własności line-height, a więc jego wysokość wiersza wyniesie 45 pikseli (30 × 1,5) i tekst będzie czytelny:

A teraz spójrz na ten przykład:

<style>
aside {
  font-size: 18px;
  line-height: 1.5em;
}

h1 {
  font-size: 30px;
}
</style>
<aside>
  <h1>Cnoty, panie studencie, nie da się dzielić na kawałki: albo jest, albo jej nie ma.</h1>
</aside>

Jedyna zmiana w tym kodzie w porównaniu z poprzednią wersją to dodatek jednostki em do wartości własności line-height. To spowodowało, że element h1 dziedziczy po elemencie aside konkretną wysokość wiersza, która w tym przypadku wynosi 24 piksele (18 × 1,5), przez co tekst nie wygląda już atrakcyjnie, ponieważ rozmiar pisma jest większy od wysokości wiersza.

Wyrównywanie tekstu

Podstawowym narzędziem do określania sposobu wyrównania tekstu w CSS jest własność text-align. Za jej pomocą tekst można wyrównać do lewej (wartość left) lub do prawej (wartość right), wyjustować (wartość justify) lub wyśrodkować (wartość center), np.:

p {
  text-align: justify;
}

Ta reguła powoduje wyjustowanie zawartości wszystkich akapitów na stronie.

Dodatkową kontrolę nad wyrównaniem tekstu daje własność text-justify, która pozwala na wybór metody justowania, a więc działa tylko wtedy, gdy własność text-align ma wartość justify. Za jej pomocą można wybrać, aby tekst był justowany poprzez zmianę odstępu między wyrazami (wartość inter-word) lub poprzez zmianę odstępu między znakami (wartość inter-character).

Modyfikacja odstępów między wyrazami to metoda typowo stosowana do tekstów w takich językach, jak polski, francuski czy angielski, natomiast modulację odstępów między znakami stosuje się w niektórych językach azjatyckich, na przykład w języku japońskim.

Zawijanie tekstu

W CSS dostępnych jest kilka własności umożliwiających kontrolowanie sposobu zawijania tekstu i przenoszenia wyrazów. Techniki te pozwalają uniknąć przykrych niespodzianek w postaci wyjścia tekstu poza obręb elementu, w którym powinien się znajdować, obcięcia części tekstu tak, że staje się ona niewidoczna, lub pojawienia się niepożądanego poziomego paska przewijania.

Domyślnie prawie wszystkie elementy HTML mogące zawierać tekst mają włączoną możliwość zawijania tekstu (wyjątek stanowi element pre). Jest to logiczne i zgodne z intuicją, ponieważ gdy wprowadzamy tekst na stronę internetową, to z reguły oczekujemy, że po dojściu do końca wiersza nastąpi przejście do następnego wiersza, a nie że pojawi się poziomy pasek przewijania, który pozwoli ciągnąć jeden wiersz w nieskończoność.

Są jednak specyficzne sytuacje, kiedy wolimy, aby tekst nie był przenoszony do następnego wiersza, tylko był w całości pokazany w jednym, nawet za cenę takiej niedogodności, jak pojawienie się paska przewijania. Efekt taki można osiągnąć na kilka sposobów, np. za pomocą własności overflow i white-space. Teraz zajmiemy się tą pierwszą, a druga jest opisana w podrozdziale Dzielenie i przenoszenie wyrazów.

Wyłączanie zawijania tekstu

W nielicznych przypadkach nie chcemy, aby tekst był zawijany, bo jest to na przykład długi adres URL albo wzór chemiczny, który wolimy w całości pokazać w jednym wierszu. W takiej sytuacji możemy wyłączyć zawijanie treści elementu za pomocą własności CSS overflow. Choć nie odnosi się ona specyficznie do tekstu, to jest często używana właśnie po to, aby uniemożliwić jego wychodzenie poza obręb elementu, w którym się on znajduje.

Własność overflow to własność zbiorcza, która obejmuje własności indywidualne overflow-x i overflow-y, odnoszące się odpowiednio do osi poziomej i pionowej elementu. Kiedy ma tylko jedną wartość, to dotyczy ona obu osi na raz.

Powiedzmy na przykład, że na naszej stronie chcemy umieścić nazwę związku chemicznego N-acetylo-N-[5-cyjano-3-(2-dibutyloamino-4-fenylotiazol-5-ilometyleno)-4-metylo-2,6-diokso-1,2,3,6-tetrahydropirydyn-1-ylo]benzamid i nie podoba nam się, że przeglądarka dzieli ją na wiersze.

Z tym problemem poradzimy sobie za pomocą własności overflow o wartości auto. Takie ustawienie sprawia, że treść przekraczająca granicę elementu nie zostaje obcięta ani poza nią nie wychodzi, tylko zostaje wyświetlony odpowiedni, poziomy lub pionowy, pasek przewijania. Spójrz na poniższy przykład:

<style>
.nazwa-chem {
  width: 500px;
  overflow: auto;
}
</style>
...
<div class="nazwa-chem">N&#x2011;acetylo&#x2011;N&#x2011;[5&#x2011;cyjano&#x2011;3&#x2011;(2&#x2011;dibutyloamino&#x2011;4&#x2011;fenylotiazol&#x2011;5&#x2011;ilometyleno)&#x2011;4&#x2011;metylo&#x2011;2,6&#x2011;diokso&#x2011;1,2,3,6&#x2011;tetrahydropirydyn&#x2011;1&#x2011;ylo]benzamid</div>

Ten element p zawiera nazwę naszego związku chemicznego, w której wszystkie znaki łącznika zostały zastąpione encją szesnastkową reprezentującą łącznik niełamliwy, dzięki czemu przeglądarka uzna cały ten łańcuch znaków za niepodzielny. Efekt zastosowania takich ustawień jest następujący:

Ponadto własność overflow umożliwia kontrolę „przepełnienia” elementów na jeszcze kilka innych sposobów. Ich szczegółowy opis znajduje się na stronie Własność CSS overflow.

Innym sposobem postępowania z bardzo długimi wyrazami lub fragmentami treści jest ich skracanie i wstawienie wielokropka. Można to zrobić za pomocą własności text-overflow, nadając jej wartość ellipsis (wielokropek), np.:

p {
  text-overflow: ellipsis;
}

Efekt:

Własność CSS text-overflow może przydać się także po wyłączeniu łamania wierszy lub przenoszenia wyrazów za pomocą własności white-space i hyphens opisanych poniżej.

Kontrola zawijania tekstu

Jeśli odpowiada nam to, że tekst jest zawijany, co ma miejsce pewnie w jakichś 99% przypadków, i chcemy mieć dodatkową pewność, że nawet bardzo długie słowa nie zostaną obcięte ani nie spowodują pojawienia się jakichkolwiek pasków przewijania, to możemy użyć własności overflow-wrap, nadając jej wartość break-word.

To ustawienie powoduje, że jeśli w tekście znajdzie się bardzo długi ciąg znaków bez elementów oznaczających miejsce potencjalnego zawinięcia, takich jak spacje albo łączniki, przeglądarka może dokonać podziału w dowolnym miejscu. Posłużymy się jeszcze raz poprzednim przykładem:

<style>
.nazwa-chem {
  width: 500px;
  overflow-wrap: break-word;
}
</style>
...
<div class="nazwa-chem">N&#x2011;acetylo&#x2011;N&#x2011;[5&#x2011;cyjano&#x2011;3&#x2011;(2&#x2011;dibutyloamino&#x2011;4&#x2011;fenylotiazol&#x2011;5&#x2011;ilometyleno)&#x2011;4&#x2011;metylo&#x2011;2,6&#x2011;diokso&#x2011;1,2,3,6&#x2011;tetrahydropirydyn&#x2011;1&#x2011;ylo]benzamid</div>

W tym przypadku nie mamy nic przeciwko temu, aby nasza nazwa związku chemicznego została podzielona na wiersze, za to nie podoba nam się możliwość pojawienia się poziomego paska przewijania. Efekt zastosowania takiego ustawienia jest następujący:

Dzielenie i przenoszenie wyrazów

Tekst na stronie internetowej może być zawijany tylko w specjalnych miejscach zwanych miękkimi punktami podziału (ang. soft wrap opportunity). Najczęściej używanym z nich jest spacja, która w wielu językach, w tym także w polskim, wyznacza granice między słowami. Dla przeglądarki spacja jest sygnałem, że w danym miejscu kończy się wyraz, więc dalszą część tekstu w razie potrzeby można przenieść do następnego wiersza.

Innym typem znaku miękkiego punktu podziału są specjalne rodzaje łącznika (często błędnie nazywanego myślnikiem). Te znaki również stanowią dla przeglądarki sygnał, że w danym miejscu można złamać wiersz. Istnieją dwa rodzaje „łącznika miękkiego” – jeden z nich jest widoczny cały czas, a drugi staje się widoczny dopiero wtedy, gdy na nim nastąpi przełamanie wiersza. Oba są opisane w sekcji Przenoszenie wyrazów za pomocą łącznika. Teraz jednak zajmiemy się technikami kontrolowania spacji i rodzajami spacji.

Dzielenie wyrazów za pomocą spacji

Istnieje kilka rodzajów spacji. Najczęściej używana jest ta dostępna bezpośrednio na klawiaturze, która w zestawie Unicode ma jednostkę kodową U+0020. Jej szerokość wynosi 1/4 em i może być korygowana na przykład na potrzeby justowania tekstu.

Innym rodzajem spacji jest tzw. spacja o zerowej szerokości (ang. zero-width space), którą reprezentuje encja HTML ​ oraz element HTML wbr. Zgodnie z nazwą jej szerokość jest zerowa, więc w ogóle jej nie widać.

Oba te typy spacji reprezentują miękki punkt podziału, czyli miejsce, w którym w razie potrzeby przeglądarka może złamać wiersz. Różnica między nimi jest oczywista – pierwsza jest znakiem widocznym i służy do oddzielania wyrazów, natomiast druga jest niewidoczna i służy tylko do wskazywania miejsca, w którym potencjalnie można złamać wiersz.

Powiedzmy na przykład, że piszemy kurs programowania w języku Java, w którym opisujemy klasę o bardzo długiej nazwie InternalFrameInternalFrameTitlePaneInternalFrameTitlePaneMaximizeButtonWindowNotFocusedState i chcemy aby w razie potrzeby była ona dzielona tylko w wybranych przez nas miejscach. Przy domyślnych ustawieniach własności overflow, overflow-wrap i white-space nazwa ta będzie niepodzielna, przez co może wyjść poza obręb swojego elementu, jak widać na poniższej ilustracji:

Problem ten można rozwiązać zarówno na poziomie HTML, jak i CSS, a najczęściej stosuje się mieszankę obu. Aby mieć pewność, że wyraz zostanie podzielony dokładnie w tych miejscach, w których chcemy, można je oznaczyć za pomocą spacji o zerowej szerokości, jak widać poniżej:

<!-- Spacja o zerowej szerokości -->
InternalFrame&ZeroWidthSpace;InternalFrameTitlePane&ZeroWidthSpace;InternalFrameTitlePane&ZeroWidthSpace;MaximizeButton&ZeroWidthSpace;WindowNotFocusedState.java

<!-- Element HTML wbr -->
InternalFrame<wbr>InternalFrameTitlePane<wbr>InternalFrameTitlePane<wbr>MaximizeButton<wbr>WindowNotFocusedState.java

Przy domyślnych ustawieniach wymienionych wcześniej własności efekt będzie taki:

Teraz nazwa klasy jest dzielona przez przeglądarkę dokładnie w tych miejscach, w których to zaplanowaliśmy. Jeśli nic nie zmienimy za pomocą własności CSS, nasz tekst będzie wyglądał dokładnie tak, jak chcemy.

Jeżeli jednak za wszelką cenę chcemy, aby wyrazy nie były dzielone nawet w miękkich punktach podziału, możemy użyć własności white-space, która określa sposób traktowania białych znaków. Jeśli nadamy jej wartość nowrap, to wyłączymy możliwość zawijania tekstu na podstawie tych znaków i znów nasz bardzo długi wyraz będzie mógł wyjść poza obręb zawierającego go elementu.

Jeśli więc zależy Ci na tym, aby ustawienia własności white-space zawsze były uwzględniane, to użyj encji HTML ​. Jeśli nie jest to aż tak bardzo istotne, możesz użyć elementu wbr, który w odróżnieniu od encji ma znaczenie semantyczne.

Przenoszenie wyrazów za pomocą łącznika

Inną techniką kontroli dzielenia wyrazów jest stosowanie tzw. łączników potencjalnego podziału (ang. hyphenation opportunity). Łączniki te to znaki, które przeglądarka traktuje jako sygnały, że w danym miejscu można zawinąć tekst do następnego wiersza i ewentualnie, w zależności od rodzaju łącznika, należy wyświetlić poziomą kreskę.

Do opisywanego celu służą dwa rodzaje łącznika – łącznik twardy (ang. hard hyphen) i łącznik miękki (ang. soft hyphen).

Łącznik twardy reprezentuje widoczny potencjalny punkt podziału, tzn. wskazuje przeglądarce miejsce, w którym może ona podzielić wyraz, i jest on cały czas widoczny. Znak ten można wstawić do dokumentu HTML za pomocą encji szesnastkowej ‐. Powiedzmy na przykład, że chcemy przedstawić na stronie długą nazwę substancji chemicznej:

<div>N&#x2010;acetylo&#x2010;N&#x2010;[5&#x2010;cyjano&#x2010;3&#x2010;(2&#x2010;dibutyloamino&#x2010;4&#x2010;fenylotiazol&#x2010;5&#x2010;ilometyleno)&#x2010;4&#x2010;metylo&#x2010;2,6&#x2010;diokso&#x2010;1,2,3,6&#x2010;tetrahydropirydyn&#x2010;1&#x2010;ylo]benzamid</div>

Teraz nasza nazwa związku chemicznego będzie dzielona tylko w miejscach występowania znaku łącznika twardego, czyli encji ‐, i łącznik ten będzie widoczny w oknie przeglądarki przez cały czas. Możesz to zweryfikować, zmieniając rozmiar poniższego elementu i obserwując, jak zmienia się sposób podziału znajdującego się w nim słowa.

Natomiast łącznik miękki to reprezentujący potencjalny punkt podziału wyrazu znak, którego nie widać na stronie dopóki nie dojdzie do przeniesienia części wyrazu w oznaczonym przez niego miejscu. Ten znak w zestawie Unicode ma wartość szesnastkową AD, więc można go wstawić na stronę za pomocą encji szesnastkowej ­ (ewentualnie można użyć nazwanej encji HTML ­) np.:

<div class="nazwa-chem">N&#xAD;acetylo&#xAD;N&#xAD;[5&#xAD;cyjano&#xAD;3&#xAD;(2&#xAD;dibutyloamino&#xAD;4&#xAD;fenylotiazol&#xAD;5&#xAD;ilometyleno)&#xAD;4&#xAD;metylo&#xAD;2,6&#xAD;diokso&#xAD;1,2,3,6&#xAD;tetrahydropirydyn&#xAD;1&#xAD;ylo]benzamid</div>

W tym przypadku znaki łącznika będą widoczne tylko w miejscu przeniesienia wyrazu do następnego wiersza, a więc nie jest on tu najlepszym wyborem, ponieważ w tej nazwie związku łączniki pełnią ważną funkcję i powinny być cały czas widoczne. Miękkiego łącznika powinno się używać do ręcznego wskazywania miejsc złamania długich wyrazów tam, gdzie normalnie on nie występuje.

Do kontrolowania łączników służą dwie własności CSS: hyphens i hyphenate-character.

Za pomocą własności hyphens można sterować sposobem traktowania przez przeglądarkę łączników miękkich i łączników twardych obecnych w tekście. Wartość none wyłącza łamanie wiersza w miejscach ich występowania, wartość manual powoduje, że są one honorowane, a wartość auto pozwala podjąć decyzję w tym zakresie przeglądarce.

Druga z wymienionych własności, hyphenate-character, umożliwia określenie znaku przeniesienia wyrazu, np.:

p {
  hyphenate-character: "~";
}

Teraz w miejscu automatycznego podziału wyrazu lub łącznika miękkiego zostanie wyświetlona tylda.

Dekorowanie tekstu

Do najczęściej używanych „dekoracji” tekstu należą podkreślenie i przekreślenie. Efekty te z łatwością można dodać za pomocą własności zbiorczej text-decoration lub przy użyciu obejmowanych przez nią własności indywidualnych, text-decoration-color, text-decoration-line, text-decoration-style oraz text-decoration-thickness, które odpowiednio ustawiają kolor, rodzaj, styl oraz grubość linii dekoracji.

Aby na przykład przekreślić zawartość elementu span czerwoną przerywaną linią o grubości dwóch pikseli, można zastosować następującą regułę CSS:

span {
  text-decoration: red line-through dashed 2px;
}

Kolejność wartości jest bez znaczenia, więc wszystkie poniższe deklaracje są prawidłowe:

text-decoration: 2px red line-through dashed;
text-decoration: red dashed line-through 2px;
text-decoration: red dashed 2px line-through;

Dodatkowo dostępne są dwie własności odnoszące się do podkreślenia, czyli mające zastosowanie, gdy własność text-decoration-thickness jest ustawiona (indywidualnie lub przez własność zbiorczą) na underline: text-underline-position i text-underline-offset. Pierwsza z nich określa położenie linii podkreślenia, np. pod alfabetyczną linią bazową pisma albo po lewej lub po prawej stronie w tekście pisanym pionowo. Druga natomiast umożliwia precyzyjne umiejscowienie linii podkreślenia. Wartości dodatnie odsuwają linię w dół, a wartości ujemne – podciągają ją w górę, np.:

span {
  text-underline-position: under;
  text-underline-offset: -5px;
}

Teraz linia podkreślenia najpierw zostanie umieszczona pod linią bazową pisma, a następnie zostanie podciągnięta do góry o pięć pikseli.

Odstępy między literami i słowami

Modyfikując szerokość odstępów między literami i słowami, można sprawić, że tekst będzie bardziej się wyróżniał, co pozwoli przyciągnąć do niego większą uwagę. Do zwiększania i zmniejszania odstępów między literami i słowami służą odpowiednio własności letter-spacing i word-spacing. Każda z nich przyjmuje jako wartość liczbę z jednostką długości określającą rozmiar odstępu, np.:

h1 {
  letter-spacing: -2px;
}

Zmniejszenie odstępu między literami w nagłówku czasami pozwala uzyskać efekt potęgujący jego znaczenie, ale należy z tym uważać, aby nie przesadzać i nie otrzymać efektu odwrotnego do zamierzonego. Przy okazji zwróć uwagę, że można używać zarówno wartości dodatnich, jak i ujemnych. Wartości dodatnie zwiększają odstęp między literami, a ujemne – go zmniejszą. Na poniższej ilustracji widać efekt zastosowania powyższej reguły.

Własność word-spacing działa podobnie, jak letter-spacing, tylko w odniesieniu do wyrazów, tzn. za jej pomocą można zwiększyć lub zmniejszyć odstęp między słowami, np.:

p {
  word-spacing: 10px;
}

Teraz odstępy między wyrazami w akapitach wynoszą po 10 pikseli, jak widać na poniższej ilustracji:

Inne własności CSS do pracy z tekstem

Zasób własności CSS do pracy z tekstem jest całkiem imponujący. Za ich pomocą można zdefiniować formatowanie na wiele różnych sposobów. Powyżej zostały opisane najpopularniejsze techniki formatowania tekstu za pomocą CSS. W poniższej tabeli znajduje się zwięzłe podsumowanie opisanych własności oraz innych własności z tej kategorii, które również mogą Ci się przydać.