Start Publikacje Tłumaczenia Książki Słownik programistyczny

Promocje Heliona

Bestsellery Heliona

5.4 Własności tekstu

5.4.1 „word-spacing”

Wartości: normal | <length>
Wartość domyślna: normal
Zastosowanie: wszystkie elementy
Dziedziczenie: tak
Wartości procentowe: nie dotyczy

Wartość „length” oznacza rozmiar dodatkowego odstępu pomiędzy wyrazami. Możliwe są też wartości ujemne, ale uzależnione są one od konkretnej implementacji. Aplikacja kliencka może samodzielnie decydować jakiego użyć algorytmu obliczania odstępów między wyrazami. Na wielkość odstępów między wyrazami może mieć też wpływ justowanie tekstu (które może być wartością własności „text-align”).

H1 { word-spacing: 1em }

Powyższy przykład doda dodatkowy odstęp o rozmiarze „1em” pomiędzy wyrazami znajdującymi się w obrębie elementów „H1”.

CSS1 core: Aplikacje klienckie mogą traktować każdą wartość własności „word-spacing” jako „normal” (patrz rozdział 7.

5.4.2 „letter-spacing”

Wartości: normal | <length>
Wartość domyślna: normal
Zastosowanie: wszystkie elementy
Dziedziczenie: tak
Wartości procentowe: nie dotyczy

Własność „letter-spacing” służy do określania rozmiaru dodatkowych odstępów pomiędzy poszczególnymi znakami. Własność ta może przyjmować także wartości ujemne, ale są one uzależnione od konkretnej implementacji. Aplikacja kliencka może samodzielnie decydować jakiego algorytmu obliczania odstępów między wyrazami użyć. Na wielkość odstępów między znakami może mieć też wpływ justowanie tekstu (które może być wartością własności tekstu „text-align”).

BLOCKQUOTE { letter-spacing: 0.1em }

Powyższy przykład spowoduje, że odstęp pomiędzy poszczególnymi znakami wszystkich elementów „BLOCKQUOTE” zostanie powiększony o „0.1em”.

Aby wyjustować tekst, klient może zmienić odstęp między literami, jeżeli wartość jest ustawiona na „normal”. Nie może natomiast tego zrobić, jeżeli podano konkretną wartość liczbową:

BLOCKQUOTE { letter-spacing: 0 }
BLOCKQUOTE { letter-spacing: 0cm }

Jeżeli odległość pomiędzy dwiema literami wychodzi inna niż domyślna, to klient nie powinien używać ligatur.

CSS1 core: Aplikacja kliencka może traktować wartości „letter-spacing” jako „normal” (patrz rozdział 7).

5.4.3 „text-decoration”

Wartości: none | [ underline || overline || line-through || blink ]
Wartość domyślna: none
Zastosowanie: wszystkie elementy
Dziedziczenie: nie, ale poniżej znajdują się dodatkowe informacje na ten temat
Wartości procentowe: nie dotyczy

Własność „text-decoration” służy do wzbogacania tekstu o pewne dodatkowe właściwości. Właściwości te nie będą widoczne jeżeli element jest pusty lub zawiera tylko grafikę. Wartość „blink” powoduje migotanie tekstu.

Kolor wyświetlania dodatków jest taki sam jak tekstu do którego zostały one zastosowane.

Własność ta nie jest dziedziczonay, ale zastosowana dla jednego elementu ma też wpływ na elementy wewnątrz niego. To znaczy, jeżeli dla pewnego elementu zostanie zdefiniowana wartość „underline” (podkreślenie), to podkreślenie to obejmując cały element, obejmie także elementy znajdujące się w jego wnętrzu. Kolor podkreślenia pozostanie taki sam jaki zdefiniowano dla elementu rodzica, bez względu na to jaki zdefiniowano dla elementów potomków.

A:link, A:visited, A:active { text-decoration: underline }

Powyższy przykład spowoduje podkreślenie wszystkich odnośników na stronie (tj. wszystkich elementów „A” z własnością „HREF”).

Słowo kluczowe „blink” musi być rozpoznawane przez wszystkie aplikacje, ale nie muszą go one obsługiwać.

5.4.4 „vertical-align”

Własność ta służy do pionowego pozycjonowania elementów. Wartości można podzielić na dwie grupy wg sposobu ich działania:

Pierwsza grupa wartości, to te słowa kluczowe, których efekt uzależniony jest od elementu rodzica:

„baseline”

Wyrównuje podstawową linię pisma elementu dziecka (lub linię dolną, jeżeli element nie posiada linii podstawowej) z linią podstawową pisma elementu rodzica.

„middle”

Wyrównuje punkt znajdujący się dokładnie w połowie wysokości elementu (zazwyczaj obrazka) do punktu znajdującego się na wysokości równej połowie wartości własności „x-height” licząc od linii podstawowej pisma elementu rodzica.

„sub”

Powoduje przeniesienie elementu do indeksu dolnego.

„super”

Powoduje przeniesienie elementu do indeksu górnego.

„text-top”

Wyrównuje wierzch elementu z wierzchem tekstu elementu, w którym się ten element znajduje.

„text-bottom”

Wyrównuje spód elementu do spodu tekstu elementu, w którym się ten element znajduje.

Drugą grupę stanowią wartości, których efekt uzależniony jest od linii formatowania, której częścią jest sam element:

„top”

Wyrównuje wierzch elementu z najwyższym elementem w linii.

„bottom”

Wyrównuje spód elementu z najniższym elementem w linii.

Użycie wartości „top” i „bottom” może powodować konflikty, kiedy zależności pomiędzy elementami się zapętlają.

Wartości procentowe odnoszą się do wartości własności „line-height” elementu. Powodują one uniesienie linii podstawowej pisma elementu (lub jego linię dolną jeżeli nie posiada on linii podstawowej) na określoną wysokość ponad linię podstawową pisma elementu rodzica. Możliwe są tu także wartości ujemne, np. wartość„-100%” spowoduje przeniesienie linii podstawowej elementu do miejsca, w którym powinna się znajdować następna linia podstawowa. Dzięki temu możliwa jest bardzo precyzyjna kontrola pionowego ułożenia elementów (np. obrazów graficznych użytych w miejsce znaków), które nie posiadają linii podstawowej pisma.

Oczekuje się, że w przyszłych wersjach CSS będzie można używać wartości liczbowych jako wartości tej własności.

5.4.5 „text-transform”

Wartości: capitalize | uppercase | lowercase | none
Wartość domyślna: none
Zastosowanie: wszystkie elementy
Dziedziczenie: tak
Wartości procentowe: nie dotyczy

„capitalize”

Zamienia pierwszą literę na wielką.

„uppercase”

Zamienia wszystkie litery na wielkie.

„lowercase”

Zamienia wszystkie litery na małe.

„none”

Neutralizuje działanie odziedziczonych wartości.

Właściwa transformacja tekstu w każdym przypadku uzależniona jest od użytego języka ludzkiego (jeśli chcesz wiedzieć więcej na temat sprawdzania języka dokumentu, patrz [4]).

H1 { text-transform: uppercase }

Powyższy przykład spowoduje zamianę wszystkich liter znajdujących się w elemencie „H1” na wielkie.

CSS1 core: Aplikacja kliencka może zignorować własność „text-transform” w przypadku liter spoza zestawu Latin-1 oraz języków dla których określono inny sposób transformacji niż opisany w tabelach case-conversion Unicode [8].

5.4.6 „text-align”

Wartości: left | right | center | justify
Wartość domyślna: zależna od klienta
Zastosowanie: elementy blokowe
Dziedziczenie: tak
Wartości procentowe: nie dotyczy

Własność ta służy do kontroli wyrównania tekstu. Algorytm justowania tekstu uzależniony jest od klienta oraz użytego języka ludzkiego.

Przykład:

DIV.center { text-align: center }

Ze względu na fakt, że własność „text-align” jest dziedziczona, wszystkie elementy blokowe znajdujące się wewnątrz elementu „DIV” z klasą „center” zostaną wyśrodkowane. Warto zwrócić uwagę, że wyrównanie odbywa się względem szerokości elementu, a nie względem całego obszaru roboczego. Wartość „justify” jest zastępowana inną wartością jeżeli nie jest ona obsługiwana przez danego klienta. Zazwyczaj w zastępstwie stosowane jest wyrównanie do lewej dla języków zachodnich.

CSS1 core: Przeglądarka może wartość „justify” zastąpić wyrównaniem do lewej lub prawej w zależności od sposobu zapisu tekstu: od lewej do prawej, czy od prawej do lewej.

5.4.7 „text-indent”

Wartości: <length> | <percentage>
Wartość domyślna: 0
Zastosowanie: elementy blokowe
Dziedziczenie: tak
Wartości procentowe: zależne od szerokości elementu rodzica

Własność ta służy do określania rozmiaru wcięcia pierwszej linii tekstu. Wartości ujemne są dozwolone, ale mogą występować pewne ogranicznia implementacyjne. Jeżeli w obrębie akapitu występuje łamanie linii (np. z powodu użycia elementu „BR”), to linia taka nie zostanie wcięta.

Przykład:

P { text-indent: 3em }

5.4.8 „line-height”

Wartości: normal | <number> | <length> | <percentage>
Wartość domyślna: normal
Zastosowanie: wszystkie elementy
Dziedziczenie: tak
Wartości procentowe: zależne od rozmiaru czcionki samego elementu

Własność „line-height” służy do określania odstępu pomiędzy liniami podstawowymi pisma dwóch bezpośrednio sąsiadujących ze sobą linii tekstu.

Jeżeli wartość numeryczna jest podana, to wysokość linii jest sumą tej wartości i rozmiaru czcionki bieżącego elementu. Sposób dziedziczenia wartości procentowych i liczbowych jest różny. W przypadku wartości liczbowej elementy dziedziczą wartość samego parametru a nie wartość wynikową (w przeciwieństwie do innych wartości).

Wartości ujemne nie są dozwolone.

Wysokość linii będzie taka sama po zastosowaniu każdej z trzech poniższych reguł.

DIV { line-height: 1.2; font-size: 10pt }     /* number */
DIV { line-height: 1.2em; font-size: 10pt }   /* length */
DIV { line-height: 120%; font-size: 10pt }    /* percentage */

Wartość „normal” powoduje ustawienie takiej wysokości linii, która jest odpowiednia dla danej czcionki. Zakłada się, że wartość liczbowa odpowiadająca wartości „normal” powinna zawierać się w przedziale 1.0 - 1.2.

Więcej na temat sposobu działania własności „line-height” znajduje się w rozdziale 4.4.

Spis treści

Niniejszy dokument jest tłumaczeniem rekomendacji W3C Cascading Style Sheets, level 1. Tłumaczenie to nie ma statusu dokumentu normatywnego i może zawierać błędy wynikające z tłumaczenia. Tylko dokument znajdujący się na stronie W3C pod adresem http://www.w3.org/TR/REC-CSS1 ma charakter normatywny.

Copyright © 2004 W3C^® (MIT, ERCIM, Keio), Wszystkie prawa zastrzeżone. W3C stosuje następujące zasady dotyczące odpowiedzialności cywilnej, znaku towarowego, używania dokumentu i licencji oprogramowania.