CSS регионы

Интернет очень мощная платформа для текста, где Adobe занимает не последнее место. HTML вообще предполагает вертикальную ориентацию текста в одну колонку. Когда Adobe искал возможности модернизировать оформление текста, появилось потребность в усовершенствовании. Всё еще очень трудно простой версткой оформить текст в несколько колонок. Не говоря о том, чтобы сделать текст вокруг графики с помощью свойств CSS. Adobe приложил все усилия чтобы реализовать эти возможности в современных браузерах.

данная статья обсуждает API, который еще не полностью стандартизирован и находится в стадии разработки. Будьте осторожны при использовании экспериментальных интерфейсов API в своих проектах.

Макеты CSS регионы

На снимке поток текста по контуру горы.

Пример исключения CSS в действии
Поток текста по контуру горы

На следующем снимке текст сверху и снизу обтекает не по горизонтальной ровной линии. Текст внизу обтекает вокруг формы изображения, а также используются CSS регионы для оформления текста в трёх колонках.

Пример регионов CSS в действии
Текст сверху и снизу обтекает не по горизонтальной ровной линии

Свойства CSS regions позволяют разместить текст блоками. На рисунке ниже показано разделение текста flow и блоков regions, flows +regions.

Содержимое потоки в определенных регионах
Поток содержания в регионах

Используя CSS регионы можно создать макет который будет визуально более интересным и легче для чтения.

Демо

В целях демонстрации я добавил нумерацию, что было видно где и как расположены CSS регионы.

Проект Наследие человека показывает регионов
Оформить веб-страницу CSS регионами

Вы можете поэкспериментировать с этим прототипом. Используйте клавиши со стрелками для перемещения и нажмите Esc чтобы выявить регионы.

Если ваш браузер не поддерживает CSS regions, а вам нужен макет с оформлением текста в несколько колонок, используйте для этого JavaScript как резерв.

Демо

к меню ↑

Свойства CSS для регионов

Свойства CSS необходимые для получения блоков текста простой. Фрагмент кода приведенный ниже присваивает значение article в блоке div с идентификатором content, и присваивает тому же значению article название потока ко всем элементам с классом region. В результате текст внутри элемента content будет автоматически обтекать любой элемент с классом region.

<style>
    #content {
      +flow-into: article;
    }

    .region {
      +flow-from: article;
      box-sizing: border-box;
      position: absolute;
      width: 200px;
      height: 200px;
      padding: 10px;
    }

    #box-a {
      border: 1px solid red;
      top: 10px;
      left: 10px;
    }

    #box-b {
      border: 1px solid green;
      top: 210px;
      left: 210px;
    }

    #box-c {
      border: 1px solid blue;
      top: 410px;
      left: 410px;
    }</style>

<div class="region" id="box-a"></div>
<div class="region" id="box-b"></div>
<div class="region" id="box-c"></div>
<div id="content">Простые свойства CSS необходимые для оформления блоков текста в поток через регионы.</div>
к меню ↑

Модель объектов

Модель CSS объектов или CSSOM определяет JavaScript API.

Список новых API связанных с CSS регионами:

  • document.webkitGetFlowByName ("flow_name") функция возвращает ссылку на поток с названием. Аргумент соответствует названию указанному в качестве значения потока в CSS. Чтобы получить ссылку на название потока указанного в фрагменте кода выше, вы должны определить элемент article .
  • WebKitNamedFlow: webkitGetFlowByName функция возвращает экземпляр WebKitNamedFlow со следующими свойствами и функциями:
    • contentNodes ссылки на узлы входящие в название потока.
    • overflow так или иначе содержание выходит за пределы указанного региона. Другими словами определяется, есть ли еще регионы в содержании.
    • getRegionsByContentNode (node) функция возвращает ссылку на регионы содержащее указанный узел. Это особенно полезно для поиска регионов содержащих такие вещи как якоря с названием.
  • webkitRegionLayoutUpdate элементы которые являются частью потока могут быть зарегистрированы для события webkitRegionLayoutUpdate. Обработчики событий вызываются когда поток изменен, по любой из этих причин (содержание добавлено или удалено, изменения размера шрифта или формы области и т.д.).
  • Element.webkitRegionOverflow: элементы имеют свойства webkitRegionOverflow, если они являются частью потока и определят не переполнено ли содержимое потока региона. Возможные значения: подгонка, если содержание походит до конца этого региона, происходит переполнение если содержание больше чем допустимое место в регионе.

Одним из основных применений CSSOM вызов события webkitRegionLayoutUpdate  и динамическое добавления или удаление регионов с целью размещения различных объёмов текста. Например, если объём текста должен быть оформлен непредсказуемо, т.е. если окно браузера меняется, может потребуется изменить поток или удалить регионы вообще. Кроме того, если вы хотите организовать свой контент на страницах, вам нужен механизм для динамического изменения DOM и регионов.

Следующий фрагмент кода JavaScript демонстрирует использование CSSOM, динамическое добавление регионов по мере необходимости. Для демонстрации JavaScript не удаляет регионы и позиции регионов.

function addRegion() {
  var region = document.createElement("div");
  region.classList.add("region");
  region.addEventListener("webkitRegionLayoutUpdate", onLayoutUpdate);
  document.body.appendChild(region);
}

function onLayoutUpdate(event) {
  var region = event.target;
  if (region.webkitRegionOverflow === "overflow") {
    addRegion();
  } else {
    regionLayoutComplete();
  }
}

function regionLayoutComplete() {
  // Finish up your layout.
}
к меню ↑

Шаблон CSS

Использование CSSOM пожалуй самый мощный и гибкий способ для таких вещей, как пейджинг и адаптивный макет, но Adobe работает над инструментами текста и настольной издательской системой достаточно долго, в Adobe знают что дизайнеры и разработчики хотят более простой способ получения общих возможностей. Поэтому работа над шаблонами страниц CSS исключительно декларативно.

Давайте взглянем на общий случай использования шаблонов CSS для страниц. Следующий фрагмент кода демонстрирует использование CSS для создания двух названных потоков: timeline-flow, article-flow и кроме того определяется селектор 1/3 называется combined-articles (комбинирование статей), внутри которого будут включены два потока. Простое включение overflow-style (переполнение в стиле) свойство внутри селектора combined-articles указывает что содержание должно быть автоматически выгружены вдоль оси X:

<style>
  #article {
    +flow-into: article-flow;
  }

  #timeline {
    +flow-into: timeline-flow;
  }

  #combined-articles {
    overflow-style: paged-x;
  }
</style>

Теперь когда потоки для переполнения были определены и было указано поведение мы можем создать шаблон страницы.

@template {
 @slot left {
 width: 35%;
 float: left;
 +flow-from: article-flow;
 }

 @slot time {
 width: 25%;
 float: left;
 +flow-from: timeline-flow;
 }

 @slot right {
 width: 35%;
 float: left;
 +flow-from: article-flow;
 }
}

Шаблон страницы определяются с помощью нового синтаксиса at. У фрагмента кода выше мы определили три слота, каждый из которых соответствует колонке. Текст article-flow будет проходить через колонку слева и справа, а текст из timeline-flow будет заполнять колонку в середине.

Результат может выглядеть примерно так:

Шаблоны страниц пример
Пример шаблона страницы с помощью CSS

Обратите внимание что текст статьи в левой и правой колонке — английский, а в центре немецкий язык. Кроме того в документе страница по горизонтали без кода JavaScript. Все было сделано исключительно с помощью CSS.

Шаблоны страницы с помощью CSS это будущее, и уже есть прототип который использует JavaScript shim для эксперимента с ними.

к меню ↑

CSS исключения

Для того, чтобы достичь форматирование как в журнале этой верстки не достаточно. Важным элементом качественной и визуально интересных макетов которые можно создать на настольных издательских системах, это возможность сделать поток текста либо вокруг либо внутри произвольной графики и формы как это делает CSS Shapes.

На снимке прототип CSS исключения, текст обтекает внутри треугольников неправильной формы.

Текст впадающих в неправильной формы полигонов
Текст в треугольниках неправильной формы

Первый шаг к возможности текстового потока вокруг и внутри произвольной формы заключается в разработке и оптимизации необходимых алгоритмов. Adobe работает над этой реализацией и будет внесена непосредственно в WebKit. После того как эти алгоритмы будут оптимизированы, они станут основой поверх которой построена остальная часть CSS исключения. С этим примером возможно сделать фигуры для текста с помощью свойств CSS regions.

к меню ↑

Заключение

Adobe имеет огромный опыт работы с текстом, шрифтами и с настольной издательской системой в целом. Веб достаточно мощная платформа для текста в проектах. CSS регионы и CSS исключения в конечном счете делают гораздо более выразительными веб-страницы.