<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>Tomasz Marszał Blog &#187; typografia</title>
	<atom:link href="http://bymarszal.pl/blog/tag/typografia/feed/" rel="self" type="application/rss+xml" />
	<link>http://bymarszal.pl/blog</link>
	<description>WebDevelopment. Informatyka. Ciekawe projekty.</description>
	<lastBuildDate>Fri, 16 Sep 2011 19:25:19 +0000</lastBuildDate>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	<generator>http://wordpress.org/?v=3.3.1</generator>
		<item>
		<title>Składanie tekstu na stronach internetowych</title>
		<link>http://bymarszal.pl/blog/2009/06/01/skladanie-tekstu-na-stronach-internetowych/</link>
		<comments>http://bymarszal.pl/blog/2009/06/01/skladanie-tekstu-na-stronach-internetowych/#comments</comments>
		<pubDate>Mon, 01 Jun 2009 13:57:54 +0000</pubDate>
		<dc:creator>Tomek</dc:creator>
				<category><![CDATA[informatyka]]></category>
		<category><![CDATA[internet]]></category>
		<category><![CDATA[typografia]]></category>

		<guid isPermaLink="false">http://wp.bymarszal.pl/?p=174</guid>
		<description><![CDATA[<p><b>Kolejne słowo komentarza:</b> pod wpływem natchnienia wywołanego <a href="http://bymarszal.pl/blog/2009/06/01/zargon-projektantow-stron-slownik-i-zrodla/" title="Żargon projektowania stron: słownik i źródła">przetłumaczonym artykułem</a> i lekturą <a href="http://helion.pl/ksiazki/pctyp.htm">Jak składać tekst. PC nie jest maszyną do pisania</a>, powstał mój własny tekst poświęcony składaniu tekstów w internecie. W dużej mierze bazowałem na ww. książce, uzupełniając ją o własne doświadczenia i przenosząc wspomniane w niej tematy w realia internetowe. Książka została w bibliotece określona mianem starodruk (rok wydania: 1994), więc jeśli uda mi się dotrzeć do nowszego wydania (2003), być może dopiszę kilka rzeczy.</p>]]></description>
			<content:encoded><![CDATA[<p><b>Kolejne słowo komentarza:</b> pod wpływem natchnienia wywołanego <a href="http://bymarszal.pl/blog/2009/06/01/zargon-projektantow-stron-slownik-i-zrodla/" title="Żargon projektowania stron: słownik i źródła">przetłumaczonym artykułem</a> i lekturą <a href="http://helion.pl/ksiazki/pctyp.htm">Jak składać tekst. PC nie jest maszyną do pisania</a>, powstał mój własny tekst poświęcony składaniu tekstów w internecie. W dużej mierze bazowałem na ww. książce, uzupełniając ją o własne doświadczenia i przenosząc wspomniane w niej tematy w realia internetowe. Książka została w bibliotece określona mianem starodruk (rok wydania: 1994), więc jeśli uda mi się dotrzeć do nowszego wydania (2003), być może dopiszę kilka rzeczy.</p>
<h2>Akcenty i polskie znaki diaktryczne</h2>
<p>Uzyskujemy je pisząc w edytorze tekstu wspomagającym odpowiednie kodowanie (np. ISO-8859-2 lub UTF-8). Niektóre akcenty można zastąpić encjami, jeżeli mamy problem z wprowadzeniem ich w naszym edytorze.</p>
<h2>Apostrofy</h2>
<p>Do zapisu apostrofu używamy znaku &rsquo; (&amp;rsquo;) zamiast &#8216;. W języku angielskim apostrofów używamy w formach dzierżawczych (<b>Jimmie&rsquo;s</b>), w skrótach (<b>you&rsquo;re</b>). W języku polskim, używamy ich dla oznaczenia zanikłej litery (najczęściej dzieje się to przy zapożyczeniach z języka angielskiego i jest powtórzeniem identycznej akcji w tym języku &ndash; np. <b>Rock&rsquo;n&rsquo;Roll</b>), przy pisaniu dat (gdy część roku została usunięte &ndash; <b>Kraków &rsquo;08</b>), a także dla oddzielenia polskiej końcówki dodanej do wyrazu w języku obcym (<b>Laplace&rsquo;a</b>).</p>
<h2>Cudzysłowy</h2>
<p>Większość osób, pisząc w internecie, używa jako cudzysłowu znaku &#8220;, ponieważ jest on bardzo podobny i możliwy do odnalezienia na klawiaturze. Jest to jednak forma nieprawidłowa. Pisząc tekst w języku polskim powinno się używać cudzysłowu otwierającego dolnego &bdquo; (&amp;bdquo;) jako znaku otwierającego cytat oraz cudzysłowu zamykającego górnego &rdquo; (&amp;rdquo;) jako znaku zamykającego, natomiast w tekstach obcojęzycznych odpowiednio znaków &ldquo; (&amp;ldquo;) i &rdquo; (&amp;rdquo;). Istnieje również kilka reguł dotyczących umieszczania w sąsiedztwie cudzysłowu innych znaków interpunkcyjnych:</p>
<ul>
<li>kropki, przecinki, znaki zapytania i wykrzykniki znajdują się <b>wewnątrz lub na zewnątrz</b> cytatu w zależności od tego, czy należą do cytowanego tekstu, czy nie (w Ameryce kropki i przecinki umieszcza się zawsze wewnątrz cudzysłowu;</li>
<li>dwukropki i średniki umieszczamy zawsze <b>na zewnątrz</b> cudzysłowu;</li>
<li>jeśli cytujemy więcej niż jeden akapit, znak cudzysłowu otwierającego umieszczamy <b>na początku</b> każdego akapitu, ale znak cudzysłowu zamykającego tylko <b>na końcu</b> ostatniego z nich.</li>
</ul>
<h2>Czcionki</h2>
<h3>Szeryfowe i bezszeryfowe</h3>
<p><a href="http://bymarszal.pl/blog/wp-content/uploads/2009/06/czcionki.png"><img src="http://bymarszal.pl/blog/wp-content/uploads/2009/06/czcionki.png" alt="czcionki" title="czcionki" width="264" height="86" class="aligncenter size-full wp-image-177" /></a></p>
<p>Serif (szeryfowe) i sans-serif (bezszeryfowe) to dwie podstawowe grupy czcionek. Szeryfem nazywamy zakończenie kreski w literze. Czcionkę nieposiadającą takich zakończeń nazywamy bezszeryfową.<br />Badania wykazały, że w przypadku długich tekstów czytelniejsze są czcionki szeryfowe, zaś w przypadku krótkich &ndash; bezszeryfowe. W internecie powszechną zasadą jest pisanie tekstów krótkich, posiadających dużo wypunktowań i nagłówków, dlatego częściej stosowane są czcionki bezszeryfowe.</p>
<h3>Długość wierszy</h3>
<p>Duży wpływ na czytelność tekstów pisanych różnymi rodzajami czcionek ma długość wiersza. Przyjmuje się, że przy czcionkach szeryfowych dobrą długością jest około 8 &ndash; 10 wyrazów, a przy czcionkach bezszeryfowych &ndash; około 7.</p>
<h3>Łączenie czcionek</h3>
<p>Na większości stron internetowych stosuje się tylko jeden rodzaj czcionki, co pozwala uniknąć wizualnego bałaganu. Czasem jednak dobrym pomysłem jest wyróżnienie ważnych elementów strony czymś więcej niż tylko pogrubieniem lub innym rozmiarem czcionki. Takimi miejscami są na przykład nagłówki w tekście. Zazwyczaj są one zaledwie kilkuwyrazowe, więc dobrym pomysłem jest, aby w tekście pisanym czcionką szeryfową, nagłówki napisać bardziej wyrazistą, czcionką bezszeryfową. Zasadą jest, że nie łączy się więcej niż dwóch czcionek na stronie, a także nie łączy się ze sobą dwóch czcionek tego samego typu (są do siebie podobne, więc nie tworzą wystarczającego kontrastu, a jedynie nieporządek). Odstępstwem od tej reguły może być umiejętne użycie trzeciej czcionki w logo strony tak, aby nie zaburzała ona odbioru tekstu.</p>
<h2>Duże litery</h2>
<p><a href="http://bymarszal.pl/blog/wp-content/uploads/2009/06/liniabrzegowa.png"><img src="http://bymarszal.pl/blog/wp-content/uploads/2009/06/liniabrzegowa.png" alt="liniabrzegowa" title="liniabrzegowa" width="276" height="76" class="aligncenter size-full wp-image-178" /></a></p>
<p>W internecie powinno się unikać pisania dłuższych wierszy dużymi literami. Jest do dopuszczalne w przypadku krótkich nagłówków, ale trzeba używać tego rozważnie. Przyczyną przyjęcia takiej konwencji jest istnienie tzw. &bdquo;linii brzegowej&rdquo; (patrz: rysunek), która w przypadku tekstu pisanego normalnie jest w pewnym stopniu charakterystyczna dla wyrazu i ułatwia czytanie tekstu, a dla tekstów pisanych dużymi literami jest tylko prostokątem otaczającym cały wyraz.<br />Dobrym pomysłem na wyróżnienie tekstu, który chcielibyśmy napisać dużymi literami jest zamiast tego, powiększenie jego czcionki.</p>
<h2>Dzielenie wyrazów</h2>
<p>Dzielenie wyrazów stosuje się, jeśli jakiś wyraz nie mieści się w linii i trzeba jego część przenieść do następnej. Dzieli się wtedy wyraz znakiem <a href="#lacznik">łącznika</a>. Ze względu na to, że ciężko o stworzenie komputerowych reguł dzielenia wyrazów, a dla człowieka jest to zajęcie żmudne, w zastosowaniach internetowych najczęściej pomija się ten aspekt formatowania tekstu.</p>
<h2>Interlinia</h2>
<p>Po angielsku zwane <i>leading</i>, co wywodzi się od słowa <i>lead</i> oznaczającego ołów. Przed wynalezieniem nowoczesnych maszyn drukarskich, strony zestawiane były właśnie z ołowianych czcionek, a pomiędzy poszczególne linie wkładany był ołowiany pasek o określonej grubości. Rozmiar czcionki oznaczano wtedy w punktach (1&#8243; = 72pt). Rozmiar interlinii stanowił standardowo 20% rozmiaru czcionki, czyli do czcionki 10pt, dobierano 2pt-owy lead i wielkość interlinii określano jako sumę tych wartości, czyli 12pt. W HTMLu jest podobnie: wielkość interlinii wyznaczana jest przez własność CSS <i>line-height</i>, która stanowi sumę wielkości czcionki i lead&rsquo;u.<br />Najważniejszą zasadą przy zmianie wielkości interlinii jest to, aby w całym akapicie była ona taka sama. Przy ustawianiu jej za pomocą <i>line-height</i> zmienia się wysokość wszystkich linii, ale efekt ten psuje się, jeżeli zastosujemy pseudo-element <i>:first-letter</i> i zwiększymy rozmiar czcionki pierwszej litery ponad wysokość linii. Powstaje wtedy brzydki odstęp między pierwszą a drugą linią tekstu. Sposobem na zapobiegnięcie temu jest nadpisanie domyślnie ustawionej wartości <i>line-height</i> i ustawienie jej na wartość taką, jaką chcemy uzyskać (czyli 120% wielkości czcionki; przeglądarki zaokrąglają zazwyczaj tę wartość do wielokrotności 5, czyli dla rozmiaru czcionki 16px : 16 &times; 120% = 19,2px &asymp; 20px).</p>
<h2>Justowanie tekstu</h2>
<p>Justowanie tekstu tworzy bardzo ładne akapity wyrównane zarówno do lewej, jak i do prawej strony bez potrzeby ręcznego dzielenia wyrazów, czy innych zabiegów na tekście, ale należy stosować je ostrożnie. Przy krótkich wierszach (na przykład w kolumnach tekstu w gazetach) i długich słowach, mogą powstać wyrazy rozciągnięte na całą szerokość wiersza lub dwa wyrazy oddzielone od siebie bardzo długą przerwą, a odstępy między wyrazami wyglądać nienaturalnie. Od razu widać, że w takich przypadkach justowanie nie jest rozwiązaniem szczególnie estetycznym. Najlepiej wtedy ręcznie podzielić wyrazy lub pogodzić się ze stratą wyrównania po jednej ze stron i wyrównać tekst do drugiej. Jednak nawet przy długich wierszach, decydując się na justowanie, trzeba liczyć się z wystąpieniem opisanych problemów.</p>
<h2>Kerning</h2>
<p>Kerning polega na zmniejszeniu odstępów pomiędzy literami w celu uzyskania tekstu, który będzie sprawiał wrażenie złożonego z równoodległych liter. Całość procesu opiera się na wykorzystaniu złudzenia optycznego, związanego z tym, że litery mają różne kształy. Przez to na przykład zestawione obok siebie litery WA wyglądają na znajdujące się w większej odległości niż litery SZ. Dzieje się tak dlatego, że poszczególne znaki są prostokątnymi obrazami i nie nachodzą (w standardowym przypadku) na siebie.<br />Kerning wymaga ustawienia dla różnych liter w wyrazie różnej szerokości do następnego, więc jest niewygodny i rzadko stosowany (najczęściej przy tekstach umieszczonych na stałę w formie obrazów).<br />Chcąc wyrównać optycznie odległości między literami, można stosować się do kilku zasad:</p>
<ul>
<li><b>HL</b> &ndash; odstęp między dwiema literami, których sąsiadujące krawędzie są pionowe, powinien być największy;</li>
<li><b>HO</b> &ndash; odstęp między pionową krawędzią jednej litery a łukiem drugiej, powinien być mniejszy;</li>
<li><b>OC</b> &ndash; odstęp między łukami dwóch liter powinien być bardzo mały;</li>
<li><b>OT</b> &ndash; łuki mogą zapełnić pustą przestrzeń pod lub nad poprzecznym ramieniem sąsiedniego znaku;</li>
<li><b>AT</b> &ndash; najbliżej siebie powinny znajdować się litery mające wokół siebie pustą przestrzeń;</li>
</ul>
<p>Najważniejsze jednak jest, żeby tekst sprawiał wrażenie równo rozłożonego.</p>
<p><a name="lacznik"></a><br />
<h2>Łącznik i myślnik</h2>
<p>Istnieją 3 znaki tego typu: łącznik, en-myślnik, em-myślnik.</p>
<ul>
<li>Łącznik &#8211; służy do łączenia wyrazów złożonych (<b>hokus-pokus</b>), numerów telefonów (<b>0-22 123-45-67</b>), kodów pocztowych (<b>00-123</b>) lub do przenoszenia części wyrazu do nowego wiersza.</li>
<li>En-myślnika &ndash; (&amp;ndash;) i Em-myślnika &mdash; (&amp;mdash;) w Polsce używa się zamiennie (z przewagą em-myślnika) we wszystkich pozostałych przypadkach.</li>
</ul>
<p>W Stanach Zjednoczonych przyjęte są trochę inne zasady używania dwóch ostatnich znaków, precyzujące kiedy używać którego:</p>
<ul>
<li>En-myślnik &ndash; (&amp;ndash;) nazywany jest tak dlatego, że ma szerokość zbliżoną do dużej litery N w danej czcionce. Używamy go, gdy zapisujemy jakiś przedział czasu (<b>8<sup>00</sup>&ndash;10<sup>00</sup></b>, <b>pn&ndash;pt</b>, <b>dwa &ndash; trzy lata</b>).</li>
<li>Em-myślnik &mdash; (&amp;mdash;) ma szerokość zbliżoną do dużej litery M. Stosujemy go w miejscu, gdzie zmienia się myśl, a gdzie użycie kropki było by zbyt silne, a przecinka &ndash; zbyt słabe.</li>
</ul>
<h2>Podkreślenie</h2>
<p>W profesjonalnym tekście nie używa się podkreśleń. Podobnie jest w HTMLu &ndash; powszechnie przyjętą konwencją jest stosowanie podkreśleń jedynie dla oznaczenia linków. Aby wyróżnić jakieś słowo najczęściej stosuje się <b>pogrubienie</b>, a żeby zapisać na przykład tytuł &ndash; <i>kursywę</i>. Jeśli chcemy wyodrębnić cytat, możemy również zapisać go <i>kursywą</i> lub<br />
<blockquote>w osobnym cytacie blokowym</p></blockquote>
<h2>Subscript i superscript</h2>
<p>Czyli znaki pisane na górze i na dole w stosunku do bazowej linii pisma. Stosowane przy zapisywaniu potęgowania (<b>x<sup>y</sup></b>), symboli chemicznych (<b>H<sub>2</sub>O</b>), minut przy godzinach (<b>9<sup>35</sup></b>). W HTMLu superscript (umieszczenie znaków nad linią bazową) uzyskujemy biorąc tekstu w znaczniki &lt;sup&gt;&lt;/sup&gt;, a subscript (pod linią bazową) &ndash; biorąc w znaczniki &lt;sub&gt;&lt;/sub&gt;.</p>
<h2>Ułamki i potęgowanie</h2>
<p>W HTMLu potęgowanie zapisujemy za pomocą superscriptu, a ułamki za pomocą kombinacji &lt;sup&gt;licznik&lt;/sup&gt;/&lt;sub&gt;mianownik&lt;/sub&gt;. Kilka podstawowych potęg i ułamków zostało jednak zdefiniowanych:</p>
<table style="margin-left:auto;margin-right:auto;margin-top:1em;margin-bottom:1em;">
<tbody>
<tr>
<td style="padding:0 1em 0 1em;">&sup2;</td>
<td style="padding:0 1em 0 1em;">&amp;sup2;</td>
</tr>
<tr>
<td style="padding:0 1em 0 1em;">&sup3;</td>
<td style="padding:0 1em 0 1em;">&amp;sup3;</td>
</tr>
<tr>
<td style="padding:0 1em 0 1em;">&frac14;</td>
<td style="padding:0 1em 0 1em;">&amp;frac14;</td>
</tr>
<tr>
<td style="padding:0 1em 0 1em;">&frac12;</td>
<td style="padding:0 1em 0 1em;">&amp;frac12;</td>
</tr>
<tr>
<td style="padding:0 1em 0 1em;">&frac34;</td>
<td style="padding:0 1em 0 1em;">&amp;frac34;</td>
</tr>
</tbody>
</table>
<h2>Wcięcie akapitów</h2>
<p>Wiele osób w różnych edytorach tekstu dla uzyskania wcięcia pierwszej linii używało wielokrotnego znaku spacji. Pomijając fakt, że jest to niepoprawna metoda i większość współczesnych edytorów oferuje specjalne funkcje do tworzenia tego efektu. W HTMLu sposób ten nie będzie działał, ponieważ wielokrotne spacje, podobnie jak tabulacja, wyświetlane są jako pojedynczy znak spacji. Aby uzyskać wcięcie akapitu, należy zastosować specjalnie w tym celu zaprojektowaną własność CSS <i>text-indent</i>. Jeśli chcemy uzyskać wcięcie pierwszej linii względem całego akapitu, piszemy np.:</p>
<div class="dean_ch" style="white-space: wrap;">
<ol>
<li class="li1">
<div class="de1">p <span class="br0">&#123;</span> <span class="kw1">text-indent</span>: <span class="re3">40px</span>; <span class="br0">&#125;</span></div>
</li>
</ol>
</div>
<p>Z kolei, jeśli chcemy uzyskać wcięcie akapitu względem pierwszej linii, używamy ujemnej wartości razem z identycznym przesunięciem lewej krawędzi tekstu w prawo np.:</p>
<div class="dean_ch" style="white-space: wrap;">
<ol>
<li class="li1">
<div class="de1">p <span class="br0">&#123;</span> <span class="kw1">text-indent</span>: -<span class="re3">40px</span>; <span class="kw1">padding-left</span>: <span class="re3">40px</span>; <span class="br0">&#125;</span></div>
</li>
</ol>
</div>
<h2>Wdowy i sieroty</h2>
<p>Pojęcia te odnoszą się do &bdquo;opuszczonych&rdquo; wyrazów. Wdowa oznacza samotny wyraz w ostatniej linii akapitu. Najgorszym chyba jej przypadkiem jest, kiedy w ostatniej linii zostanie tylko cześć podzielonego wyrazu. Sposobem na uniknięcie powstawnia wdowy jest ujęcie w znaczniki &lt;nobr&gt;&lt;/nobr&gt; dwóch ostatnich wyrazów akapitu.<br />Sierotą nazywana jest ostatnia linia akapitu, która nie zmieniła się w kolumnie (stronie) tekstu i znalazła się w następnej kolumnie. Aby tego uniknąć, należy tak manipulować rozmiarem czcionki, marginesami, odstępami między liniami i wyrazami, edytować tekst, aby ostatnia linia znalazła się w tej samej kolumnie, co cały akapit.<br />Powiązaną z wdowami i sierotami rzeczą są krótkie wyraz pozostawione na końcu linii (takie jak: na, i, w). Gdy wystąpią, należy taki wyraz, razem z następnym, ująć w tagi &lt;nobr&gt;&lt;/nobr&gt;.</p>
<h2>Znaki specjalne</h2>
<p>W HTMLu zdefiniowano większość znaków specjalnych, jakich można użyć w tekście. Poniżej lista kilku najczęściej używanych:</p>
<table style="margin-left:auto;margin-right:auto;margin-top:1em;margin-bottom:1em;">
<tbody>
<tr>
<td style="padding:0 1em 0 1em;">&cent;</td>
<td style="padding:0 1em 0 1em;">&amp;cent;</td>
</tr>
<tr>
<td style="padding:0 1em 0 1em;">&copy;</td>
<td style="padding:0 1em 0 1em;">&amp;copy;</td>
</tr>
<tr>
<td style="padding:0 1em 0 1em;">&deg;</td>
<td style="padding:0 1em 0 1em;">&amp;deg;</td>
</tr>
<tr>
<td style="padding:0 1em 0 1em;">&euro;</td>
<td style="padding:0 1em 0 1em;">&amp;euro;</td>
</tr>
<tr>
<td style="padding:0 1em 0 1em;">&hellip;</td>
<td style="padding:0 1em 0 1em;">&amp;hellip;</td>
</tr>
<tr>
<td style="padding:0 1em 0 1em;">&pound;</td>
<td style="padding:0 1em 0 1em;">&amp;pound;</td>
</tr>
<tr>
<td style="padding:0 1em 0 1em;">&reg;</td>
<td style="padding:0 1em 0 1em;">&amp;reg;</td>
</tr>
<tr>
<td style="padding:0 1em 0 1em;">&sect;</td>
<td style="padding:0 1em 0 1em;">&amp;sect;</td>
</tr>
<tr>
<td style="padding:0 1em 0 1em;">&times;</td>
<td style="padding:0 1em 0 1em;">&amp;times;</td>
</tr>
<tr>
<td style="padding:0 1em 0 1em;">&trade;</td>
<td style="padding:0 1em 0 1em;">&amp;trade;</td>
</tr>
<tr>
<td style="padding:0 1em 0 1em;">&yen;</td>
<td style="padding:0 1em 0 1em;">&amp;yen;</td>
</tr>
</tbody>
</table>
<p>Listę wszystkich encji zdefiniowanych w HTMLu można znaleźć m.in. pod adresem <a href="http://www.digitalmediaminute.com/reference/entity/index.php">http://www.digitalmediaminute.com/reference/entity/index.php</a>.</p>
]]></content:encoded>
			<wfw:commentRss>http://bymarszal.pl/blog/2009/06/01/skladanie-tekstu-na-stronach-internetowych/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
	</channel>
</rss>

