Висновок сторінки на печать- як це робиться і чого очікувати

Отже, як нам зробити сторінку, добре витримує таке випробування, як роздруківка?

Агенти (сучасні досить) розуміють вказівку на пристрій, для якого даний файл стилів призначений:

Увага звертаємо на media =; print- це для принтера, screen- для екранів, all- для всіх пристроїв. Насправді є ще можливість підключення стилів для мовних браузерів, для пристроїв з азбукою Брайля (для сліпих), для настінних проекторів і ще багато для чого, дивимося всі в перекладі специфікації (в меню зліва внизу). Але працюють поки цілком прийнятно тільки розпізнавання тільки трьох цих пристроїв. Для роздруківки сторінки нам цього вистачить цілком. Та й з азбукою Брайля я, слава богу, не знайомий.

Сам не особливо часто стикаюся з подібною потребою, але, бувало, чув таке: «ми це зараз роздрукуємо і спокійно подивимося».

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

Для прикладу, звичайно, наш сайт і возмем. (Для друку я його не готував, можете не перевіряти).

Що має значення в сторінці, яку ви бачите. Правильно, центральний стовпець з інформацією і заголовок. Від цього і будемо стрибати.

Всі номери лівого меню знаходяться у мене в окремому блоці-ставимо йому display: none; - блок «помер». Проробляємо цю операцію з блоком правого меню, «вбиваємо» і його. Дивимося в Мозілле- добре, немає їх.

Весь блок шапки і всі інші блоки крім потрібного нам центрального-display: none; - поки не залишиться тільки потрібний нам центр.

. Залишився.

Дрібниці. Важливі дрібниці.

Збільшуємо шрифти до, хм, small мінімум, краще ще крупніше, міняємо шрифт на font-family: "Times New Roman", Times, serif; всюди, де він у нас видно. Кажуть, він краще Новомосковськ зі сторінки (сам я Новомосковський з екрану, і особливої різниці не бачу, але рекомендують.).

Далі прибираємо всі темні фони, відмінні від білого. Все, виходить, прибираємо (майте на увазі, якщо хтось спробує роздрукувати сторінку з темним тлом, і ця сторінка ваша. Він вас знайде і скаже що дуже ображений: 0).

Прибираємо все фонові зображення зі стілей- навіщо вводити людей в додаткові витрати з купівлі нового картриджа для принтера?

Треба прибрати всі картинки, по цій-же причині. Якщо все картинки в уже прибраних блоках- добре, якщо ні треба думати. Можна спробувати вирішити проблему кардінально- прописати в стилях img. сам не пробував, але варто спробувати (і всім розповісти).

Отже, що ми получілі- вельми «кастровану» сторінку, в якій немає нічого, крім тексту і заголовка. Чим особливо гарні таблиці стилів, так це тим, що ми можемо змінити розташування блоків-щось перемістити вгору, щось вліво. З таблицями такого не зробити.

Тепер Ушатіков води вам на лисинку (ще немає її? Подождіте- буде).

Вставляємо на місце лінк на наш основний файл стилів style.css і бачимо повний «расдрай» в Опере- все поїхало, якщо не гірше. Справа в тому, що броузер бачить дві таблиці стилів і то, чого немає в першій, він доповнює з другої. Пам'ятайте, ми блоки вбивали?

Ставимо лінки на стилі в певній послідовності:

Файл для друку у нас містить менше інформації, що відображається, там ми все повбивали, а ось з основного файлу все буде доповняться. Тільки ось одна процедура ще осталась- все «убиті» в файлі стилів для друку ми повинні «оживити» в стилях для екрану, display: block; їм, або display: inline ;. дивлячись по призначенню.

Так! Майте на увазі, що для Мозилли, наприклад, таке відновлення можна і не робити-«сказано для принтерів, значить для принтерів», і не полізе вона туди; а ось Опера. Їй, мабуть, глибоко побоку, для якого це пристрої ми писали, все зжере (ось зараза) і, що найцікавіше, на екрані все виведе як на принтері. Це не таке просте справу, як виявляється. Одне радує-підготувавши для роздруківки одну сторінку, ми одночасно готуємо і весь сайт.

Налив чаю і згадав (зовсім забув, пардон) - висновок сторінки на друк можна робити так: