Rynny - wypełnienie i margines dla kolumn z tłem lub ramką

Jakie są zalecane wytyczne dotyczące projektowania rynien, gdy kolumna (lub ramka lub dowolny moduł układu) ma wyraźnie widoczny kształt, ponieważ ma własne tło lub obramowanie?

Zazwyczaj umieszcza się przestrzeń między krawędzią pola a jego tekstem. Ale skąd wyczarować tę przestrzeń? Przez rozszerzanie pola lub kurczy tekst ?

Aby to zilustrować, oto niektóre (ale nie wszystkie) opcje ...

(Mogłem też użyć dowolnej siatki z dowolną liczbą kolumn i dowolnych szerokościami - to tylko przykład - właściwe pytanie można zadać za każdym razem, gdy układ otacza rynny).

Przeszedłem przez stos pisania na układach opartych na siatce, ale do tej pory widziałem tylko jeden, który dotyczy tej sprawy: Posuń swoje elementy przez Khoi Vinh.

czego mi brakuje? A może po prostu nie ma jasnych wytycznych?

Ponieważ jedną z motywów dla układów opartych na siatce jest zwiększenie poczucia globalnego dopasowania, przypuszczam, że można argumentować, że decyzja zależy od tego, co wymaga większego dopasowania; pudełko lub jego zawartość?

O ile się nie mylę, Khoi Vinh opowiada się za opcją 3 w swoim artykule.

Czuję, że chodzę tam iz powrotem pomiędzy opcją 3 i opcją 6. W przypadku opcji 3 pole jest wyrównane, ale jego tekst jest ciasny. Ale używając opcji 6, kończy się bez wyrównania ramki i tekstu (choć można powiedzieć, że ukryty środek między krawędzią tekstu a ramką jest „rzeczą”, która jest teraz wyrównana).

Wychodząc poza sieć, moje czytanie o projektowaniu książek i kanonach budowy stron nie mówi o tym problemie. Widzę, jak działają kanony w przypadku drukowania książek w „czarnej literze na czystym tle”, ale gdy tylko doda kolor do układu strony (lub odwróci czarno-biały schemat), pytanie rynnowe powraca.

Myślę, że pytanie brzmi; czy istnieją jakieś wytyczne dotyczące wyboru między przedstawionymi przeze mnie opcjami - czy też odważyłem się wyjść poza prawo projektantów i czy chodzi tylko o to, „co wygląda i dobrze się czuje” ?

Za każdym razem, gdy korzystasz z siatki, musisz jej używać konsekwentnie, z wyjątkiem przypadków, gdy jeden element (zwykle nie więcej niż jeden na danej stronie) narusza go z ważnego powodu - aby go wyróżnić lub zmienić nastrój strony . Kontrast musi być odważny i wyraźnie celowy, aby to zadziałało. (Przez „pracę” rozumiem, że to nie wygląda na pomyłkę).

Ściśle przestrzegana siatka jest spokojna. Napięcie jest niewielkie, jeśli w ogóle; rzeczy pokazują się tam, gdzie oczekuje ich oko, a czytelnik nigdy nie jest zaskoczony ani nie czuje się nieswojo.

W takim przypadku, jeśli twoje tło trochę narusza siatkę, jak w punkcie 4, wygląda to na błąd. To niezręczne. Całkowity brak rynny tłoczy pudło o pozostałe kolumny. Wbrew otwartemu prowadzeniu tekstu, który określa oczekiwanie otwartości, jest to oczywiście po prostu niewłaściwe.

0 nie zapewnia kontrastu, dzięki czemu druga kolumna jest niezróżnicowana od reszty. W niektórych okolicznościach tego właśnie chcesz.

Przykłady „pół-rynny” w punktach 5 i 6 redefiniują rynnę, czyniąc ją węższą. W rzeczywistości redefiniują całą siatkę poziomo i pionowo, ponieważ w tym przypadku rynna kończy się dokładnie tak samo, jak odstępy między liniami. Samo to szkodzi tekstowi, ale może współpracować z ramką. Jednak w # 6 masz nieproporcjonalne białe znaki po obu stronach tekstu w porównaniu z górą i dołem. Jest to niewygodne i niewygodne, ponieważ nie ma sensu. Lepiej byłoby # 5, ponieważ biała przestrzeń jest bardziej równomiernie rozłożona. Z tego samego powodu lepiej wybrać numer 3 niż numer 2.

Ogólnie rzecz biorąc, zgodziłbym się z Lauren i poleciłbym # 3 jako najlepszy strzał. Jest to również najlepszy ogólny przypadek, niezależnie od liczby kolumn.

Istnieją zasady. Można je oczywiście zepsuć, jeśli masz dobry powód, ale za każdym razem, gdy to robisz, musisz być celowy, odważny i wyraźnie „zaprojektowany”. Helvetica Black w połączeniu z Gruzją działa, ponieważ są różne; Trebuchet w połączeniu z Verdaną denerwuje nerwy, ponieważ nie są wystarczająco różne. Może działać duże, kwadratowe, czerwone pudełko obejmujące półtora kolumny; lekko szary nie będzie.

Głosuję na Opcję 3. Krawędzie szarego pola są tym, co definiuje kolumnę w pionie, więc te linie nie mogą zostać naruszone (bez powodu). Rynny powinny być takie same dla wszystkich trzech kolumn, więc wstaw tekst w szarym polu. Wypustka opcji 2 jest trochę za głęboka.

Do tego jestem przyzwyczajony w formie drukowanej, więc wygląda również „dobrze” w Internecie.

Jeśli dotyczy to projektowania stron internetowych, zdecydowanie odradzam stosowanie jakichkolwiek dopełnień w kierunku poziomym, jeśli chodzi o spójność w różnych przeglądarkach. Różne przeglądarki traktują div i padding na tyle inaczej, że prezentacja może się zepsuć.

Niezależnie od tego, którą drogę wybierzesz, użyj marginesu tylko w poziomie. Wymaga to dodania klasy lub dwóch, aby uzyskać dokładnie taki układ, jaki chcesz (na przykład jeden zestaw marginesów dla div i inny dla akapitu), ale na dłuższą metę jest bardziej niezawodny. Wykładziny pionowe na ogół nie stanowią problemu.