Utrzymuj pionowy rytm dzięki CSS i jQuery

Zawartość

• Układanie typu
• Rytm pionowy
• Prowadzenie rytmu
• Radzenie sobie z obrazami
• Ulepszanie jQuery
• Wniosek

• Potrzebna wiedza: CSS, podstawowe jQuery
• Wymaga: jQuery, CSS, HTML
• Czas projektu: 30 minut
• Pobierz pliki źródłowe

Zakładając, że projektujesz od treści, jest to pierwsza decyzja, która wpłynie na Twój projekt ma być związane z typem. Nawet przez nie wybierając krój pisma, zrobiłeś coś, co ma wpływ na Twoją witrynę. Typografia to podstawa druku i projektowania witryn internetowych, a ponadto jest złożona; istnieje wiele nagromadzonych terminów, praktyk, zasad i technik, które składają się na jego dobre wykorzystanie. Ten artykuł dotyczy jednej techniki zarządzania jednym aspektem pisma, który jest trudny do wykonania w Internecie, ale jest rutynowy w druku: utrzymanie spójnego rytmu w pionie, co z kolei pozwala nam uzyskać profesjonalny układ.

Układanie typu

W druku, dla każdego elementu z dużą ilością tekstu, podstawą projektu będzie prawdopodobnie siatka bazowa. Służy do nadania struktury stronie i kieruje pionowym przepływem treści. Prawie wszystko jest umieszczone w odniesieniu do tej siatki bazowej. Nie martw się, jeśli nie rozpoznajesz terminów, nikt nie jest zaznajomiony z liniami bazowymi ani siatkami bazowymi; już o nich wiesz. Przypomnij sobie szkołę, kiedy niewątpliwie pisałeś na papierze w linie - kiedy pisałeś, umieściłeś dolną część swoich listów równo na każdym z wierszy na papierze. Linia bazowa i siatka linii bazowych w akcji. Linia bazowa to wyimaginowana linia, do której wyrównują się dolne litery.Jeśli spojrzysz teraz na ten artykuł, „zobaczysz” linię bazową, mimo że tak naprawdę nie ma linii. Twój mózg umieszcza je tam dla Ciebie, dlatego możesz czytać zdania. Linie na papierze w linie? Są siatką bazową. Prosto, aby twoje zdania były proste i ustawione w regularnych odstępach, aby tekst miał regularny rytm pionowy.

Rytm pionowy

Rytm pionowy określa, gdzie na stronie znajduje się tekst. Jest to jeden z elementów, który wpływa na naszą zdolność do skanowania i czytania bloków tekstu i pomaga w kształtowaniu naszych reakcji emocjonalnych. Kiedy tekst ma silny rytm pionowy i dobre odstępy, uważamy, że jest profesjonalny, przemyślany, autorytatywny i wygodny do czytania. Kiedy tekst ma słaby rytm i odstępy, wydaje nam się, że jest mniej przemyślany, mniej profesjonalny i często trudniejszy do odczytania. Rytm pionowy to po części użyteczność, a po części estetyka.

Prowadzenie rytmu

Niestety, Internet jest nadal biednym kuzynem druku, jeśli chodzi o jego zdolność do wprowadzania pewnych podstawowych praktyk dotyczących czcionek. W Internecie nie możemy używać siatki bazowej w taki sam sposób, jak robi to projektant druku (lub dziecko w szkole) - nie możemy wyrównać linii bazowej tekstu do siatki linii bazowych dokumentu. CSS nie ma koncepcji siatki bazowej. Tak więc nasz tekst nie będzie dokładnie leżał na liniach siatki bazowej. Zamiast tego zostanie wyśrodkowany pionowo w szczelinie między liniami. To najlepsze, co może zrobić internet.

Zajmijmy się praktycznością z przykładowym dokumentem. Po pierwsze, ustawimy rytm, tworząc widoczną siatkę bazową. W tym celu użyjemy powtarzającego się obrazu tła, aby narysować regularne poziome linie oddalone od siebie o 22 piksele:

1. html {background: #fff url (baseline_22.png); }

Hurra, mamy nasz papier w linie!

Zauważysz, że nic się nie zgadza. Aby wszystko się zgadzało, chcemy, aby dolna krawędź wszystkich elementów trafiała w jedną z tych linii. Najłatwiejszym sposobem jest upewnienie się, że wszystkie elementy zajmują wysokość w pionie (łącznie z marginesami) będącą wielokrotnością 22. Oto kilka CSS, które właśnie to robi. Używam jednostki REM, ale daję rezerwę EM dla przeglądarek, które nie rozumieją REM. W komentarzach dołączam również odpowiednik jednostki PX. Jeśli jeszcze nie rozumiesz REM / EM, możesz po prostu użyć zamiast tego wartości px - wszystkie są równoważne:

1. html {/ * rozmiar czcionki: 16 pikseli, wysokość wiersza: 22 piksele * /
2. czcionka: 100% / 1,375 „Helvetica Neue”, Helvetica, Arial, sans-serif;
3. tło: #fff url (baseline_22.png); }
5. h1, h2, h3, h4, h5, h6 {/ * margin-top i bottom mają rozmiar 22px * /
6. / * em fallback * / margin: 1.375em 0;
7. margines: 1,375rem 0; }
8. h1 {/ * rozmiar czcionki to 32 piksele, wysokość wiersza to 44 piksele * /
9. / * em fallback * / font-size: 2em;
10. font-size: 2rem; wysokość linii: 1,375; }
11. h2 {/ * rozmiar czcionki to 26 pikseli, wysokość linii to 44 piksele * /
12. / * em fallback * / font-size: 1,75em;
13. rozmiar czcionki: 1,75rem; wysokość linii: 1,5714285714; }
14. h3, h4, h5, h6 {/ * rozmiar czcionki to 22 piksele, wysokość wiersza to 22 piksele * /
15. / * em fallback * / font-size: 1.375em;
16. font-size: 1.375rem; wysokość linii: 1; }
17. p, ul, blockquote {/ * dolny margines to 22 piksele, wysokość wiersza jest dziedziczona z html (22px) * /
18. / * em fallback * / margin-top: 0; margin-bottom: 1,375em;
19. margin-top: 0; margin-bottom: 1,375rem; }

Przyjrzyjmy się, co nam to daje. Zauważ, że cały tekst jest ładnie wyrównany? Nie znajduje się na linii bazowej, ale ma przewidywalny rytm pionowy. Jest ładnie i schludnie.

Radzenie sobie z obrazami

Obrazy komplikują sprawę. Spójrz, co dzieje się z naszym rytmem, gdy je uwzględniamy. Zakłócają to jak przeskok w płycie - tempo jest właściwe, ale wyczucie czasu jest wyłączone. Wyrównanie zostanie przesunięte. Dzieje się tak, ponieważ obrazy prawdopodobnie nie będą miały wysokości będącej wielokrotnością linii bazowej, więc dolna krawędź nie pokrywa się z naszą siatką bazową.

Aby to naprawić, wszystko, co naprawdę musimy zrobić, to dodać margines do każdego obrazu, tak aby dół marginesu był wyrównany z naszą siatką. Co jest wystarczająco proste, aby zautomatyzować za pomocą niewielkiej ilości JavaScript. Oto nasz podstawowy plan:

1. Określ wysokość każdego obrazu.
2. Zobacz, ile razy wartość linii bazowej dzieli się na przestrzeń pionową, którą obecnie zajmuje obraz, i uzyskaj resztę.
3. Odejmij resztę od linii bazowej, aby uzyskać przesunięcie, które musimy zastosować na obrazie.
4. Zastosuj przesunięcie jako margines na dole obrazu.

Dolna część pionowej przestrzeni obrazu byłaby teraz prawidłowo wyrównana z siatką linii bazowych. Oto podstawowa funkcja w jQuery, która robi to:

1. $ (window) .bind (’load’, function () {
2. $ ("img"). each (function () {
3. / * zmienne * /
4. var this_img = $ (this);
5. var baseline = 22;
6. var img_height = this_img.height ();
7. / * wykonaj obliczenia * /
8. var elseder = parseFloat (img_height% baseline);
9. / * ile musimy dodać? * /
10. var offset = parseFloat (reszta linii bazowej);
11. / * zastosuj margines do obrazu * /
12. this_img.css ("margin-bottom", offset + "px");
13. });
14. });

Dlaczego window.bind linia? Ponieważ musimy poczekać, aż obrazy zostaną załadowane, zanim będziemy mogli wiarygodnie uzyskać ich rozmiary. Oto przykład z uruchomionym podstawowym kodem.

Ulepszanie jQuery

Świat rzadko jest prosty, więc okazuje się, że mamy do czynienia z kilkoma szczegółami implementacji. Co jest nie tak z funkcją, którą mamy? Dużo:

• Daje nieprzyjemne wyniki z obrazami, które są wbudowane, a nie pływające lub blokowane.
• Wydaje się, że niektóre obrazy są wadliwe, szczególnie te w kontenerach.
• Nie dotyczy układów płynnych.
• Nie nadaje się do ponownego użycia.

Nie chcemy stosować tego zachowania do obrazów wbudowanych, takich jak uśmiechnięta buźka w przykładzie. Obrazy w treści są wyrównane, tak aby dolna krawędź znajdowała się na tej samej linii bazowej co tekst (nie siatka bazowa). Oznacza to, że obraz jest przesunięty w pionie. Ani CSS, ani JS nie dają nam sposobu, aby dowiedzieć się, gdzie znajduje się linia bazowa elementu tekstowego, więc nie znamy przesunięcia. Musimy zignorować obrazy wbudowane i zastosować naszą poprawkę tylko do obrazów, dla których ustawiono Blok wyświetlacza (na szczęście każdy pływający obraz jest automatycznie ustawiany na blok wyświetlania).

Jeśli obraz znajduje się w kontenerze, margines zastosowany do obrazu może być ukryty z powodu ustawień przepełnienia w kontenerze. Ponadto możemy nie chcieć marginesu na obrazie, ale zamiast tego na elemencie kontenera. W tym przykładzie wolelibyśmy mieć marginesy na białym polu niż na obrazie wewnątrz pola, dzięki czemu możemy uniknąć dziwnych luk, które pojawiają się w ramce.

Funkcja działa tylko raz, ale w płynnym projekcie obrazy zmieniają wysokość, gdy przeglądarka jest zmieniana (spróbuj zmienić rozmiar przykładu na coś dość wąskiego, aby to zobaczyć). Zmiana rozmiaru ponownie łamie rytm. Potrzebujemy tej funkcji, aby działała po zmianie rozmiaru przeglądarki, a także po załadowaniu strony. Płynne układy powodują również inne problemy; obrazy mogą mieć wysokość ułamków pikseli, na przykład 132,34px. To z kolei może spowodować nieoczekiwane rezultaty, nawet jeśli zastosujemy ułamkowy margines (jeśli jesteś zainteresowany, oto dlaczego: trac.webkit.org/wiki/LayoutUnit). Będziemy więc musieli wmasować obraz w całą wysokość piksela, aby uniknąć błędów układu spowodowanych ułamkami pikseli.

Na koniec powinniśmy uczynić z tego funkcję bardziej nadającą się do ponownego użycia. W rzeczywistości, biorąc pod uwagę złożoność rozwiązania praktycznego, którego wymaga rozwiązanie teoretyczne, powinniśmy stworzyć wtyczkę, którą można będzie ponownie wykorzystać w innych projektach.

W ostatnim przykładzie znajdziesz kod, który osiąga to wszystko. Wtyczka JavaScript jest mocno skomentowana, więc możesz ją śledzić. Możesz użyć wtyczki, wywołując ją w następujący sposób:

1. $ (window) .bind (’load’, function () {
2. $ ("img"). baselineAlign ();
3. });

Możesz też powiedzieć wtyczce, aby zastosowała margines do nazwanego kontenera, jeśli istnieje jako element nadrzędny obrazu:

1. $ (window) .bind (’load’, function () {
2. $ ("img"). baselineAlign ({kontener: '. popup'});
3. });

Wniosek

Utrzymywanie dobrego rytmu pionowego to subtelna, ale skuteczna praktyka projektowa stosowana regularnie w druku. Znasz teraz podstawowe zasady, masz praktyczną wiedzę na temat linii bazowych i siatki linii bazowych oraz znasz niektóre ograniczenia układu tekstu CSS w porównaniu z drukowaniem. Wiesz również, jak obejść te ograniczenia, komponować dokumenty w dowolnym pionowym rytmie i masz narzędzie, które pomaga radzić sobie z destrukcyjną zawartością obrazu.

Wraz z dojrzewaniem CSS nadal otrzymujemy więcej funkcji zgodnych z naszymi kuzynami drukowanymi, więc dobre zrozumienie czcionki stanie się ważniejsze przy tworzeniu wysokiej jakości witryn internetowych. Jeśli chcesz dowiedzieć się więcej na temat pisania w ogóle, gorąco polecam www.thinkingwithtype.com (i kupując książkę, aby z nią korzystać). Jeśli szukasz artykułów CSS na temat traktowania typów, znajdziesz wiele artykułów zarówno tutaj, jak i w innych miejscach w sieci. Polecam również zapoznanie się z najnowszymi wiadomościami Marka Boultona i Elliota Jaya Stocksa, z których obaj często mówią o czcionkach w kontekście projektowania stron internetowych.

Baw się dobrze!