Właściwości CSS text-align, text-justify

W tym wisie omówię, kilka powiązanych ze sobą właściwości CSS. Zadaniem ich jest wyrównanie (pozycjonowanie, układanie) tekstu na stronie.

Kierunek wyświetlania tekstu

Na pewno już mieliście do czynienia z tymi właściwościami są one bowiem dosyć podstawę. Chociaż pojawi się również dość nowa właściwość text-justify – trudno jest mi powiedzieć coś na jej temat bo w mojej przeglądarce jeszcze nie działa (dopiero ma być wprowadzona). Widziałam ją jednak pod Firefox i zapowiada się dość ciekawie.

Planuję za pewien czas opublikować zestawienie właściwości CSS oddziałujących na tekst. Technicznie zestawienie jest już napisane czeka jednak na publikację informacji o innych właściwościach.

Cechy właściwości text-align

Właściwość CSS text-align służy do wyrównywania tekstu na stronie.

text-align przybiera następujące własności:

• left – tekst do lewej (ustawienie domyślne)
• right – tekst przesunięty do prawej
• center – wyśrodkowanie tekstu na stronie
• justify – wyjustowanie, tekst rozkłada się na całą szerokość kontenera

Właściwość jest obsługiwana praktycznie przez wszystkie przeglądarki internetowe.

<div style="border:1px solid #333; max-width: 300px;">
   <p style="text-align:left;">tekst do lewej strony</p>
   <p style="text-align:right;">tekst do prawej strony</p>
   <p style="text-align:center;">tekst na środku kontenera</p>
   <p style="text-align:justify;">tekst wyjustowany, lepiej widać efekt jak jest długi</p>
</div>

Właściwość text-justify

Zadaniem text-justify jest wpływanie na sposób justowania (czyli wymagane jest ustawienie text-align: justify). Posiada ona wartości:

• auto
• inter-word
• inter-character
• none

Właściwość ta jest stosunkowo nowa i dopiero w planach wielu przeglądarek internetowych takich jak Chome jest jej obsługa. Dlatego warto spojrzeć na przykłady w kilku przeglądarkach internetowych.

Przykłady:

text-indent – czyli wcięcia akapitowe

O wcięciach akapitowych pisałam już wcześniej więc odsyłam was do tego wpisu.