Press shift question mark to access a list of keyboard shortcuts
Этот скринкаст является частью нашей серии CSS AtoZ. Вы можете найти другие записи серии здесь .
расшифровка
В наши дни все больше и больше CSS используется для управления стилем вещей, отличных от веб-сайтов.
Одним из типов мультимедиа, к которому CSS может применить стилизацию, являются постраничные мультимедиа — такие вещи, как цифровые журналы и электронные книги или веб-сайт в форме таблицы стилей для печати.
Есть некоторые свойства, которые применяются только к этому типу носителя. Свойства widowsorphans
В этом эпизоде мы узнаем о:
- Постраничные медиа
-
widowsorphans
Постраничные СМИ
При написании CSS мы, как правило, стилизуем контент, предназначенный для отображения на экране.
Но есть целый ряд свойств, специально предназначенных для постраничных носителей, которые описывают, как документ может быть перенаправлен на ряд страниц.
Он добавляет функциональность для разбивки на страницы, полей страницы, размера страницы, ориентации и расширяет сгенерированный контент, чтобы включить нумерацию страниц, верхние и нижние колонтитулы страниц.
Самая близкая вещь к работе со спецификацией CSS Page, с которой я сталкивался в реальной веб-разработке, — это создание таблиц стилей печати. Мы коснулись этого в «Эпизоде 13: Медиа-запросы» .
При работе с этим совершенно другим носителем печатного контента есть несколько доступных свойств CSS, которые не применяются к экранным носителям. Давайте посмотрим на два для управления потоком текста между страницами.
widows
Когда текстовый абзац проходит через несколько страниц или столбцов, если он не умещается на одной странице или в одном столбце, он будет разделен на две части.
widow Это не считается визуально приятным, поэтому минимальное количество строк можно контролировать с помощью свойства widows
p {
column-count: 2;
widows: 3;
}
Это обеспечит наличие как минимум 3 строк текста в начале новой страницы или, в этом случае, в начале нового столбца.
orphans
В отличие от widowsorphans
Минимальное количество строк, которое должно быть оставлено до разрыва страницы, может контролироваться свойством CSS orphans
Это принимает положительное целое число и применяется только к постраничным носителям, таким как в таблице стилей печати.
@media print {
p {
orphans: 2;
}
}
Этот фрагмент обеспечит наличие по крайней мере двух строк текста абзаца до конца страницы. «2» — это значение по умолчанию, поэтому для увеличения количества строк можно установить более высокое значение числа orphans
Одинокие слова
Несколько запутанно, термин «сирота» имеет два значения в типографии.
Его также можно использовать для обозначения висящего, одинокого слова в конце абзаца, независимо от того, идет оно на разрыве страницы или нет.
Этот параграф имеет сироту в качестве последнего слова. Он сидит сам по себе и не выглядит великолепно.
Мы могли бы попытаться заставить это не произойти, вставив принудительные разрывы строк дальше по абзацу с тегом <br>
Это дает желаемый эффект, но если мы работаем над адаптивным проектом, этот принудительный разрыв строки может привести к довольно неприятным результатам при изменении ширины контейнера.
Я уберу теги разрыва и покажу немного более гибкий подход.
Когда текст перекомпоновывается, возникают некоторые моменты, когда пробел между двумя последними словами разрывается, и в итоге получается слово-сирота. Чтобы исправить это, между двумя последними словами в абзаце можно добавить неразрывный пробел.
Теперь, если места достаточно, все кажется нормальным, но если пространство становится слишком тесным, оба слова, соединенные неразрывным пробелом, переместятся на следующую строку, сохраняя все в чистоте и порядке.