Дизайн для печати с помощью CSS

  1. Об авторе Рэйчел Эндрю является не только главным редактором журнала Smashing Magazine, но и веб-разработчиком,...
  2. Различия между CSS для Интернета и для печати CSS
  3. Правило @page
  4. Понимание модели страницы
  5. Левая и правая страницы разворачиваются
  6. Созданный контент и постраничные носители
  7. Разрывы страниц
  8. Счетчики
  9. Настройка строк
  10. Перекрестные ссылки
  11. Соедини все вместе: пример книги
  12. HTML-документ
  13. Не только книги!

Об авторе

Рэйчел Эндрю является не только главным редактором журнала Smashing Magazine, но и веб-разработчиком, писателем и докладчиком. Она является автором ряда книг, в том числе ... Подробнее о Рейчел ...

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

Если вы упоминаете о печати с помощью CSS многим людям, работающим в Интернете, вам на ум приходят таблицы стилей печати. Мы все хорошо привыкли к созданию таблицы стилей, которая вызывается при печати веб-документа. Эти таблицы стилей гарантируют, что версия для печати будет разборчивой и что мы не заставляем пользователя распечатывать огромные изображения. Тем не менее, CSS также используется для форматирования книг, каталогов и брошюр - контента, который, возможно, никогда не разрабатывался как веб-страница.

В этой статье мы рассмотрим модули CSS, которые были созданы не для использования в веб-браузерах, а для работы с печатными и постраничными носителями. Я объясню, как работают селекторы, свойства и значения, которые они представляют. Я закончу рабочим примером, который вы можете использовать в качестве отправной точки для своих собственных экспериментов. Для этого примера нам понадобится пользовательский агент, который поддерживает этот специализированный CSS. Я буду использовать Prince, который является коммерческим продуктом. Тем не менее, у Prince есть бесплатная версия, которую можно использовать для некоммерческого использования, что делает его хорошим инструментом для опробования этих примеров.

Дальнейшее чтение на SmashingMag:

Почему HTML и CSS имеют смысл для печати

Может показаться немного странным, что контент, не предназначенный специально для Интернета, должен поддерживаться в формате HTML и форматироваться с помощью CSS. Это кажется менее странным, когда вы понимаете, что популярный форматы электронных книг, такие как EPUB и MOBI HTML и CSS под капотом. Кроме того, даже если вся рукопись или каталог не будут опубликованы на веб-сайте, некоторые из них, вероятно, будут. HTML становится удобным форматом для стандартизации, с которым гораздо легче иметь дело, чем с документами Word или традиционным настольным издательским пакетом.

Различия между CSS для Интернета и для печати CSS

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

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

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

Большая часть CSS, которую вы уже знаете, будет полезна для форматирования печати. Специально для печати у нас есть CSS Paged Media Module И Контент, созданный CSS для Paged Media Module " технические характеристики. Давайте посмотрим, как это работает.

Правило @page

Правило @page позволяет вам указывать различные аспекты блока страницы. Например, вы захотите указать размеры ваших страниц. Правило ниже определяет размер страницы по умолчанию 5,5 на 8,5 дюймов. Если вы намереваетесь напечатать книгу, возможно, с помощью службы печати по требованию, важно выяснить, какие размеры вы можете использовать.

@page {size: 5.5in 8.5in; }

Помимо указания размеров со значениями длины, вы также можете использовать ключевые слова формата бумаги, такие как «A4» или «Legal».

@page {size: A4; }

Вы также можете использовать ключевое слово для указания ориентации страницы - «портрет» или «пейзаж».

@page {size: A4 landscape; }

Понимание модели страницы

Прежде чем идти дальше, мы должны понять, как работает модель страницы для постраничных носителей, потому что она ведет себя несколько иначе, чем на экране.

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

( Посмотреть большую версию )

Область страницы - это пространство на странице, в которое будет перетекать контент вашей страницы. Когда ему не хватит места, будет создана другая страница. Поля полей используются только для сгенерированного CSS контента.

Левая и правая страницы разворачиваются

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

Мы можем использовать эти селекторы, чтобы определить различные размеры полей для наших страниц.

@page: left {margin-left: 3cm; } @page: right {margin-left: 4cm; }

Определены два других селектора псевдоклассов. Селектор: first ориентирован на первую страницу документа.

@page: first {}

Селектор псевдокласса: blank нацеливается на любую страницу, которая «намеренно оставлена ​​пустой». Чтобы добавить этот текст, мы можем использовать сгенерированный контент, нацеленный на верхнее центральное поле для полей.

@page: blank {@ top-center {content: "Эта страница намеренно оставлена ​​пустой". }}

Созданный контент и постраничные носители

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

@page: right {@ bottom-left {margin: 10pt 0 30pt 0; border-top: .25pt solid # 666; Содержание: «Моя книга»; размер шрифта: 9pt; цвет: # 333; }}

Разрывы страниц

Также частью спецификации «Paged Media» является информация о том, как контролировать разрывы страниц. Как уже было сказано, когда содержимое заполнит область страницы, оно перейдет на новую страницу. Если заголовок только что был записан на страницу, вы можете получить страницу, которая заканчивается заголовком, а соответствующий контент начинается на следующей странице. В печатной книге вы попытаетесь избежать этой ситуации. Другие места, где вы можете избежать перерыва, находятся в середине таблицы и между рисунком и его надписью.

Начинается новая глава книги с заголовком h1. Чтобы этот заголовок всегда был началом страницы, установите параметр разрыва страницы перед всегда.

h1 {page-break-before: всегда; }

Чтобы избежать разрывов непосредственно после заголовка, используйте разрыв страницы.

h1, h2, h3, h4, h5 {разрыв страницы: избегать; }

Чтобы не разбивать рисунки и таблицы, используйте свойство page-break-inside.

таблица, рисунок {page-break-inside: избежать; }

Счетчики

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

Очевидное место для начала - номера страниц. CSS дает нам предопределенный счетчик страниц; он начинается с 1 и увеличивается с каждой новой страницей. В вашей таблице стилей вы использовали бы этот счетчик в качестве значения сгенерированного контента, чтобы поместить счетчик страниц в один из полей для полей. В приведенном ниже примере мы добавляем номера страниц в правом нижнем углу правых страниц и левом нижнем углу левых страниц.

@page: right {@ bottom-right {content: counter (page); }} @page: left {@ bottom-left {content: counter (page); }}

Мы также создали счетчик названных страниц. Этот счетчик всегда будет общим количеством страниц в вашем документе. Если вы хотите вывести «Страница 3 из 120», вы можете.

@page: left {@ bottom-left {content: "Page" counter (page) "of" counter (pages); }}

Вы можете создавать свои собственные именованные счетчики, увеличивать и сбрасывать их по своему усмотрению. Чтобы создать счетчик, используйте свойство counter-reset, увеличивайте его с шагом счетчика. Приведенные ниже правила CSS создадут счетчик для глав с именем chapternum и увеличивают его с каждым h1, что является началом главы в этой книге. Затем мы используем значение этого счетчика в сгенерированном контенте, чтобы добавить номер главы и точку перед фактическим заголовком главы.

body {counter-reset: chapternum; } h1.chapter: before {встречное увеличение: chapternum; содержание: счетчик (chapternum) "."; }

Мы можем сделать то же самое для фигур в книге. Распространенным способом нумерации цифр является использование chapternum.figurenum. Итак, «Рисунок 3-2» будет вторым рисунком в главе 3. На h1 мы можем сбросить число, чтобы оно начиналось с 1 для каждой главы.

body {counter-reset: chapternum figurenum; } h1 {counter-reset: figurenum; } h1.title: before {встречное увеличение: chapternum; содержание: счетчик (chapternum) "."; } figcaption: before {counter-increment: figurenum; содержание: counter (chapternum) "-" counter (figurenum) "."; }

Настройка строк

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

Мы делаем это, используя свойство с именем string-set в селекторе, из которого мы хотим получить содержимое. Для заголовка главы это будет h1. Значением string-set является имя, которое вы хотели бы дать этому контенту, а затем content (). Затем вы можете вывести это как сгенерированный контент, используя string ().

h1 {string-set: doctitle content (); } @page: right {@ top-right {content: string (doctitle); маржа: 30pt 0 10pt 0; размер шрифта: 8pt; }}

Когда генерируемый медиафайл генерируется, каждый раз, когда возникает h1, контент записывается в доктриль, а затем выводится в поле верхнего правого поля правых страниц, изменяясь только при появлении другого h1.

Сноски являются частью « Контент, созданный CSS для Paged Media Module " Спецификация. Способ работы сносок заключается в том, что вы добавляете текст вашей сноски в строку, обернутый в HTML-теги (возможно, диапазон), с классом, чтобы идентифицировать его как сноску. Когда страница генерируется, содержимое этого «элемента сноски» удаляется и превращается в сноску.

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

.fn {float: сноска; }

В своем документе используйте этот класс, чтобы обернуть любой текст сноски.

<p> Сноски <span class = "footnotes"> Сноски и примечания, размещенные в нижнем колонтитуле документа для ссылки на текст. Сноска будет удалена из потока при создании страницы. </ Span> полезны в книгах и печатных документах. </ P>

У сносок есть предопределенный счетчик, который ведет себя так же, как и счетчик страниц. Как правило, вам нужно увеличивать счетчик на 1 каждый раз, когда появляется класс fn, и сбрасывать его в начале каждой главы.

.fn {встречное приращение: сноска; } h1 {counter-reset: сноска; }

Различные части сноски могут быть нацелены на псевдоэлементы CSS. Сноска-вызов - это числовая привязка в тексте, которая указывает на наличие сноски. При этом используется значение счетчика сносок в качестве сгенерированного содержимого.

.fn :: footnote-call {content: counter (сноска); размер шрифта: 9pt; выравнивание по вертикали: супер; высота строки: нет; }

Маркер сноски - это числовой маркер, помещенный перед текстом сноски в нижнем колонтитуле документа. Они ведут себя аналогично числам, сгенерированным для упорядоченного списка в CSS.

.fn :: footnote-marker {font-weight: bold; }

Сами сноски размещаются на полях, в специальной области страницы с именем @footnote. Вы бы нацелились и стилизовали эту область следующим образом.

@page {@footnote {border-top: 1pt сплошной черный; }}

Перекрестные ссылки

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

Мы используем другое новое свойство, target-counter, чтобы добавить эти числа. Начните с создания ссылок в вашем документе, указав им ссылку, которая является идентификатором элемента в документе, на который вы хотите настроить таргетинг. Кроме того, добавьте класс, чтобы идентифицировать их как перекрестную ссылку, а не как внешнюю ссылку; Я использую внешнюю ссылку.

<a class="xref" href="#ch1" title="Chapter 1"> Глава 1 </a>

Затем, после ссылки, снова используйте сгенерированный контент для вывода (страница x), где x - номер места в книге, где можно найти этот идентификатор.

a.xref: after {content: "(page" target-counter (attr (href, url), page) ")"; }

Мы будем смотреть на эту технику на практике, когда создадим оглавление для рабочего примера.

Соедини все вместе: пример книги

Мы рассмотрели множество различных свойств здесь в отдельности. Они имеют больше смысла, когда вы используете их для создания книги.

Чтобы создать книгу с помощью этого CSS, вам понадобится пользовательский агент, который ее поддерживает. В настоящее время очень немногие вещи хорошо реализуют эту спецификацию; самый доступный принц , Самостоятельная коммерческая лицензия для Prince стоит дорого, однако вы можете использовать Prince бесплатно для некоммерческих проектов. Это означает, что если вы просто хотите попробовать эти методы, вы можете. Кроме того, если у вас есть некоммерческое использование этой технологии, вы можете использовать Prince для форматирования этих книг.

Я извлек отрывки из одной из моих любимых книг о проекте Гутенберга, Наши кошки от Харрисона Вейра , Я выбрал эту книгу, потому что я люблю кошек и потому что в ней есть изображения и сноски, которые я могу использовать для демонстрации форматирования.

Вы можете найти файлы, которые я использую, а также сгенерированный PDF, более на GitHub , Если вы хотите поэкспериментировать с CSS и собрать книгу самостоятельно, вам нужно будет скачать и установить принц , Prince - это инструмент командной строки для Mac, и хотя в Windows есть графический интерфейс Windows, я буду использовать командную строку, потому что она действительно очень проста.

Используя окно терминала, перейдите в каталог вашей книги или в место, куда вы загрузили мои файлы с GitHub.

cd / Users / имя пользователя / smashing-css-books

Теперь запустите принца:

prince -s pdf-styles.css book.html builds / book.pdf

Это создаст PDF в папке сборок с именем book.pdf. Теперь, если вы внесете какие-либо изменения в CSS или HTML, вы можете запустить Prince, чтобы увидеть, что отличается.

HTML-документ

Вся моя «книга» собрана в одном HTML-документе. Компиляция документов в Prince возможна, но я нашел, что проще иметь дело с одним большим документом. Перед главами, которые начинаются с h1, у меня есть div, который содержит изображение обложки, а затем оглавление для книги.

Оглавление ссылается на идентификаторы заголовков глав h1.

<! DOCTYPE html> <html dir = "ltr" lang = "en-US"> <head> <meta charset = "utf-8" /> <title> Наши кошки и все о них </ title> <meta name = "author" content = "Harrison Weir" /> <meta name = "subject" content = "Кошки. Их разновидности, привычки и управление; а для показа - стандарт качества и красоты" /> <meta name = "ключевые слова "content =" cats, feline "/> <meta name =" date "content =" 2014-12-05 "/> </ head> <body> <div class =" frontcover "> </ div> <div class = "contents"> <h1> Выдержки из книги «Наши кошки и все о них» Харрисона Вейра </ h1> <ul class = "toc"> <li> <a href="#ch1"> Первая выставка кошек </ a > </ li> <li> <a href="#ch2"> Обученные кошки </a> </ li> <li> <a href="#ch3"> Общее управление </a> </ li> < li> <a href="#ch4"> Суеверие и колдовство </a> </ li> </ ul> </ div> <h1 id = "ch1" class = "chapter"> Первая выставка кошек </ h1 > <p>… </ p> <h1 id = "ch2" class = "chapter"> Обученные кошки </ h1> <p>… </ p> <h1 id = "ch3" class = "chapter"> Общее Управление </ h1> <p>… </ p> <h1 id = "ch4" class = "chapter"> Суеверие и колдовство </ h1> <p> </ Р> </ тело> </ HTML>

Затем CSS использует все то, что мы описали до сих пор. Для начала нам нужно установить размер книги, используя правило @page. Затем мы используем селектор псевдокласса: first для удаления поля на странице 1, потому что на этой странице будет изображение обложки.

@page {size: 5.5in 8.5in; маржа: 70pt 60pt 70pt; } @page: first {size: 5.5in 8.5in; поле: 0; }

Затем мы разберемся с изображением передней обложки, убедившись, что оно покрывает всю область страницы.

div.frontcover {страница: обложка; content: url ("images / cover.png"); ширина: 100%; высота: 100%; } div ( Посмотреть большую версию )

Далее мы разберемся со спецификой левой и правой страниц, используя псевдоклассы: right и: left.

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

@page: right {@ bottom-left {margin: 10pt 0 30pt 0; border-top: .25pt solid # 666; содержание: "Наши кошки"; размер шрифта: 9pt; цвет: # 333; } @ bottom-right {margin: 10pt 0 30pt 0; border-top: .25pt solid # 666; содержание: счетчик (страница); размер шрифта: 9pt; } @ top-right {content: string (doctitle); маржа: 30pt 0 10pt 0; размер шрифта: 9pt; цвет: # 333; }} @page: right {@ bottom-left {margin: 10pt 0 30pt 0;  border-top: ( Посмотреть большую версию )

Левый разворот имеет название книги в правом нижнем углу и счетчик страниц в левом нижнем углу.

@page: left {@ bottom-right {margin: 10pt 0 30pt 0; border-top: .25pt solid # 666; содержание: "Наши кошки"; размер шрифта: 9pt; цвет: # 333; } @ bottom-left {margin: 10pt 0 30pt 0; border-top: .25pt solid # 666; содержание: счетчик (страница); размер шрифта: 9pt; }} @page: left {@ bottom-right {margin: 10pt 0 30pt 0;  border-top: ( Посмотреть большую версию )

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

@page: first {@ bottom-right {content: normal; поле: 0; } @ bottom-left {content: normal; поле: 0; }}

В следующем разделе таблицы стилей рассматриваются счетчики. В дополнение к предустановленному счетчику страниц мы определяем счетчики для глав и рисунков.

/ * Сброс счетчиков глав и фигур на теле * / body {counter-reset: chapternum figurenum; семейство шрифтов: "Trebuchet MS", "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Tahoma, без засечек; высота строки: 1,5; размер шрифта: 11pt; } / * Получить заголовок текущей главы, который будет содержимым h1. Сброс счетчика фигур, потому что цифры начинаются с 1 в каждой главе. * / h1 {string-set: doctitle content (); разрыв страницы до: всегда; обратный сброс: рисунок; обратный сброс: сноска; высота строки: 1,3; } / * Увеличение счетчика главы * / h1.chapter: before {counter-increment: chapternum; содержание: счетчик (chapternum) "."; } / * Увеличение и отображение счетчика рисунков * / figcaption: before {counter-increment: figurenum; содержание: counter (chapternum) "-" counter (figurenum) "."; }

У глав теперь их номер помещен перед заголовком. Цифры также отображают их количество.

Цифры также отображают их количество

( Посмотреть большую версию )

Мы создаем сноски, как и в объяснении ранее, с надписью на вызове сноски.

.fn {float: сноска; } .fn {встречное приращение: сноска; } .fn :: footnote-call {content: counter (footnote); размер шрифта: 9pt; выравнивание по вертикали: супер; высота строки: нет; } .fn :: footnote-marker {font-weight: bold; } @page {@footnote {border-top: 0.6pt сплошной черный; padding-top: 8pt; }} fn {float: сноска;  } ( Посмотреть большую версию )

Затем мы добавляем некоторые правила, чтобы контролировать, где страницы ломаются. Вы должны быть достаточно осторожны, чтобы быть слишком тяжелым с этим. Если в вашей книге много таблиц и рисунков, то добавление здесь множества конкретных правил может привести к появлению в книге большого количества пробелов. Эксперименты и тестирование покажут, насколько далеко вы можете взять контроль над перерывами. Я нашел правила ниже, чтобы быть хорошей отправной точкой.

Помните, что это предложение для пользовательского агента. В некоторых случаях удержание таблицы от взлома будет невозможно, если таблица не помещается на странице!

h1, h2, h3, h4, h5 {жирный шрифт; разрыв страницы: избегать; страниц обкатки внутри: избежать; } h1 + p, h2 + p, h3 + p {разрыв страницы до: избегать; } таблица, фигура {page-break-inside: избежать; }

Наконец, мы оформляем оглавление и используем здесь интересный трюк. При описании перекрестных ссылок я объяснил, как мы используем target-counter для отображения номера страницы, на которой находится идентификатор. Это то, что мы сделаем для нашего оглавления. Приведенное ниже правило ставит номер страницы после ссылки на каждую главу в оглавлении.

ul.toc a :: after {content: target-counter (attr (href), page); } ul ( Посмотреть большую версию )

Однако, как правило, в книгах вы использовали бы начальные точки, чтобы выровнять все номера страниц по правому краю. Удивительно, но CSS дает нам способ сделать это, добавив leader () перед номером в сгенерированном контенте.

ul.toc a :: after {content: leader ('.') target-counter (attr (href), page); } ul ( Посмотреть большую версию )

Теперь у нас есть полная таблица стилей для создания нашей книги. Я избегал тратить здесь много времени на типографику, вместо этого концентрируясь на специфике создания книги. Однако с этого момента вы можете экспериментировать и добавлять свои собственные стили, чтобы создать уникальный дизайн книги.

Не только книги!

Помните, что эти методы не только для книг. Вы можете использовать их для создания печатных и PDF-версий каталога товаров непосредственно из HTML-кода веб-сайта, который вы разработали для клиента. Или вы можете создавать листовки и брошюры из веб-контента.

Если вы хотите создавать PDF документы с веб-сайта, используя Prince, то DocRaptor отличный вариант. Этот сервис использует Prince через API. Вы можете отправлять документы через API и получать PDF - идеально подходит для того, чтобы пользователи могли загружать контент в формате PDF на лету. Все, что мы рассмотрели в этой статье, возможно через интеграцию API с DocRaptor.

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

Ресурсы и дальнейшее чтение

  • « CSS Paged Media Module Уровень 3 , ”W3C
  • « Контент, созданный CSS для Paged Media Module , ”W3C
  • « Использование CSS-счетчиков »Сеть разработчиков Mozilla
  • « Книги CSS: уровень жизни »
  • « Руководство пользователя для Prince 9.0 Много простых примеров, которые работают в принце
  • « Как написать книгу Джонатан Снук, 24 Пути
  • « Сборка книг с помощью CSS3 Нелли МакКессон, A List Apart
  • « Печать книги с помощью CSS: Boom! «Берт Бос и Хокон Вьюм Ли, A List Apart»
  • « HTML, EPUB, MOBI, PDF, WTF: создание электронной книги Рэйчел Эндрю

Похожие

11 полезных инструментов для проверки, очистки и оптимизации вашего файла CSS
... ие считают, что минимизация размера файла таблицы стилей CSS - это хороший способ увеличить скорость загрузки вашего сайта"> Многие считают, что минимизация размера файла таблицы стилей CSS - это хороший способ увеличить скорость загрузки вашего сайта. Действительно, уменьшив CSS-файл на несколько килобайт, серверу потребуется меньше времени для загрузки, что приведет к более быстрой веб-странице. В случае, если ваши статьи попадут на главную страницу Digg, это также может быть
Проверка работоспособности DOM с помощью Google Chrome и CSS HTML Validator
... страницы». Из-за того, как это работает, скопированный источник может не включать DOCTYPE. подсказки На странице параметров буфера обмена в разделе « Параметры редактора» (Ctrl + F3) есть опция «Наблюдать за этими начальными тегами», которая позволяет указывать дополнительные теги, чтобы помочь CSS HTML Validator определять, когда источник HTML копируется в буфер обмена. Например, если вы хотите сконцентрировать
Обзор Asus Transformer Mini: 2-в-1 обеспечивает достаточно неплохие вычисления по доступной цене
... только, сколько хочу, но при этом платить меньше? В случае Asus Transformer Mini за $ 399 (T102HA) ответ - да, но едва ли. Ваше первое впечатление о Mini почти наверняка будет иметь обновленную версию Microsoft Surface 3 (в настоящее время больше не выпускается) с переработанной прочной клавиатурой и стилусом для загрузки. Но это изображение только до глубины души. Внутри его продуманного внешнего вида лежит ряд посредственных компонентов. Это все равно что купить блестящее яблоко Red
Включить функцию виртуализации Intel VT-x
... для нескольких независимых систем и приложений в независимых разделах. Примечание. Для изменения этого параметра необходимо выключить и снова включить систему. Вот скриншот того, как сообщение выглядит на экране: После сохранения
Проверка клиентской формы с помощью HTML5
При создании веб-приложений важно серьезно относиться к безопасности, особенно когда это связано со сбором данных от пользователей. Общим принципом безопасности является не доверять никому, поэтому никогда не доверяйте пользователю вводить правильные или действительные значения формы. Например, в поле формы электронной почты вместо ввода действительного адреса электронной почты пользователь может ввести неверный адрес или вредоносные данные, явно игнорирующие намерение запроса.
6 основных дополнений Firefox для дизайнеров
... изайнер (и технически подкованный пользователь Интернета), у вас нет оправдания тому, что вы не используете Firefox в качестве основного веб-браузера. Если вы еще не используете Firefox, вам нужно пойти и скачать это прямо сейчас. Firefox не только обеспечивает лучшую работу в Интернете, но также предоставляет бесконечное количество функций, которые вы просто не найдете ни в одном другом интернет-браузере. Поскольку сторонние разработчики
Дизайн игры: игры, которые влияют на нашу новую игру
Оооо, с новым годом всех! Этот 2012 год может принести вам много хороших игр! Что касается блога, я подумал, что было бы забавно рассказать вам об играх, которые оказали значительное влияние на дизайн нашей потрясающей новой игры. Я пока не могу много рассказать об игре, которую
Печать значков и коллекции «Любовь» - приглашения, меню, подушки и многое другое
... только) аксессуаров, которые я лично ценю и к чему призываю. Для нас это было не здесь. Я все еще думаю о тканевых виньетках, потому что 100% бумаги в нашем магазине не будет (я провел два свадебных сезона, занимаясь такими вещами и достаточно). :) В конце концов, большинство людей, однако, выберут классические виньетки, поэтому я решил упростить их и предоставить готовые шаблоны для их собственной реализации. Наши клиенты могут иметь тот же стиль, что и приглашения, и в то же время
Интеграция интернет-магазина с Domodi, Allani и Homebook
... для дома и декора, получают более 24 миллионов посещений в месяц в месяц. Domodi и Allani - это польские
Doopro P5: цена, технические данные и где купить
На тему Doopro P5 Все мобильные телефоны Все марки телефонов Doopro Doopro P5
Как соблюдать правила правильного питания при покупке продуктов • Блог о диете OXY365
... ивно и навсегда похудеть, просто следуйте правилам хорошей, простой диеты. Это значит есть именно то, что входит в ее план, и помнить регулярность приема пищи. Звучит банально, пока ... не пришло время покупать продукты. Как это сделать, чтобы не сломаться и не купить что-то совершенно незапланированное? Узнайте 3 самых важных правила.

Комментарии

Чувствуете, что не можете загружать песни с YouTube без осложнений и хлопот?
Чувствуете, что не можете загружать песни с YouTube без осложнений и хлопот? Ну, эта статья может помочь вам в том, как легко скачать песни с YouTube. От iMobie | Опубликовано: 30 октября 2018, Последнее обновление: 25 апреля 2019 YouTube, как один из самых популярных веб-сайтов в мире, является веб-сайтом для обмена видео, который позволяет нам исследовать разнообразный контент и множество разнообразных возможностей в одном месте. И,
В конце концов, большинство пользователей устанавливают приложения только через Play Store, а Google внимательно следит за тем, чтобы вредоносные программы не проходили, верно?
В конце концов, большинство пользователей устанавливают приложения только через Play Store, а Google внимательно следит за тем, чтобы вредоносные программы не проходили, верно? ... Подробнее приходит из-за пределов Google Play Store.
Планирование и составление меню самостоятельно - это что-то не для вас?
Планирование и составление меню самостоятельно - это что-то не для вас? Кислородная диета доступный онлайн может быть идеальным решением. Все, что вам нужно, - это момент, чтобы получить доступ к индивидуально составленному плану похудения,
Это все достаточно просто, когда ваша деятельность и встроенный фрагмент работают изолированно, но что, если вам нужно, чтобы они общались?
Это все достаточно просто, когда ваша деятельность и встроенный фрагмент работают изолированно, но что, если вам нужно, чтобы они общались? Вот пример метода внутри действия, которое пытается связаться с фрагментом: private void updateFragment () {EmbeddedFragment фрагмент = (EmbeddedFragment) getFragmentManager (). findFragmentById (R.id.fragment_embedded); фрагмент.setTextViewText («Привет, маленький фрагмент»); } Поскольку фрагмент существует внутри действия, вы получаете
Что мне не хватает?
Что мне не хватает? Я знаю, что у докси очень сильная добыча, но почему он начал гоняться за кошками только в последние четыре месяца? A: Трудно сказать, почему вы вдруг видите это преследование, когда никогда не видели. Я предполагаю, что все кошки были резидентами до того, как туда попала ваша собака? Убедитесь, что режим тренировки вашей собаки регулярный и очень утомительный. Упражнения часто могут решить множество проблем сразу!
Является ли Firefox достойной заменой ChromeOS?
Является ли Firefox достойной заменой ChromeOS? Джек Валлен ответит на этот вопрос и проведет вас через процесс установки Firefox Quantum. Chromebook - удивительный инструмент, обладающий непревзойденной эффективностью, скоростью и простотой использования. Тем не менее, с выпуском Firefox Quantum пользователи Chromebook могут почувствовать себя немного обделенными одним серьезным опытом. Не бойтесь, бесстрашные Chromebookies, еще не все потеряно. С устройством, которое поддерживает
Если так, как все прошло?
Если так, как все прошло?
Является ли ROG Phone идеальным мобильным игровым автоматом, который также хорошо работает как обычный телефон?
Является ли ROG Phone идеальным мобильным игровым автоматом, который также хорошо работает как обычный телефон? дизайн Прежде чем мы перейдем к стилю, давайте поговорим об имени. Это R, O, G, Phone, что является аббревиатурой от Republic of Gamers, специализированного игрового бренда Asus. Это не телефон Rog, с Рогом не хватает Роджера, что, вероятно, к лучшему. Теперь все прояснилось, просто посмотрите на это. Дизайн телефона ROG кричит «игровой телефон»
Но какого цвета теперь должен быть белый?
Но какого цвета теперь должен быть белый? Пользователь: Nocolor elbot: Послушай, ты хотел, чтобы я чему-то научился, так что давай вернемся к цветам. Каким должен быть новый цвет для белого? Пользователь: red elbot: Достаточно справедливо: белый будет красным. Какой цвет мы назначаем розовому? Пользователь: brown elbot: Итак, розовый теперь коричневый. А какой цвет мы назначаем синему? Пользователь: green elbot: Достаточно справедливо: синий будет
В чем разница между бесплатными и платными продуктами?
В чем разница между бесплатными и платными продуктами? Бесплатный вариант ограничивает ваши настройки, а платная версия позволяет настроить все параметры. Бесплатная версия также требует обновления каждый раз, когда вы запускаете Windows и запускаете меню. Я все еще предпочитаю Classic Shell. Но 8Startbutton предлагает другое вращение в классическом меню «Пуск» Windows. Бесплатная версия, безусловно, стоит проверить. Pokki для Windows 8 Скриншот Лэнса Уитни / CNET
Покупка более дешевого планшета с Windows всегда означает ответ на один и тот же вопрос: могу ли я делать столько, сколько хочу, но при этом платить меньше?
Покупка более дешевого планшета с Windows всегда означает ответ на один и тот же вопрос: могу ли я делать столько, сколько хочу, но при этом платить меньше? В случае Asus Transformer Mini за $ 399 (T102HA) ответ - да, но едва ли. Ваше первое впечатление о Mini почти наверняка будет иметь обновленную версию Microsoft Surface 3 (в настоящее время больше не выпускается) с переработанной прочной клавиатурой и стилусом для загрузки. Но это изображение только до глубины души. Внутри его продуманного

Олько, сколько хочу, но при этом платить меньше?
Как это сделать, чтобы не сломаться и не купить что-то совершенно незапланированное?
Чувствуете, что не можете загружать песни с YouTube без осложнений и хлопот?
В конце концов, большинство пользователей устанавливают приложения только через Play Store, а Google внимательно следит за тем, чтобы вредоносные программы не проходили, верно?
Планирование и составление меню самостоятельно - это что-то не для вас?
Планирование и составление меню самостоятельно - это что-то не для вас?
Это все достаточно просто, когда ваша деятельность и встроенный фрагмент работают изолированно, но что, если вам нужно, чтобы они общались?
Что мне не хватает?
Я знаю, что у докси очень сильная добыча, но почему он начал гоняться за кошками только в последние четыре месяца?
Я предполагаю, что все кошки были резидентами до того, как туда попала ваша собака?