Strona używa cookies (ciasteczek). Dowiedz się więcej o celu ich używania i zmianach ustawień. Korzystając ze strony wyrażasz zgodę na używanie cookies, zgodnie z aktualnymi ustawieniami przeglądarki.    X

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:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed porta aliquam cursus. Morbi eros augue, rhoncus at euismod luctus, varius eget felis. Donec rhoncus tempus lorem nec tincidunt. Aliquam ligula leo, mollis ac rhoncus sed, tempus quis risus. Nam leo magna, pulvinar at venenatis vitae, aliquam eu tellus. Vivamus non ipsum non erat tincidunt euismod. Sed malesuada pulvinar arcu a egestas. Pellentesque non nibh diam. Integer mi augue, sagittis vitae vestibulum quis, eleifend malesuada mi. Suspendisse potenti. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vivamus pellentesque elit vel eros congue dignissim. Sed vitae luctus metus. In lobortis, libero vel vehicula pellentesque, dui justo tempus lectus, in consectetur tellus purus nec elit.Phasellus in mollis arcu. Nunc commodo, dui ut rutrum accumsan, urna tortor elementum nunc, a ultrices lectus elit non mauris. Duis pharetra malesuada est id malesuada. Nulla mollis egestas facilisis. Maecenas molestie dolor in felis viverra viverra. Suspendisse non risus at arcu tincidunt mattis non molestie leo. Nulla facilisi. Donec cursus sagittis dui in elementum. Ut posuere lectus eget arcu volutpat non rhoncus neque scelerisque. Vivamus et lacus quis libero porta pharetra id sed libero. Nunc tortor dui, tristique vitae blandit a, semper dignissim tellus. Nullam aliquet ipsum ac orci congue viverra congue nisi viverra. Suspendisse porta ante quis mauris semper eu mattis odio semper.

z:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed porta aliquam cursus. Morbi eros augue, rhoncus at euismod luctus, varius eget felis. Donec rhoncus tempus lorem nec tincidunt. Aliquam ligula leo, mollis ac rhoncus sed, tempus quis risus. Nam leo magna, pulvinar at venenatis vitae, aliquam eu tellus. Vivamus non ipsum non erat tincidunt euismod.

Sed malesuada pulvinar arcu a egestas. Pellentesque non nibh diam. Integer mi augue, sagittis vitae vestibulum quis, eleifend malesuada mi. Suspendisse potenti. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vivamus pellentesque elit vel eros congue dignissim. Sed vitae luctus metus.

In lobortis, libero vel vehicula pellentesque, dui justo tempus lectus, in consectetur tellus purus nec elit. Phasellus in mollis arcu. Nunc commodo, dui ut rutrum accumsan, urna tortor elementum nunc, a ultrices lectus elit non mauris. Duis pharetra malesuada est id malesuada. Nulla mollis egestas facilisis. Maecenas molestie dolor in felis viverra viverra.

Suspendisse non risus at arcu tincidunt mattis non molestie leo. Nulla facilisi. Donec cursus sagittis dui in elementum. Ut posuere lectus eget arcu volutpat non rhoncus neque scelerisque. Vivamus et lacus quis libero porta pharetra id sed libero. Nunc tortor dui, tristique vitae blandit a, semper dignissim tellus. Nullam aliquet ipsum ac orci congue viverra congue nisi viverra. Suspendisse porta ante quis mauris semper eu mattis odio semper.

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:

__1. Pierwszy punkt
__2. Drugi punkt
__3. Trzeci punkt
____a) pierwszy podpunkt
____b) drugi podpunkt
__4. Czwarty punkt

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

1. Pierwszy punkt
2. Drugi punkt
3. Trzeci punkt
a) pierwszy podpunkt
b) drugi podpunkt
4. Czwarty punkt

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:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed porta aliquam cursus. Morbi eros
augue, rhoncus at euismod luctus, varius eget felis. Donec rhoncus tempus lorem nec tincidunt.
Aliquam ligula leo, mollis ac rhoncus sed, tempus quis risus. Nam leo magna, pulvinar at
venenatis vitae, aliquam eu tellus. Vivamus non ipsum non erat tincidunt euismod.
Cięte ręcznie, poniewać na blogu dp na szczęście tego błędu nie idzie popełnić.
 

Komentarze

0 nowych
TheUsh   7 #1 01.10.2010 22:14

Dobry wpis :) Z pewnością się przyda.

Ja osobiście części tekstów na blogu nawet nie próbuję przeczytać, bo gdy widzę jeden wielki blok tekstu, to moje oczy od razu mówią weto ;)

Może sam nie piszę idealnie, ale zawsze staram się jakoś rozczłonkować tekst, a przy okazji zbytnio nie przesadzać z długością, bo wtedy jest większe prawdopodobieństwo, że ktoś go przeczyta :)

socialkaos   3 #2 04.10.2010 20:48

Dp jest słaby pod względem typografii.
Nie sądze, żeby te instrukcje coś pomogły...

"...staram się (...) zbytnio nie przesadzać z długością, bo wtedy jest większe prawdopodobieństwo, że ktoś go przeczyta :)..."





command-dos   17 #3 06.10.2010 14:39

Co do "lorem ipsum" - bardziej czytelna dla mnie jest pierwsza wersja - przynajmniej wiem, gdzie początek i koniec cytatu, a tak muszę dochodzić w której sekcji się kończy.
"...nie dopuszczajcie do akapitów dłuższych niż 8 linijek" - to już zupełna bzdura - teksty tutaj nie są kierowane do pierwszoklasistów, który gubi się w drugiej linijce... Formatowanie tekstu zależy w dużej mierze od jego zawartości - nic na siłę. Niektórych nie da się przedstawić w formie "Pana Tadka", co 4 linijki akapit - nie mówię już o tym, że tekst ma być sylabotoniczny ;)
Zgodzę się natomiast z tym, że dużo jest tekstów źle sformatowanych, np. wprowadzenie, zakończenie i wnioski bez nowego akapitu - wtedy idzie się zgubić...