Formatowanie, czyli nie męcz mych oczu

Może nie bezpośrednio o oprogramowaniu, ale nieco o estetyce. Wiele z artykułów na tym blogu jest dość ciekawych... tematycznie, ale wykonane tragicznie.

Przede wszystkim chodzi o estetykę wykonania. Podczas gdy pokemony nadużywają dobrodziejstw formatowania tekstu, inni nie wiedzą co to jest. Tak, mam na myśli tutejsze artykuły, ale nie tylko. Porada ta także przyda się twórcom stron internetowych

Spora ich część jest długa, a co gorsza - pisana niemal jednym ciągiem. LITOŚCI DLA MYCH OCZU! Czytelnika nie zawsze interesuje cała treść, tylko czasem jej fragment. Ale niestety artykuł ma 30 akapitów, każdy po 6 linijek i teraz szukaj....

Nagłówki

Nagłówki służą do wyróżnienia sekcji tekstu. To właśnie one ułatwiają nawigację w długim tekście. Pozwalają również łatwo się odnaleźć po dłuższej przerwie w czytaniu.

Akapity

Drugą ważną rzeczą, właściwie to ważniejszą niż nagłówki, są akapity. Pisząc długi tekst, nigdy nie dopuszczajcie do akapitów dłuższych niż 8 linijek! Im krótsze, tym wygodniej się czyta, ale nie do przesady. Gdy są za długie, kończąc jedną linijkę, mamy problemem ze znalezieniem następnej. Przykładowo tekst lorem ipsum bez akapitów i z akapitami: bez:

z:

Który wygląda estetyczniej? A teraz spróbujcie przeczytać. Przy pierwszym czytelnik będzie musiał szukać następnej linijki, bo nie widzi końca, ani początku akapitu i nie umie policzyć na szybko linijek, tak jak to ma miejsce przy 5-linijkowych akapitach. Przy tekście niezrozumiałym, albo pisanym innym językiem ma to szczególnie duże znaczenie.

Pogrubienie

Nie nadużywaj, a najlepiej unikaj używania pogrubienia w ciągłym tekście. Dlaczego? Bo jeżeli w długim akapicie jest jeden wyraz pogrubiony, to od razu rzuca się w oczy i często jest pierwszym czytanym wyrazem. Najlepiej używać kursywy, a pogrubienie zostawić dla nagłówków i list.

Listy

Używaj list, gdy chcesz wymienić więcej niż 3 rzeczy, albo chcesz je dodatkowo opisać. Przed każdym myślnikiem/liczbą postaw jakiś tabulator, żeby było jasne, ze to elementy listy. Przykład:

Tu musiałem użyć znaków podkreślenia, gdyż nie działają znaki typu niełamliwa spacja, ale mimo tego wygląda czytelniej niż:

Kolory

Nie używaj kolorów ekstremalnie kontrastowych. Użycie jasnoczerwonego (ff0000) na np. żółtym (ffff00) lub niebieskim (0000ff) tle to koszmar. Kolor czcionki powinien być innym odcieniem koloru tła: jeżeli tło jest jasnoniebieskie, tekst powinien być ciemnoniebieski. Najlepiej użyć skali HSV.

A teraz przyjrzyjcie się tym kilku linijkom:

Które są poprawnie pokolorowane? Czarno-biały zawsze wygląda czysto. Żółto-czerwony razi w oczy. Czerwono-niebieski też kłuje. Ciemnożółty-jasnożółty już wygląda lepiej. Fioletowo-różowy mimo niewielkiego kontrastu jest bardziej czytelny niż trzeci zestaw. Biało-niebieski również wygląda ładnie.

Jak widać dodatkowo: po konwersji na JPG (wrzucałem PNG) tekst jest jeszcze mniej czytelny. Najgorzej wypadł zestaw czerwono-niebieski, gdyż te kolory są nie mają wspólnego koloru składowego.

Obok jest tabelka kolorów z programu AbiWord. Jak widać twórcy pomyśleli i bardzo ładnie poukładali odcienie kolorów w kolumnach. Również zestawy złożone z sąsiadujących kolumn nie wyglądają najgorzej.

Justowanie

Dość częsty błąd na stronach internetowych. Tekst jest wyrównany tylko do lewej krawędzi. Wtedy każda linijka tekstu kończy się w innym miejscu i tekst wygląda bardzo "niespójnie". Justowanie tworzy solidny blok tekstu. Linijka jest poszerzana dzięki (niemal niezauważalnemu) zwiększeniu odległości między wyrazami. Przykład tekstu niewyjustowanego:

Cięte ręcznie, poniewać na blogu dp na szczęście tego błędu nie idzie popełnić.