Когда речь заходит о потреблении письменного слова в цифровой форме, среди приверженцев обычных книг преобладает жалоба на неспособность развить с цифровой книгой связь, заключающуюся в том, что можно перевернуть страницу, выбрать бумагу и ее цвет, помогает создать шрифт и другие физические атрибуты, характерные для книги.
Хотя идея воссоздания всего опыта — включая запах недавно открытой книги, доносящейся с ее безупречных, нетронутых печатных страниц — в цифровой форме, вероятно, останется совершенно непрактичным и совершенно невыгодным занятием по воссозданию прошлого, одним из аспектов этого опыта теперь можно воссоздать с минимальными усилиями, за что вся заслуга достается мозгу за модулем колонок CSS3.
Перед колоннами CSS3
Хотя введение модуля столбцов (в настоящее время все еще рекомендуемого кандидата) значительно упростило воссоздание некоторых аспектов обычного процесса чтения книг, его уже можно было достичь, полагаясь на волшебство JavaScript или сложную логику на стороне сервера. 20 вещей, которые я узнал о браузерах и Интернете от команды Google Chrome, является очень интересным доказательством концепции воссоздания некоторых элементов традиционного опыта чтения, хотя и в значительной степени опирающейся на логику HTML и CSS.
По всей вероятности, не полагаясь на модуль столбцов CSS3, разработчики должны будут генерировать информацию о стиле, специфичную для операционной среды каждого пользователя, и решение об этом будет полностью зависеть от их желания создать опыт чтения, подходящий для устройств всех размеров. , Однако это было тогда, и это, конечно, сейчас.
Рассвет новой эры
Ну, прежде чем я вступлю в новую эру, когда представление цифрового контента на страницах не требовало бы волшебства JavaScript или некоторого мастерства PHP на стороне сервера, непосвященный может оценить учебник по CSS3.
CSS3 столбцы
В отличие от некоторых более обсуждаемых и визуально захватывающих функций CSS3, таких как переходы и анимации, базовые идеи которых могут потребовать некоторого сфокусированного изучения, представление на основе столбцов с использованием CSS3 требует минимального времени обучения и реализации. В самом простом случае автору CSS нужно объявить количество столбцов, на которые он или она хочет, чтобы содержимое контейнера было разделено, и оттуда браузер сделает все остальное.
#ThreeCols / * Если вы планируете иметь больше контейнеров, чем один с тремя столбцами, тогда объявите это классом. * / { -webkit-column-count: 3; -moz-column-count: 3; количество столбцов: 3; / * В настоящее время только Opera поддерживает специфичные для столбца свойства без префиксов. * / } <div id = 'ThreeCols'> <Р> Вставьте содержимое здесь. </ Р> <Р> Вставьте содержимое здесь. </ Р> <Р> Вставьте содержимое здесь. </ Р> </ DIV>
Имея столько кода, вы можете распределить содержимое контейнера по трем столбцам (высота контейнера, если она не указана, определяется путем балансировки содержимого по указанному количеству столбцов). В случае переполнения, которое может произойти, когда контейнер имеет объявленную высоту, переполненное содержимое будет распределено по столбцам с шириной, равной ширине начальных трех столбцов, и столбцы будут сгенерированы вдоль встроенной оси, которая в в случае английского, становится осью X.
Изменяя значение количества column-count (с соответствующим префиксом), вы сможете разделить содержимое на любое количество столбцов. Однако, если указано только количество столбцов и нет других доступных инструкций по обработке, браузер попытается сбалансировать распределение — по сути, высоту или количество — содержимого контейнера в указанном количестве столбцов.
Чтобы переопределить стратегию распределения контента по умолчанию по столбцам, вам необходимо явно задать свойство column-fill для элемента контейнера.
/ * В дополнение к ранее включенным значениям добавьте следующее контролировать распределение контента по столбцам. * / #ThreeCols { -webkit-column-fill: auto; / * Статус не определен: недокументированный * / -moz-column-fill: auto; заполнение столбца: авто; }
Используйте префиксы соответственно, так как дизайн на основе столбцов по-прежнему является подходящей рекомендацией. Значением по умолчанию для свойства column-fill является баланс, который требует, чтобы UA попытался минимизировать изменение длины столбца. Если для параметра column-fill установлено значение auto , пользовательские агенты должны заполнять столбцы последовательно, то есть столбцы могут быть частично заполненными и пустыми. При использовании column-fill с auto , вам нужно помнить следующую пару деталей:
- Свойство
column-fillиспользуется только тогда, когда контейнер имеет указанную высоту. Без указания высоты, UA всегда будут пытаться сбалансировать высоту столбцов, по существу игнорируя указанное значениеcolumn-fill. - Имейте в виду, что в настоящее время, когда речь идет о распределении контента на основе столбцов в контейнере с заданной высотой, поведение по умолчанию для всех браузеров, за исключением Opera, не соответствует требованиям CR.
Давайте перейдем к более широкому и лучшему использованию дизайна на основе столбцов.
CSS-столбцы и постраничный контент
Если для параметра column-count значение 1, а для column-width — максимальная ширина элемента контейнера, браузер сгенерирует один столбец, равный ширине контейнера. Это означает, что весь переполненный контент будет распределен в столбцах одинаковой ширины вдоль ось х или линейная ось. Теоретически, используя одно из двух вышеупомянутых свойств с указанными значениями, авторы CSS должны иметь возможность создавать иллюзию страниц, где контент делится на части, равные высоте и ширине контейнера.
В случае Firefox и Opera, с column-count 1, и контейнером, имеющим заданную высоту, браузеры генерируют один столбец, достаточно широкий, чтобы занимать все пространство родительского элемента, что означает, что эффект макета с постраничной подстройкой может быть достигается без явного указания значения column-width . Однако браузеры на основе webkit — Safari, Chrome и теперь Opera — не могут распределять контент по столбцам.
Псевдоалгоритм делает абсолютно ясным, что если column-width column-count или число column-count имеют указанное значение, отличное от auto , то элемент контейнера должен рассматриваться как элемент с несколькими column-count , поэтому в настоящее время поведение браузеров на основе веб-набора не соответствует требованиям рекомендации кандидата.
Помимо проблем, связанных с браузером, чтобы заставить его работать в большинстве современных браузеров — Chrome, Firefox, Opera и Safari — вам необходимо установить значение свойства column-width в контейнере, равное ширине контейнера. (процентные значения не работают; точные значения пикселей или em для ширины контейнера и column-width настоящее время дают желаемые результаты).
Помня об этих проблемах, следующий код должен содержать простейшее определение CSS уровня контейнера, чтобы создать иллюзию страниц (учтите, для работы требуется JavaScript):
#Paged { ширина: 80%; высота: 100%; поле: 0 авто; -moz-column-count: 1 количество столбцов: 1; / * Не будет работать в браузерах на основе webkit, поэтому нет необходимости добавлять другое объявление. * / }
Теоретически, вышеупомянутое объявление CSS должно распределять содержимое контейнера по столбцам, ширина каждого столбца которых равна ширине блока контейнера с id Paged. Однако, несмотря на его полноту для этой цели, для того, чтобы она работала в разных браузерах, особенно в браузерах на основе webkit, вам нужно вместо этого использовать следующее объявление уровня контейнера:
#Paged { ширина: 1050 пикселей; / * или любое значение, которое вам нравится, но все же точное значение. * / высота: 100%; поле: 0 авто; / * Центрированный контент. * / ширина столбца: 1050 пикселей; / * Префикс соответственно, так как это должно работать в большинстве современные браузеры. * / }
Если вам нужно использовать расчет текучей среды в процентах, вы всегда можете положиться на некоторые JavaScript и window.innerWidth чтобы найти фактическую ширину и установить вычисленное значение для элемента контейнера после DOMContentLoaded .
Перевернуть страницу
В настоящее время, чтобы воссоздать иллюзию страниц, вам придется использовать несколько инструкций JavaScript (волшебство не требуется). Для завершения задачи вам нужно будет использовать значение свойства scrollWidth элемента контейнера, чтобы определить количество столбцов, созданных браузером для данного содержимого. Чтобы получить значение scrollWidth , вам сначала нужно установить overflow на auto .
Предполагая, что ваш контент привел к появлению большего количества столбцов, чем одного, у вас будет контейнер с горизонтальным переполнением и горизонтальной полосой прокрутки. Когда DOMContentLoaded срабатывает, DOMContentLoaded значение scrollWidth и установите значение переполнения для элемента контейнера скрытым; это приведет к исчезновению полосы прокрутки и переполнения контента.
Разделив значение scrollWidth на фактическую ширину контейнера, вы должны получить количество страниц или столбцов с шириной, равной ширине контейнера, которые сгенерировал браузер. Всякий раз, когда пользователь нажимает соответствующую кнопку, вы должны увеличивать или scrollLeft значение scrollLeft на общую ширину контейнера.
Таким образом вы сможете представить зрителю следующую или предыдущую страницу текущего документа. scrollLeft или scrollLeft значение scrollLeft , поддерживая значение, указывающее текущую страницу, и сравнивая его со значением счетчика страниц, вы сможете настроить состояние кнопок, позволяющих пользователю переходить к следующей или Предыдущая страница.
Вывод
До тех пор, пока раздел Paged Presentations в разделе «Генерируемый контент для Paged Media Module» не получит полную поддержку, вышеупомянутое решение предоставляет вам простое решение с низкими вычислительными ресурсами, которое вы можете использовать сегодня практически во всех браузерах, хотя и с префиксами, создать привлекательную иллюзию постраничного контента.
Учитывая, что привлекательная презентация в сочетании с минимальным временем загрузки — и то, и другое достижимо с помощью вышеупомянутого решения — может иметь все значение, возможность воссоздать обычное чтение книг с максимально возможной аутентичностью доступна.