Чтобы провести одну статью через области в журнальном стиле на Mac, используйте CSS-колонки для макета в браузере или связанные текстовые блоки в Pages для свободно размещённых областей. CSS Regions описывал автоматическое перемещение текста между отдельными блоками браузера, но современные браузеры для настольных компьютеров эту функцию не поддерживают. Совместимость с CSS Regions

Это руководство поможет выбрать и создать макет для одной непрерывной статьи: текст начинается в области A, продолжается в B и заканчивается в C. В примере для браузера используется искусственный текст в локальном документе, который вы контролируете; он не изменяет существующий общедоступный сайт.

Может ли браузер автоматически связывать отдельные текстовые области?

В черновике W3C CSS Regions описано именно такое расположение. Источник передаёт содержимое именованному потоку с помощью flow-into, а области назначения получают его с помощью flow-from. Области назначения образуют цепочку в порядке документа, позволяя содержимому переходить между блоками с разным расположением и размерами. Однако опубликованный документ по-прежнему имеет статус рабочего черновика от 9 октября 2014 года. Описание функции в спецификации не означает, что она доступна в браузерах. Модуль CSS Regions, уровень 1

Согласно текущим данным о совместимости, CSS Regions не поддерживается в Safari, Chrome, Firefox и Edge. WebKit также отмечает удаление этой функции в завершённой задаче по её реализации. Поэтому добавление старых объявлений на современную страницу не обеспечивает надёжного связывания текста статьи. Совместимость с CSS Regions, Удаление поддержки CSS Regions

Сначала решите, какая часть задуманного макета важнее всего. Для трёх одинаковых колонок, трёх независимо расположенных блоков и трёх печатных страниц нужны разные инструменты.

Требуемый результат Практический способ Ограничение
Непрерывная статья в обычных колонках браузера Встроенная многоколоночная раскладка CSS Колонки принадлежат одному контейнеру
Созданные браузером страницы для печати или PDF Paged.js Для разбиения на страницы требуются скрипт и подготовка документа
Текст, проходящий через свободно расположенные блоки на Mac Связанные текстовые блоки в Pages Результат — документ Pages
Автоматический поток через произвольные блоки браузера Собственная реализация макета Устаревшая функция CSS Regions этого не обеспечивает

Эти варианты соответствуют описанным моделям: MDN описывает создание колонок, Paged.js — разбиение на страницы, а Apple — цепочки связанных текстовых блоков. Воспринимайте таблицу как подсказку для выбора, основанную на этих возможностях. Многоколоночная раскладка, Как работает Paged.js, Связывание текстовых блоков в Pages на Mac

Создание непрерывной статьи в браузере с помощью CSS-колонок

Используйте этот способ, если подходят обычные колонки. Поместите весь текст статьи в один контейнер и позвольте браузеру определять окончания колонок. MDN указывает, что многоколоночная раскладка создаёт непрерывный поток, однако для её колонок нельзя независимо задавать разную ширину или собственный цвет фона. Многоколоночная раскладка

На Mac откройте TextEdit и выберите Файл > Новый, затем Формат > Преобразовать в обычный текст. Вставьте полный документ ниже, сохраните его как article-columns.html и, если появится запрос, выберите Использовать .html. Это документированные Apple шаги для создания HTML-файла в TextEdit. Работа с HTML-документами в TextEdit на Mac

Ниже приведён полный HTML-документ со всеми стилями и примером содержимого. Библиотеки, сетевые ресурсы и JavaScript не требуются. Откройте сохранённый файл в браузере, чтобы посмотреть макет; здесь его отображение не проверялось.

<!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>

Сокращённая запись columns задаёт предпочтительную ширину 260 пикселей CSS и максимум три колонки. Браузер определяет, сколько колонок поместится. При полной ширине области содержимого в примере — 960 пикселей — на три колонки с двумя промежутками по 24 пикселя приходится по (960 − 2 × 24) ÷ 3 = 304 пикселей CSS на колонку. Это арифметическая оценка, а не измерение в браузере. Многоколоночная раскладка

Заголовок остаётся над статьёй, поскольку находится вне контейнера колонок. Все шесть абзацев остаются внутри него в исходном порядке. Измените ширину окна браузера, чтобы посмотреть, как макет выглядит в более узком окне, а затем найдите конечный маркер END-A, чтобы убедиться, что можно дойти до конца статьи.

Настройка заполнения колонок без скрытия оставшегося текста

В примере высота статьи остаётся автоматической, а для column-fill задано значение balance. Балансировка стремится распределить содержимое по колонкам. Если вместо этого нужно заполнять одну колонку до заданной высоты, прежде чем переходить к следующей, используйте параметр column-fill: auto. MDN описывает различия в поддержке и отмечает, что Chrome учитывает auto только тогда, когда контейнер имеет размер по блочной оси, например заданную высоту в этой горизонтальной раскладке. column-fill

Фиксированная высота создаёт важное условие отказа: избыточный текст может образовать дополнительные колонки по горизонтали за пределами контейнера. Задание высоты не ограничивает статью видимыми колонками. MDN прямо описывает такое поведение при переполнении. Не скрывайте оставшийся текст с помощью overflow: hidden. Обработка переполнения в многоколоночной раскладке

Для макета чтения оставьте автоматическую высоту, как выше, если горизонтальное продолжение не задумано специально. Если экспериментируете с колонками фиксированной высоты, проверяйте всю ширину макета и снова ищите конечный маркер после каждого изменения размера шрифта или ширины. Аккуратный вид первого экрана не гарантирует, что в макете помещается вся статья.

Рассматривайте разрывы абзацев как структуру содержимого, а не как заранее заданные окончания колонок. Для коротких связанных элементов можно использовать break-inside: avoid, чтобы по возможности не разбивать их; MDN показывает этот приём на карточках. Применение этого правила ко всем длинным абзацам может снизить гибкость макета, поэтому используйте его только там, где важно сохранить конкретный элемент целиком для удобства чтения. Многоколоночная раскладка

Что делать, если области должны иметь разную форму или располагаться по-разному?

Рассмотрим схематичный макет: широкая область A над узкой областью B и отдельная область C в нижнем правом углу. CSS-колонки не позволяют воспроизвести такую произвольную цепочку, просто разместив на странице три контейнера. Автоматический поток в них ограничен многоколоночным контейнером; отдельным механизмом для связи областей назначения был черновик CSS Regions. Многоколоночная раскладка, Модуль CSS Regions, уровень 1

Для композиции на Mac, где важны свободно расположенные блоки, в Pages предусмотрена документированная функция связывания текста. Разместите три текстовых блока в порядке A, B и C, а полный текст статьи поместите в первый блок. По документации Apple, цепочку можно начать как с пустого блока, так и с блока, уже содержащего текст. Связывание текстовых блоков в Pages на Mac

  1. Выберите блок A и нажмите на белый кружок вверху, чтобы начать цепочку.
  2. Выберите каждый пустой блок назначения и нажмите на его белый кружок, чтобы включить его в цепочку. Проверьте общий цвет кружков и порядковые номера.
  3. Чтобы изменить порядок, нажмите на кружок блока и выберите его номер в разделе Порядок макета.
  4. Если в последнем блоке отображается индикатор обрезанного текста, увеличьте блок или добавьте ещё один связанный блок. Заблокированные и сгруппированные блоки связывать нельзя. Связывание текстовых блоков в Pages на Mac

Перемещение блока в другое место той же страницы не меняет порядок чтения в цепочке автоматически. Осознанно задавайте его с помощью Порядок макета. Pages — практичный способ создать нужную визуальную композицию; при этом следует помнить, что цепочки текстовых блоков не добавляют соответствующую функцию в браузер. Связывание текстовых блоков в Pages на Mac

Когда стоит использовать Paged.js или полифил CSS Regions?

Выбирайте Paged.js, если результатом должна быть последовательность страниц. В официальной документации описан механизм разбиения на фрагменты: он помещает содержимое на страницу, обнаруживает переполнение и продолжает текст на вновь созданных страницах. Это полезная модель разбиения на страницы в браузере, но документация не подтверждает возможность произвольно связывать текст через независимо расположенные экранные области. Как работает Paged.js

Для описанного варианта настройки в браузере нужны HTML и CSS, скрипт Paged.js, веб-сервер и браузер. Это меняет требования по сравнению с приведённым выше автономным примером для локального файла. Следуйте руководству по настройке библиотеки и проверьте созданные страницы перед экспортом. Начало работы с Paged.js

Для вывода в PDF руководство рекомендует после разбиения на страницы открыть диалог печати браузера, выбрать вывод в PDF, убрать поля печати и верхние и нижние колонтитулы браузера, а также включить печать фоновой графики. Формулировки настроек печати могут различаться в разных браузерах. Начало работы с Paged.js

Старый проект Adobe CSSRegions.js напрямую имитирует связывание областей, но в собственной документации он назван экспериментальным; там также прямо не рекомендуется использовать его в рабочей среде вместо встроенной поддержки. Примеры проекта полезны для понимания исторического предложения, но не подтверждают наличие этой функции в современных браузерах. Полифил CSS Regions для JavaScript

Сохранение формирования текста браузером при адаптации макета

По возможности оставляйте абзацы целиком в качестве текста браузера. Не пытайтесь оценивать вместимость области, задавая ей фиксированное количество символов. В спецификации W3C для текста описано формирование текста на границах встроенных элементов и условия, прерывающие его, в том числе изменения, связанные с интервалами, выравниванием или изоляцией. Поэтому разделение текста на фрагменты с независимым стилем может менять не только их положение. Модуль CSS Text, уровень 3

Измерения текста на Canvas также недостаточно для создания макета статьи. WHATWG указывает, что measureText() возвращает метрики переданного текста, а fillText() выводит текст в заданных координатах. В алгоритме подготовки текста используется строка бесконечной ширины; указание максимальной ширины может привести к подгонке текста под неё. Эти операции не обеспечивают автоматического перехода абзаца между несколькими областями DOM. Стандарт HTML: Canvas

В этой задаче встроенные колонки позволяют браузеру самому выполнять переносы строк и отображать текст. Если обязательно нужны произвольные области в браузере, собственной реализации придётся учитывать изменения текста, метрики шрифтов, доступные размеры и неразмещённое содержимое. Считайте это отдельным проектом по созданию макета, а не коротким скриптом для разбиения текста по числу символов.

Прежде чем окончательно выбрать дизайн, проверьте его при широкой и узкой ширине окна, а также с увеличенным текстом в браузере. Прочитайте статью от первого абзаца до END-A, проверьте порядок продолжения и найдите обрезанный или смещённый по горизонтали текст. Используйте колонки браузера, если для задачи подходит обычный поток, Paged.js, если нужны страницы, и цепочки в Pages, если композиция зависит от расположения отдельных блоков.

Источники