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ę:

 &#173; lub &shy;


 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&#173;le&#173;nie wy&#173;ra&#173;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ę:

 &#160; lub &nbsp;

Tekst:

 Długa linia i&#160;przeniesienie do&#160;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.

Należy pamiętać, że twarda spacja ma stałą szerokość, co ma znaczenie przy justowaniu tekstu:

 Długa    linia    i przeniesienie 
 do nowej linii.

Zamiast twardej spacji można objąć niełamliwą spację white-space z nowrap:

 Długa linia <span style="white-space:nowrap">i przeniesienie</span> do nowej linii.

co przełoży się na:

 Długa  linia  i  przeniesienie 
 do nowej linii.

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ą dodatkowo dzielone, jeśli to konieczne.

Wprowadzanie dowolnych symboli Unicode z tablicy znaków

Gdy potrzebujesz wprowadzić np. drukarskie cudzysłowy użyj znaków Unikodu, przedtem ustwiając kodowanie strony na UTF‐8. Możesz ręcznie wprowadzać kod znaku prosto z klawiatury — w każdym systemie operacyjnym jest to zazwyczaj inna kombinacja klawiszy, trzeba też pamiętać owe kody na pamięć.

Większość nietypowych symboli, zwłaszcza technicznych oraz matematycznych znajdziesz w darmowej czcionce DejaVu. Gdy wybierasz font w CSS, staraj się aby wszystkie obecne na stronie znaki, były dostępne na ustawianym foncie. W przeciwnym razie czytelnik będzie musiał zainstalować krój czcionki, w którym znajdują się potrzebne do wyświetlenia znaki.

Gdy już skopiujesz wszystkie pliki .ttf kroju DejaVu do domyślnego katalogu z czcionkami w twoim systemie, uruchom „Tablicę znaków”

W Windows XP katalog z czcionkami znajduje się w C:/Windows/Fonts, „Tablica znaków”: Start→Wszystkie programy→Akcesoria→Narzędzia systemowe→Tablica znaków.

Ustaw czcionkę na „DejaVu Sans”
Zaznacz opcję: „Widok zaawansowany”
„Grupuj według: Podzakres Unicode”
Wybierz grupę znaków np. operatory matematyczne

Zaznacz interesujący Cię znak (przycisk „Wybierz”)
Skopiuj (Ctrl+C lub „Kopiuj”) znak do edytora HTML

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://taat.pl/typografia/
http://www.papress.com/thinkingwithtype/

Zmodyfikowano: 17.02.2010, 01:11

Kurs BrowseHappy.pl: Kurs