Aby rozmieścić jeden artykuł w obszarach w stylu magazynu na Macu, użyj kolumn CSS w układzie przeglądarkowym lub połączonych pól tekstowych w Pages, jeśli obszary mają być rozmieszczone swobodnie. CSS Regions opisywało automatyczny przepływ między osobnymi polami przeglądarki, ale obecne przeglądarki na komputery nie obsługują tej funkcji. Zgodność z CSS Regions

Ten poradnik pomoże Ci wybrać i utworzyć układ dla jednego ciągłego artykułu: tekst zaczyna się w obszarze A, przechodzi do B i kończy w C. Przykład przeglądarkowy wykorzystuje tekst przykładowy w lokalnym dokumencie, nad którym masz kontrolę; nie modyfikuje istniejącej publicznej witryny.

Czy przeglądarka może automatycznie łączyć osobne obszary tekstu?

Projekt W3C CSS Regions opisuje dokładnie taki układ. Źródło dostarcza treść do nazwanego przepływu za pomocą flow-into, a pola docelowe odbierają ją za pomocą flow-from. Cele tworzą łańcuch w kolejności dokumentu, dzięki czemu treść może przechodzić między polami o różnych pozycjach i wymiarach. Opublikowany dokument pozostaje jednak wersją roboczą datowaną na 9 października 2014 r. Sam opis funkcji w specyfikacji nie oznacza, że jest ona dostępna w przeglądarkach. Moduł CSS Regions Level 1

Aktualne informacje o zgodności wskazują, że CSS Regions nie jest obsługiwane w Safari, Chrome, Firefox ani Edge. WebKit odnotowuje również usunięcie tej funkcji w zakończonym zgłoszeniu dotyczącym implementacji. Dodanie starych deklaracji do nowoczesnej strony nie zapewnia więc niezawodnego przepływu tekstu artykułu. Zgodność z CSS Regions, Usunięcie obsługi CSS Regions

Zacznij od ustalenia, który element zamierzonego układu jest niezbędny. Trzy równe kolumny, trzy niezależnie rozmieszczone pola i trzy drukowane strony wymagają różnych narzędzi.

Wymagany rezultat Praktyczne rozwiązanie Ograniczenie
Ciągły artykuł w regularnych kolumnach przeglądarki Natywny układ wielokolumnowy CSS Kolumny należą do jednego kontenera
Strony generowane przez przeglądarkę do druku lub PDF Paged.js Paginacja wymaga skryptu i odpowiedniej konfiguracji dokumentu
Przepływ tekstu przez dowolnie rozmieszczone pola na Macu Połączone pola tekstowe w Pages Wynikiem jest dokument Pages
Automatyczny przepływ przez dowolne pola przeglądarki Własna implementacja układu Wycofana funkcja CSS Regions nie może tego zapewnić

Te rozwiązania odpowiadają opisanym modelom: MDN opisuje generowane kolumny, Paged.js — podział na strony, a Apple — połączone wątki pól tekstowych. Potraktuj tabelę jako pomoc w wyborze, opracowaną na podstawie tych możliwości. Układ wielokolumnowy, Jak działa Paged.js, Łączenie pól tekstowych w Pages na Macu

Utwórz ciągły artykuł w przeglądarce za pomocą kolumn CSS

Wybierz tę metodę, jeśli regularne kolumny spełniają wymagania projektu. Umieść cały tekst artykułu w jednym kontenerze i pozwól przeglądarce ustalić, gdzie kończy się każda kolumna. MDN wyjaśnia, że układ wielokolumnowy tworzy ciągły przepływ, ale nie pozwala niezależnie ustawiać różnych szerokości ani osobnych kolorów tła poszczególnych kolumn. Układ wielokolumnowy

Na Macu otwórz TextEdit i wybierz Plik > Nowy, a następnie Format > Zwykły tekst. Wklej cały poniższy dokument, zapisz go jako article-columns.html i po wyświetleniu monitu wybierz Użyj .html. Są to opisane przez Apple kroki tworzenia pliku HTML w TextEdit. Praca z dokumentami HTML w TextEdit na Macu

Poniżej znajduje się kompletny dokument HTML z osadzonymi stylami i przykładową treścią. Nie wymaga biblioteki, zasobów sieciowych ani JavaScriptu. Otwórz zapisany plik w przeglądarce, aby sprawdzić układ; renderowanie nie było tu testowane.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Article A: Column Study</title>
  <style>
    * { box-sizing: border-box; }
    body {
      margin: 0;
      padding: 24px;
      background: #f4f1e9;
      color: #262626;
      font: 18px/1.6 Georgia, serif;
    }
    main {
      max-width: 960px;
      margin-inline: auto;
    }
    h1 {
      margin: 0 0 24px;
      font-size: 2rem;
      line-height: 1.15;
    }
    article {
      columns: 260px 3;
      column-gap: 24px;
      column-rule: 1px solid #bdb7ab;
      column-fill: balance;
      overflow-wrap: anywhere;
    }
    p { margin: 0 0 1em; }
    @media (max-width: 640px) {
      article { columns: auto; }
    }
  </style>
</head>
<body>
  <main>
    <h1>Article A: Column Study</h1>
    <article aria-label="Synthetic article">
      <p>Section A begins with a study of simple forms. A square,
      a circle, and a narrow rectangle sit on a pale surface.
      Their spacing establishes a steady visual rhythm.</p>
      <p>The first arrangement leaves generous space around each
      form. The second brings the forms closer together. Both
      arrangements use the same pieces in a different order.</p>
      <p>Section B considers the surface beneath the forms.
      A smooth sheet creates an even field. A folded sheet
      introduces a line that changes the composition.</p>
      <p>A small label identifies each arrangement. Label A
      belongs to the wider spacing, while label B belongs to
      the closer spacing. The labels remain part of the text.</p>
      <p>Section C returns to the complete composition. The
      rectangle sits near one edge, with the circle beside it.
      The square completes the sequence at the other end.</p>
      <p>The final arrangement leaves an open area in the
      center. All three forms remain visible, and the text
      ends here with the marker END-A.</p>
    </article>
  </main>
</body>
</html>

Skrót columns określa preferowaną szerokość 260 pikseli CSS i maksymalnie trzy kolumny. Przeglądarka ustala, ile z nich się zmieści. Przy pełnej szerokości treści wynoszącej w przykładzie 960 pikseli trzy kolumny oddzielone dwiema przerwami o szerokości 24 pikseli miałyby orientacyjnie po (960 − 2 × 24) ÷ 3 = 304 pikseli CSS. To obliczenie zostało sprawdzone; nie jest pomiarem wykonanym w przeglądarce. Układ wielokolumnowy

Nagłówek pozostaje nad artykułem, ponieważ znajduje się poza kontenerem kolumn. Wszystkie sześć akapitów zachowuje pierwotną kolejność w jego wnętrzu. Zmień szerokość okna przeglądarki, aby sprawdzić węższy układ, a następnie znajdź końcowy znacznik END-A, by potwierdzić, że możesz dotrzeć do końca artykułu.

Kontroluj wypełnianie kolumn bez ukrywania reszty tekstu

W przykładzie wysokość artykułu jest automatyczna, a ustawienie column-fill: balance równoważy kolumny. Jeśli projekt wymaga wypełnienia jednej kolumny do określonej wysokości przed przejściem dalej, odpowiednim ustawieniem jest column-fill: auto. MDN opisuje różnice w obsłudze i zauważa, że Chrome uwzględnia auto tylko wtedy, gdy kontener ma określony wymiar w osi bloku, na przykład wysokość w tym poziomym układzie. column-fill

Stała wysokość wprowadza ważny warunek błędu: nadmiarowy tekst może utworzyć dodatkowe kolumny poziomo, poza kontenerem. Ustawienie wysokości nie ogranicza artykułu do widocznych kolumn. MDN wyraźnie opisuje takie zachowanie przy przepełnieniu. Nie ukrywaj tej pozostałej treści za pomocą overflow: hidden. Obsługa przepełnienia w układzie wielokolumnowym

W układzie do czytania zachowaj używaną powyżej automatyczną wysokość, chyba że pozioma kontynuacja jest zamierzona. Jeśli eksperymentujesz z kolumnami o stałej wysokości, sprawdź pełny zasięg w poziomie i ponownie skontroluj końcowy znacznik po każdej zmianie rozmiaru czcionki lub szerokości. Schludny wygląd pierwszego ekranu nie wystarcza, by mieć pewność, że zmieścił się cały artykuł.

Traktuj podziały akapitów jako strukturę treści, a nie z góry ustalone końce kolumn. W przypadku krótkich, zgrupowanych elementów można użyć break-inside: avoid, aby ograniczyć ich dzielenie, jak pokazuje MDN na przykładzie kart. Zastosowanie tej reguły do każdego długiego akapitu może zmniejszyć elastyczność układu, więc używaj jej tylko wtedy, gdy zachowanie konkretnego fragmentu w całości ułatwia czytanie. Układ wielokolumnowy

Co zrobić, gdy obszary muszą mieć różne kształty lub położenie?

Rozważ abstrakcyjny układ, w którym szeroki obszar A znajduje się nad wąskim obszarem B, a osobny obszar C — w prawym dolnym rogu. Nie da się odtworzyć takiego dowolnego łańcucha za pomocą kolumn CSS przez samo umieszczenie trzech kontenerów na stronie. Ich automatyczny przepływ należy do kontenera wielokolumnowego; osobnym mechanizmem zaprojektowanym do łączenia pól docelowych był projekt CSS Regions. Układ wielokolumnowy, Moduł CSS Regions Level 1

Jeśli w kompozycji na Macu niezbędne są dowolnie rozmieszczone pola, Pages oferuje udokumentowaną funkcję łączenia wątków tekstu. Zacznij od trzech pól tekstowych rozmieszczonych jako A, B i C, a następnie umieść cały artykuł w pierwszym polu. Apple pozwala rozpocząć wątek zarówno od pustego pola, jak i od pola, które zawiera już tekst. Łączenie pól tekstowych w Pages na Macu

  1. Zaznacz pole A i kliknij białe kółko u góry, aby rozpocząć wątek.
  2. Zaznacz każde puste pole docelowe i kliknij jego białe kółko, aby dołączyć je do wątku. Sprawdź, czy kolor kółek jest taki sam i czy numery wskazują prawidłową kolejność.
  3. Aby poprawić kolejność, kliknij kółko pola i wybierz jego numer w sekcji Kolejność układu.
  4. Jeśli w ostatnim polu pojawi się wskaźnik przycięcia, powiększ pole lub dodaj kolejne połączone pole. Nie można łączyć zablokowanych ani zgrupowanych pól. Łączenie pól tekstowych w Pages na Macu

Przeniesienie pola w inne miejsce na tej samej stronie nie zmienia automatycznie kolejności odczytu wątku. Używaj opcji Kolejność układu świadomie. Dzięki temu Pages jest praktycznym rozwiązaniem dla takiej kompozycji wizualnej, przy czym wątki pól tekstowych nie dodają tej funkcji do przeglądarki. Łączenie pól tekstowych w Pages na Macu

Kiedy warto użyć Paged.js lub polyfillu CSS Regions?

Wybierz Paged.js, gdy oczekiwanym rezultatem jest sekwencja stron. Oficjalna dokumentacja opisuje mechanizm dzielący treść na strony, który umieszcza ją na stronie, wykrywa przepełnienie i kontynuuje na nowo utworzonych stronach. To przydatny model paginacji w przeglądarce, ale dokumentacja nie potwierdza obsługi dowolnego przepływu przez niezależnie rozmieszczone obszary ekranu. Jak działa Paged.js

Udokumentowana konfiguracja przeglądarkowa wymaga HTML i CSS, skryptu Paged.js, serwera WWW oraz przeglądarki. To więcej wymagań niż w przypadku przedstawionego wcześniej samodzielnego przykładu w lokalnym pliku. Postępuj zgodnie z instrukcją konfiguracji biblioteki i sprawdź wygenerowane strony przed eksportem. Pierwsze kroki z Paged.js

W przypadku eksportu do PDF instrukcja zaleca otwarcie okna drukowania w przeglądarce po paginacji, wybranie zapisu do PDF, usunięcie marginesów wydruku oraz nagłówków i stopek przeglądarki, a także włączenie grafiki tła. Nazwy opcji drukowania mogą się różnić w zależności od przeglądarki. Pierwsze kroki z Paged.js

Starszy projekt Adobe CSSRegions.js wierniej symuluje przepływ między obszarami, ale jego dokumentacja określa go jako eksperymentalny i wyraźnie odradza używanie go w produkcji jako zamiennika natywnej obsługi. Przykłady są przydatne do zrozumienia historycznej propozycji, ale nie stanowią dowodu na obecne możliwości przeglądarek. Polyfill JavaScript dla CSS Regions

Zachowaj kształtowanie tekstu przez przeglądarkę podczas dostosowywania układu

W miarę możliwości pozostaw całe akapity jako tekst przeglądarki. Nie szacuj pojemności obszaru, przypisując mu stałą liczbę znaków. Specyfikacja tekstowa W3C opisuje kształtowanie tekstu na granicach elementów liniowych oraz warunki, które je przerywają, w tym zmiany dotyczące odstępów, wyrównania lub izolacji. Dzielenie tekstu na fragmenty i niezależne stylizowanie może zatem zmienić więcej niż tylko ich położenie. Moduł CSS Text Level 3

Pomiar tekstu na canvasie również nie wystarcza do ułożenia artykułu. WHATWG określa, że measureText() zwraca metryki podanego tekstu, a fillText() rysuje tekst we wskazanych współrzędnych. Algorytm przygotowania tekstu korzysta z nieskończenie szerokiego pola wiersza; podana maksymalna szerokość może sprawić, że tekst zostanie dopasowany do tej szerokości. Te operacje nie powodują automatycznej kontynuacji akapitu przez kilka obszarów DOM. Standard HTML: Canvas

Na potrzeby tego zadania natywne kolumny pozostawiają przeglądarce kontrolę nad łamaniem wierszy i renderowaniem tekstu. Jeśli dowolne obszary przeglądarki nadal są niezbędne, własna implementacja musi uwzględniać zmiany tekstu, metryki czcionek, dostępne wymiary i nieumieszczoną treść. Potraktuj to jako osobny projekt układu, a nie krótki skrypt dzielący tekst według liczby znaków.

Zanim zdecydujesz się na projekt, sprawdź go w szerokim i wąskim oknie oraz przy powiększonym tekście przeglądarki. Przeczytaj artykuł od pierwszego akapitu do END-A, sprawdź kolejność kontynuacji i poszukaj przyciętej lub przesuniętej w poziomie treści. Użyj kolumn przeglądarki, gdy wystarczy regularny przepływ, Paged.js, gdy celem są strony, a wątków Pages, gdy kompozycja zależy od rozmieszczenia poszczególnych pól.

Źródła