Макет с помощью CSS регионов

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

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

Макет с помощью CSS регионов

CSS исключения

Пример исключения CSS в действии
Пример исключения CSS в действии

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

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

Подробней о CSS регионах

CSS регионы позволяют сделать автоматически размеченный текст блоками. На рисунке ниже показано разделение текста (the flow) и окон (the regions the text flows into):

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

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

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

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

«Проект Наследие Человечества» с CSS регионами.

Демо

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

Проект Наследие человека показывает регионов

Проект Наследие Человечества с CSS регионами.

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

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

Демо

Свойства 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 необходимые для получения блоков текста в поток через регионы простой. Фрагмент кода, приведенный ниже присваивает поток значению article в блоке div с идентификатором content, и присваивает тому же значению article название потока ко всем элементам с классом region. В результате текст внутри элемента content будет автоматически обтекать любой элемент с классом region</div>


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

Чтобы быть кратким, этот раздел использует только один префикс (WebKit), но вы должны написать код, который работает во всех браузерах, поддерживающий эту функцию!

Модель CSS объектов или CSSOM , определяет JavaScript API, для работы с CSS. Ниже приведен список новых 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, динамически добавлять регионы по мере необходимости. Отметим, что для простоты, он не обрабатывает удаление регионов и определение размера и позиции регионов, это только в целях демонстрации.



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 работает над инструментами текста и настольной издательской системой достаточно долго, чтобы знать, что дизайнеры и разработчики также захотят более простой способ, для получения относительно общих возможностей. Поэтому работа над шаблонами 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 исключения показан: текст обтекает внутри неправильной формы треугольников:

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

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

CSS регионы для Chrome и Android

Кроме того, что CSS регионы и CSS исключений реализованы в Internet Explorer 10 , на 2012 год есть планы и у Mozilla реализовать для браузера Firefox. Следующая основная версия Safari должна поддерживать большинство спецификаций CSS регионов, и последующие обновления должны включать в себя остальное.

Ниже приведена детальная карта прогресса с CSS регионами и CSS исключениями, так как первоначальные предложения W3C в апреле 2011 года:

Области и исключения Прогресс
Прогресс с регионами CSS и CSS исключения.

Заключение

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

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML -теги и атрибуты: <a href= http://pixelcom.crimea.ua/"" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>