Typografia na stronach WWW
Dzielenie wyrazów
Przeglądarki nie potrafią automatycznie dzielić wyrazów, więc domyślnie przenoszą do nowej linii tylko całe słowa, przez co prawa krawędź tekstu może wyglądać na „poszarpany”.
Istnieje specjalny znak miękkiego łamania (ang. soft hyphen), który podpowiada, że w jego miejscu można podzielić wyraz. W przeglądarkach soft hyphen jest niewidoczny póki nie znajdzie się na samym końcu linii tekstu — wtedy wygląda jak krótki myślnik.
Jeśli używasz edytora obsługującego kodowanie Unicode, to możesz wklejać ten znak bezspośrednio do tekstu, np. kopiując go z systemowej tablicy znaków:
Jeśli używasz innego kodowania, to możesz zapisać go jako encję:
­
lub­
Dzie-
le-
nie wy-
ra-
zów Unicode (w przykładzie użyte są zwykłe myślniki, ponieważ właściwy znak byłby niewidoczny) Dzie­
le­
nie wy­
ra­
zów Encje
Używanie soft hyphen zwiększa objętość tekstu, a używany zbyt gęsto może dać nieładny efekt wszystkich linii kończących się myślnikiem, dlatego najlepiej ograniczyć jego użycie tylko do dzielenia długich słów albo tekstu w wąskich kolumnach (szczególnie, gdy używa się justowania).
Kontrola nad przenoszeniem wyrazów do nowej linii
Bękarty
W składzie tekstu za nieeleganckie uznaje się pozostawianie słów takich jak „i”, „w”, „na”, „za” na samym końcu linii.
Pozwala temu zapobiec twarda spacja (ang. non-breaking space), którą stawia się zamiast zwykłej spacji zaraz za krótkimi słowami. Podobnie jak z soft hyphen można jej używać bezpośrednio jako znak Unicode lub jako encję:
 
lub
Tekst:
Długa linia i 
przeniesienie do 
nowej linii.
zostanie przeniesiony do nowej linii na przykład tak:
Długa linia i przeniesienie do nowej linii.
zamiast tak:
Długa linia i przeniesienie do nowej linii.
Nie należy używać twardej spacji do robienia odstępów ani wypełniaia pustych elementów. Odstępy robi się za pomocą margin
, padding
lub text-indent
i letter-spacing
. Puste komórki
tabel pokazuje się przez empty-cells:show
.
Zawijanie wierszy: white-space
Właściwość white-space
kontroluje zawijanie wierszy i traktowanie białych znaków wewnątrz elementu. Domyślną wartością jest normal
.
Brak zawijania: nowrap
nowrap
nie kontroluje przenoszenia się elementów z float
Tekst w danym elemecie nie będzie przenoszony do nowej linii w ogóle.
Dokładnie, jak plik tekstowy: pre
white-space:pre
powoduje podział tekstu na wiersze dokładnie taki, jak jest w pliku XHTML. Wiersze nie będą automatycznie dzielone. Jest to efekt identyczny z elementem <pre>
.
Plik tekstowy z dodatkowym zawijaniem: pre-wrap
Zachowuje się jak pre
z tym wyjątkiem, że wiersze są będą dodatkowo dzielone, jeśli to konieczne.
Więcej na temat typografii
Typografia to temat-rzeka. Polecamy:
- http://www.typografia.ogme.pl, a w szczególności 451, czyli typografia bez papieru.
- http://www.papress.com/thinkingwithtype/
Zmodyfikowano: 22.10.2006, 22:28