Typografia na stronach WWW

Dzielenie wyrazów Bug w FF

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:

Tablica znaków w Windows Tablica znaków w Mac OS X

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-indentletter-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 Bug w IE Bug w FF

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:


Zmodyfikowano: 22.10.2006, 22:28